RTL

በBootstrap ውስጥ ለቀኝ-ወደ-ግራ ጽሑፍ ድጋፍን እንዴት ማንቃት እንደሚቻል በአቀማመጥ፣ ክፍሎች እና መገልገያዎች ላይ ይማሩ።

በዚህ ገጽ ላይ

ይተዋወቁ

በመጀመሪያ የመግቢያ ገጻችንን በማንበብ ከ Bootstrap ጋር ለመተዋወቅ እንመክራለን ። አንዴ ካለፉ በኋላ፣ RTLን እንዴት ማንቃት እንደሚቻል እዚህ ማንበብ ይቀጥሉ።

የ RTL አቀራረባችንን ስለሚያበረታታ ስለ RTLCSS ፕሮጀክት ማንበብ ሊፈልጉ ይችላሉ ።

የሙከራ ባህሪ

የRTL ባህሪው አሁንም የሙከራ ነው እና በተጠቃሚ ግብረመልስ መሰረት ሊዳብር ይችላል። የሆነ ነገር ተመልክተዋል ወይም ለመጠቆም ማሻሻያ አለዎት? ችግር ይክፈቱ ፣ ግንዛቤዎችዎን ቢያገኝልን ደስ ይለናል።

አስፈላጊ HTML

RTL በBootstrap-powered pages ውስጥ ለማንቃት ሁለት ጥብቅ መስፈርቶች አሉ።

ኤለመንት 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

የ RTL ምሳሌዎች

ከብዙ የ RTL ምሳሌዎች ውስጥ በአንዱ ይጀምሩ ።

አቀራረብ

የ RTL ድጋፍን ወደ Bootstrap የመገንባት አካሄዳችን የእኛን CSS እንዴት እንደምንጽፍ እና እንደምንጠቀምበት ከሚወስኑ ሁለት አስፈላጊ ውሳኔዎች ጋር አብሮ ይመጣል።

በመጀመሪያ, በ RTLCSS ፕሮጀክት ለመገንባት ወሰንን. ይህ ከLTR ወደ RTL ስንንቀሳቀስ ለውጦችን ለመቆጣጠር እና ለመሻር አንዳንድ ኃይለኛ ባህሪያትን ይሰጠናል። እንዲሁም ከአንድ ኮድ ቤዝ ሁለት የBootstrap ስሪቶችን እንድንገነባ ያስችለናል።
ሁለተኛ፣ አመክንዮአዊ ባህሪያት አቀራረብን ለመቀበል ጥቂት የአቅጣጫ ክፍሎችን ሰይመናል። አብዛኞቻችሁ ቀደም ሲል ከሎጂካዊ ንብረቶች ጋር መስተጋብር ፈጥረዋል ለተለዋዋጭ መገልገያዎቻችን - እነሱ የአቅጣጫ ባህሪያትን እንደ leftእና rightሞገስ ይተካሉ startእና end. ያ የክፍል ስሞችን እና እሴቶችን ያለምንም ክፍያ ለ LTR እና RTL ተገቢ ያደርገዋል።

ለምሳሌ፣ .ml-3ለ ሳይሆን 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;
}

ተለዋጭ የቅርጸ-ቁምፊ ቁልል

In the case you’re using a custom font, be aware that not all fonts support the non-Latin alphabet. To switch from Pan-European to Arabic family, you may need to use /*rtl:insert: {value}*/ in your font stack to modify the names of font families.

For example, to switch from Helvetica Neue font for LTR to Helvetica Neue Arabic for RTL, your Sass code could look like this:

$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 and RTL at the same time

Need both LTR and RTL on the same page? Thanks to RTLCSS String Maps, this is pretty straightforward. Wrap your @imports with a class, and set a custom rename rule for 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*/

After running Sass then RTLCSS, each selector in your CSS files will be prepended by .ltr, and .rtl for RTL files. Now you’re able to use both files on the same page, and simply use .ltr or .rtl on your components wrappers to use one or the other direction.

Edge cases and known limitations

While this approach is understandable, please pay attention to the following:

When switching .ltr and .rtl, make sure you add dir and lang attributes accordingly.
Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously.
Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

The breadcrumb separator is the only case requiring its own brand-new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

RTL