RTL

Diajar kumaha ngaktipkeun rojongan pikeun téks katuhu-ka-kénca dina Bootstrap sakuliah tata perenah urang, komponén, jeung utilitas.

Dina kaca ieu

Wawuh

Kami ngarékoméndasikeun pikeun kenal sareng Bootstrap heula ku maca halaman Perkenalan Ngamimitian kami . Sakali anjeun parantos ngaliwat, teraskeun maca di dieu pikeun kumaha cara ngaktipkeun RTL.

Anjeun oge bisa hayang maca up on proyék RTLCSS , sabab kakuatan pendekatan kami pikeun RTL.

Fitur ékspérimén

Fitur RTL masih ékspérimén sareng sigana bakal mekar dumasar kana tanggapan pangguna. Ningali hiji hal atanapi gaduh pamutahiran pikeun nyarankeun? Buka hiji masalah , kami hoyong kéngingkeun wawasan anjeun.

HTML diperlukeun

Aya dua syarat anu ketat pikeun ngaktipkeun RTL dina halaman anu didamel Bootstrap.

Setel dir="rtl"dina <html>unsur.
Tambahkeun hiji langatribut luyu, kawas lang="ar", dina <html>unsur.

Ti dinya, anjeun kedah ngalebetkeun versi RTL tina CSS kami. Salaku conto, ieu mangrupikeun stylesheet pikeun CSS kami anu disusun sareng diminimalkeun kalayan diaktipkeun RTL:

<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">

Citakan starter

Anjeun tiasa ningali sarat di luhur reflected dina ieu dirobah RTL starter template.

<!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>

conto RTL

Mimitian ku salah sahiji sababaraha conto RTL kami .

Ngadeukeutan

Pendekatan kami pikeun ngawangun dukungan RTL kana Bootstrap hadir sareng dua kaputusan penting anu mangaruhan kumaha urang nyerat sareng ngagunakeun CSS kami:

Kahiji, urang mutuskeun pikeun ngawangun éta kalayan proyék RTLCSS . Ieu masihan kami sababaraha fitur anu kuat pikeun ngatur parobahan sareng overrides nalika pindah ti LTR ka RTL. Ogé ngamungkinkeun urang ngawangun dua vérsi Bootstrap tina hiji basis kode.
Kadua, kami parantos namina sababaraha kelas arah pikeun ngadopsi pendekatan sipat logis. Seuseueurna anjeun parantos berinteraksi sareng sipat logis berkat utilitas fleksibel kami-aranjeunna ngagentos sipat arah sapertos leftsareng rightdina kahadean startsareng end. Nu ngajadikeun ngaran kelas na nilai luyu pikeun LTR na RTL tanpa overhead nanaon.

Contona, tinimbang .ml-3keur margin-left, make .ms-3.

Gawe sareng RTL, ngaliwatan sumber urang Sass atanapi CSS disusun, teu kudu jauh béda ti LTR standar urang sanajan.

Sesuaikeun tina sumber

Nalika datang ka kustomisasi , cara anu dipikaresep nyaéta ngamangpaatkeun variabel, peta, sareng campuran. Pendekatan ieu tiasa dianggo sami pikeun RTL, sanaos diolah saatosna tina file anu disusun, hatur nuhun kana kumaha RTLCSS jalanna .

nilai custom RTL

Ngagunakeun diréktif nilai RTLCSS , anjeun tiasa ngadamel kaluaran variabel hiji nilai béda pikeun RTL. Contona, pikeun ngurangan beurat $font-weight-boldsapanjang codebase, Anjeun bisa make /*rtl: {value}*/sintaksis:

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

Nu bakal kaluaran ka handap pikeun CSS standar urang jeung RTL CSS:

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

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

tumpukan font alternatif

Upami anjeun nganggo font khusus, perhatikeun yén henteu sadayana fon ngadukung alfabét non-Latin. Pikeun ngalih ti Pan-Éropa ka kulawarga Arab, anjeun kedah nganggo /*rtl:insert: {value}*/dina tumpukan font anjeun pikeun ngarobih nami kulawarga font.

Contona, pikeun ngalih tina Helvetica Neuefont LTR ka Helvetica Neue ArabicRTL, kode Sass anjeun tiasa sapertos kieu:

$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 sareng RTL dina waktos anu sami

Peryogi LTR sareng RTL dina halaman anu sami? Hatur nuhun kana RTLCSS String Maps , ieu geulis lugas. Bungkus @imports anjeun kalawan kelas, tur nyetel aturan ngaganti ngaran custom pikeun 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*/

Sanggeus ngajalankeun Sass lajeng RTLCSS, unggal pamilih dina file CSS anjeun bakal prepended ku .ltr, sarta .rtlpikeun file RTL. Ayeuna anjeun tiasa nganggo duanana file dina halaman anu sami, sareng ngan ukur nganggo .ltratanapi .rtldina bungkus komponén anjeun pikeun nganggo hiji atanapi arah anu sanés.

Kasus tepi sareng watesan anu dipikanyaho

Sanaos pendekatan ieu tiasa kaharti, perhatikeun ieu:

Nalika ngagentos .ltrsareng .rtl, pastikeun anjeun nambihan dirsareng langatribut sasuai.
Loading duanana file bisa jadi bottleneck kinerja nyata: mertimbangkeun sababaraha optimasi , sarta meureun coba mun muka salah sahiji file asynchronously .
Gaya nyarang ku cara ieu bakal nyegah form-validation-state()mixin kami tiasa dianggo sakumaha anu dituju, ku kituna anjeun kedah ngarobih sakedik ku nyalira. Tempo #31223 .

Pamisah breadcrumb mangrupikeun hiji-hijina pasualan anu meryogikeun variabel énggal-énggalna sorangan - nyaéta $breadcrumb-divider-flipped-default kana $breadcrumb-divider.

RTL