RTL

ہمارے لے آؤٹ، اجزاء اور افادیت میں بوٹسٹریپ میں دائیں سے بائیں متن کے لیے سپورٹ کو فعال کرنے کا طریقہ سیکھیں۔

اس صفحہ پر

واقف ہو جاؤ

ہم تجویز کرتے ہیں کہ بوٹسٹریپ سے پہلے اپنے تعارفی صفحہ کو پڑھ کر واقف ہوں ۔ ایک بار جب آپ اس سے گزر چکے ہیں، تو یہاں پڑھنا جاری رکھیں کہ RTL کو کیسے فعال کیا جائے۔

آپ RTLCSS پروجیکٹ کو بھی پڑھنا چاہیں گے ، کیونکہ یہ RTL تک ہمارے نقطہ نظر کو طاقت دیتا ہے۔

تجرباتی خصوصیت

RTL فیچر ابھی بھی تجرباتی ہے اور ممکنہ طور پر صارف کے تاثرات کے مطابق تیار ہوگا۔ کچھ دیکھا یا تجویز کرنے کے لیے کوئی بہتری ہے؟ ایک مسئلہ کھولیں ، ہم آپ کی بصیرت حاصل کرنا پسند کریں گے۔

مطلوبہ HTML

بوٹسٹریپ سے چلنے والے صفحات میں RTL کو فعال کرنے کے لیے دو سخت تقاضے ہیں۔

عنصر dir="rtl"پر سیٹ کریں ۔<html>
ایک مناسب langوصف شامل کریں، جیسے lang="ar"، <html>عنصر پر۔

وہاں سے، آپ کو ہمارے CSS کا RTL ورژن شامل کرنے کی ضرورت ہوگی۔ مثال کے طور پر، RTL فعال کے ساتھ ہمارے مرتب شدہ اور منفائیڈ CSS کے لیے اسٹائل شیٹ یہ ہے:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

سٹارٹر ٹیمپلیٹ

آپ اس ترمیم شدہ RTL سٹارٹر ٹیمپلیٹ میں مندرجہ بالا ضروریات کو دیکھ سکتے ہیں۔

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

    <title>مرحبا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL مثالیں۔

ہماری متعدد RTL مثالوں میں سے ایک کے ساتھ شروع کریں ۔

نقطہ نظر

بوٹسٹریپ میں RTL سپورٹ بنانے کے لیے ہمارا نقطہ نظر دو اہم فیصلوں کے ساتھ آتا ہے جو ہمارے CSS کو لکھنے اور استعمال کرنے کے طریقے پر اثر انداز ہوتے ہیں:

سب سے پہلے، ہم نے اسے RTLCSS پروجیکٹ کے ساتھ بنانے کا فیصلہ کیا۔ یہ ہمیں LTR سے RTL میں منتقل ہونے پر تبدیلیوں اور اوور رائیڈز کو منظم کرنے کے لیے کچھ طاقتور خصوصیات فراہم کرتا ہے۔ یہ ہمیں ایک کوڈ بیس سے بوٹسٹریپ کے دو ورژن بنانے کی بھی اجازت دیتا ہے۔
دوسرا، ہم نے منطقی خصوصیات کے نقطہ نظر کو اپنانے کے لیے مٹھی بھر دشاتمک کلاسوں کا نام تبدیل کر دیا ہے۔ آپ میں سے زیادہ تر لوگ ہماری فلیکس یوٹیلیٹیز کی بدولت منطقی خصوصیات کے ساتھ پہلے ہی بات چیت کر چکے ہیں — وہ سمت خصوصیات کی جگہ لے لیتے ہیں جیسے leftاور rightکے حق میں startاور end۔ یہ کلاس کے نام اور اقدار کو بغیر کسی اوور ہیڈ کے LTR اور RTL کے لیے موزوں بنا دیتا ہے۔

مثال کے طور پر، .ml-3for کے بجائے margin-leftاستعمال کریں .ms-3۔

RTL کے ساتھ کام کرنا، ہمارے ذریعہ Sass یا مرتب کردہ CSS کے ذریعے، اگرچہ ہمارے پہلے سے طے شدہ LTR سے زیادہ مختلف نہیں ہونا چاہیے۔

ماخذ سے حسب ضرورت بنائیں

