W3.CSS - RTL
مرحبا بك في موقعي
هذا مثال على تخطيط من اليمين إلى اليسار باستخدام W3.CSS.
RTL (Right to Left) Support
W3.CSS Version 5 has built-in support for right-to-left (RTL) languages, which makes it easier to create websites that cater to Arabic, Hebrew, Persian, or other RTL language speakers.
Enable RTL Support
The w3-rtlclass adjusts text direction and alignment for RTL layouts.
You can apply w3-rtl to the <body>
tag for global RTL:
Example
<body class="w3-container w3-rtl">
<h2>مرحبا بك
في موقعي</h2>
<p>هذا مثال على تخطيط من اليمين إلى اليسار باستخدام W3.CSS.</p>
</body>
Or you can apply w3-rtl to a part of the document:
Example
<div class="w3-container w3-rtl">
<h2>مرحبا بك
في موقعي</h2>
<p>هذا مثال على تخطيط من اليمين إلى اليسار باستخدام W3.CSS.</p>
</div>
Reverse RTL
To revert any section to left-to-right, you can use the w3-ltr class.
What Else to Do?
Use dir="rtl" in the <html>
tag for proper semantic rendering.
Use class="w3-rtl" in the <body> tag to ensure all W3.CSS
components respect the RTL direction.
Use margin-right for main content
instead of margin-left.
Position the sidebar using right:0.
Example
<html lang="ar" dir="rtl">
<body class="w3-rtl">
<main class="w3-container" style="margin-right:200px">
<nav class="w3-sidebar" style="width:200px; right:0">
Remember to adjust other text alignment, margins, paddings and floats where applicable.
Ensure that layout components such as navigation, cards, or columns flip appropriately for RTL reading.
