W3.CSS RTL
Right-to-Left Support
Some languages, such as Arabic, Hebrew, and Persian, are written from right to left.
W3.CSS 5 includes the w3-rtl and w3-ltr classes for changing text direction.
مرحبا بك في موقعي
هذا مثال على تخطيط من اليمين إلى اليسار باستخدام W3.CSS.
The w3-rtl Class
The w3-rtl class changes the text direction to right-to-left.
Example
<div class="w3-container w3-rtl">
<h2>مرحبا بك في موقعي</h2>
<p>هذا مثال على نص من اليمين إلى اليسار.</p>
</div>
RTL for the Whole Page
For a complete right-to-left page, use the HTML dir="rtl" attribute.
You can also add w3-rtl to the <body> element for W3.CSS RTL styling.
Example
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>موقعي</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
</head>
<body class="w3-rtl">
<div class="w3-container">
<h1>مرحبا بك في موقعي</h1>
<p>هذه صفحة من اليمين إلى اليسار.</p>
</div>
</body>
</html>
The w3-ltr Class
The w3-ltr class changes the text direction back to left-to-right.
This is useful when an RTL page contains English or other left-to-right content.
Example
<div class="w3-rtl">
<p>هذا النص من اليمين إلى اليسار.</p>
<div class="w3-ltr">
<p>This text is left-to-right.</p>
</div>
</div>
RTL Layouts
Text direction is only one part of an RTL layout.
Page elements such as sidebars and main content may also need to be positioned on the opposite side.
Example
<html lang="ar" dir="rtl">
<body class="w3-rtl">
<nav class="w3-sidebar w3-bar-block w3-light-grey"
style="width:200px;right:0">
<a href="#" class="w3-bar-item w3-button">الرئيسية</a>
<a href="#" class="w3-bar-item w3-button">حول</a>
<a href="#" class="w3-bar-item w3-button">اتصل بنا</a>
</nav>
<main class="w3-container" style="margin-right:200px">
<h2>محتوى الصفحة</h2>
<p>هذا مثال على تخطيط RTL.</p>
</main>
</body>
</html>
Tip: Use dir="rtl" for the document direction and use W3.CSS classes to style the layout.
What You Have Learned
In this chapter you have learned how to:
- Use
w3-rtlfor right-to-left content - Use
dir="rtl"for a right-to-left document - Use
w3-ltrinside an RTL page - Adjust layouts such as sidebars for right-to-left pages