جب حسب ضرورت کی بات آتی ہے تو ترجیحی طریقہ یہ ہے کہ متغیرات، نقشوں اور مکسنس سے فائدہ اٹھایا جائے۔ یہ نقطہ نظر RTL کے لیے یکساں کام کرتا ہے، یہاں تک کہ اگر یہ مرتب شدہ فائلوں سے پوسٹ پروسیس کیا گیا ہو، شکریہ کہ RTLCSS کیسے کام کرتا ہے ۔

حسب ضرورت RTL اقدار

RTLCSS ویلیو ڈائریکٹو کا استعمال کرتے ہوئے ، آپ RTL کے لیے ایک متغیر آؤٹ پٹ کو ایک مختلف ویلیو بنا سکتے ہیں۔ مثال کے طور پر، پورے کوڈبیس میں وزن کم کرنے کے لیے ، آپ نحو $font-weight-boldکا استعمال کر سکتے ہیں :/*rtl: {value}*/

$font-weight-bold: 700 #{/* rtl:600 */} !default;

جو ہمارے ڈیفالٹ CSS اور RTL CSS کے لیے درج ذیل کو آؤٹ پٹ کرے گا:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

متبادل فونٹ اسٹیک

اگر آپ حسب ضرورت فونٹ استعمال کر رہے ہیں، تو آگاہ رہیں کہ تمام فونٹس غیر لاطینی حروف تہجی کی حمایت نہیں کرتے ہیں۔ پین-یورپی سے عربی فیملی میں جانے کے لیے، آپ کو /*rtl:insert: {value}*/فونٹ فیملیز کے ناموں میں ترمیم کرنے کے لیے اپنے فونٹ اسٹیک میں استعمال کرنے کی ضرورت پڑ سکتی ہے۔

مثال کے طور پر، Helvetica Neue WebfontLTR سے Helvetica Neue ArabicRTL میں سوئچ کرنے کے لیے، آپ کا Sass کوڈ اس طرح نظر آتا ہے:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

ایک ہی وقت میں LTR اور RTL

ایک ہی صفحہ پر LTR اور RTL دونوں کی ضرورت ہے؟ RTLCSS String Maps کا شکریہ ، یہ کافی سیدھا ہے۔ اپنے s کو کلاس کے ساتھ لپیٹیں @import، اور RTLCSS کے لیے نام تبدیل کرنے کا حسب ضرورت اصول مرتب کریں:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

Sass پھر RTLCSS چلانے کے بعد، آپ کی CSS فائلوں میں ہر سلیکٹر کو RTL فائلوں کے لیے .ltrاور اس کے ذریعے پہلے سے جوڑا جائے گا۔ .rtlاب آپ دونوں فائلوں کو ایک ہی صفحے پر استعمال کرنے کے قابل ہو گئے ہیں، اور صرف ایک .ltrیا .rtlدوسری سمت استعمال کرنے کے لیے اپنے اجزاء کے ریپرز کو استعمال کر سکتے ہیں۔

ایج کیسز اور معلوم حدود

اگرچہ یہ نقطہ نظر قابل فہم ہے، براہ کرم درج ذیل پر توجہ دیں:

سوئچ کرتے وقت .ltrاور .rtl، یقینی بنائیں کہ آپ اس کے مطابق شامل dirاور langانتسابات کرتے ہیں۔
دونوں فائلوں کو لوڈ کرنا ایک حقیقی کارکردگی کی رکاوٹ ہو سکتا ہے: کچھ اصلاح پر غور کریں، اور ہو سکتا ہے کہ ان فائلوں میں سے کسی ایک کو غیر مطابقت پذیر طور پر لوڈ کرنے کی کوشش کریں ۔
اس طرح گھوںسلا کرنے کے انداز ہمارے form-validation-state()مکس کو حسب منشا کام کرنے سے روکیں گے، اس لیے آپ کو اسے خود سے تھوڑا سا موافقت کرنے کی ضرورت ہے۔ ملاحظہ کریں نمبر 31223

بریڈ کرمب الگ کرنے والا واحد کیس ہے جس کے لیے اپنے بالکل نئے متغیر کی ضرورت ہوتی ہے — یعنی $breadcrumb-divider-flipped— ڈیفالٹ کرنا $breadcrumb-divider۔

RTL