W3.CSS RTL (o‘ngdan chapga)
O‘ngdan chapga yozishni qo‘llab-quvvatlash
Arab, ivrit va fors kabi ba’zi tillarda matn o‘ngdan chapga yoziladi.
W3.CSS 5 matn yo‘nalishini o‘zgartirish uchun w3-rtl va w3-ltr klasslarini o‘z ichiga oladi.
مرحبا بك في موقعي
هذا مثال على تخطيط من اليمين إلى اليسار باستخدام W3.CSS.
w3-rtl klassi
w3-rtl klassi matn yo‘nalishini o‘ngdan chapga o‘zgartiradi.
Misol
<div class="w3-container w3-rtl">
<h2>مرحبا بك في موقعي</h2>
<p>هذا مثال على نص من اليمين إلى اليسار.</p>
</div>
Butun sahifa uchun RTL
To‘liq o‘ngdan chapga yo‘nalgan sahifa uchun HTML’ning dir="rtl" atributidan foydalaning.
W3.CSS RTL uslubi uchun <body> elementiga w3-rtl klassini ham qo‘shishingiz mumkin.
Misol
<!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>
w3-ltr klassi
w3-ltr klassi matn yo‘nalishini yana chapdan o‘ngga qaytaradi.
Bu RTL sahifada ingliz tilidagi yoki chapdan o‘ngga yoziladigan boshqa kontent bo‘lganda foydali.
Misol
<div class="w3-rtl">
<p>هذا النص من اليمين إلى اليسار.</p>
<div class="w3-ltr">
<p>This text is left-to-right.</p>
</div>
</div>
RTL maketlar
Matn yo‘nalishi RTL maketning faqat bir qismi.
Yon panellar va asosiy kontent kabi sahifa elementlarini ham qarama-qarshi tomonga joylashtirish kerak bo‘lishi mumkin.
Misol
<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>
Maslahat: Hujjat yo‘nalishi uchun dir="rtl" atributidan, maketga uslub berish uchun esa W3.CSS klasslaridan foydalaning.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!