RTL

Sinau carane ngaktifake dhukungan kanggo teks tengen-ngiwa ing Bootstrap ing tata letak, komponen, lan utilitas.

Ing kaca iki

Menowo

Disaranake supaya kenal karo Bootstrap dhisik kanthi maca liwat kaca Pambuka Miwiti . Sawise sampeyan wis mbukak liwat, terus maca kene kanggo carane ngaktifake RTL.

Sampeyan bisa uga pengin maca babagan proyek RTLCSS , amarga menehi daya kanggo pendekatan RTL.

Fitur eksperimental

Fitur RTL isih eksperimen lan bisa uga bakal berkembang miturut umpan balik pangguna. Kesawang soko utawa duwe dandan kanggo suggest? Mbukak masalah , kita seneng njaluk wawasan sampeyan.

HTML sing dibutuhake

Ana rong syarat sing ketat kanggo ngaktifake RTL ing kaca sing nganggo Bootstrap.

Setel dir="rtl"ing <html>unsur.
Tambah langatribut sing cocog, kaya lang="ar", ing <html>unsur kasebut.

Saka ing kono, sampeyan kudu nyakup versi RTL saka CSS kita. Contone, iki stylesheet kanggo CSS sing dikompilasi lan dikurangi kanthi RTL aktif:

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

Cithakan wiwitan

Sampeyan bisa ndeleng syarat ing ndhuwur sing dibayangke ing cithakan wiwitan RTL sing diowahi iki.

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

conto RTL

Miwiti salah siji saka sawetara conto RTL .

pendekatan

Pendekatan kita kanggo mbangun dhukungan RTL menyang Bootstrap dilengkapi karo rong keputusan penting sing mengaruhi cara nulis lan nggunakake CSS:

Pisanan, kita mutusake kanggo mbangun karo proyek RTLCSS . Iki menehi sawetara fitur kuat kanggo ngatur owah-owahan lan overrides nalika pindhah saka LTR kanggo RTL. Uga ngidini kita mbangun rong versi Bootstrap saka siji basis kode.
Kapindho, kita wis ganti jeneng sawetara kelas arah kanggo nggunakake pendekatan sifat logis. Umume sampeyan wis sesambungan karo sifat logis amarga utilitas fleksibel kita - ngganti sifat arah kaya leftlan rightsing disenengi startlan end. Sing nggawe jeneng kelas lan nilai cocok kanggo LTR lan RTL tanpa overhead.

Contone, tinimbang .ml-3kanggo margin-left, nggunakake .ms-3.

Nggarap RTL, liwat sumber Sass utawa kompilasi CSS, mesthine ora beda karo LTR standar.

Ngatur saka sumber

Nalika nerangake kustomisasi , cara sing disenengi yaiku njupuk kauntungan saka variabel, peta, lan campuran. Pendekatan iki bisa digunakake kanggo RTL, sanajan wis diproses saka file sing dikompilasi, amarga cara kerja RTLCSS .

Nilai RTL khusus

Nggunakake arahan nilai RTLCSS , sampeyan bisa nggawe output variabel dadi nilai sing beda kanggo RTL. Contone, kanggo ngurangi bobot $font-weight-bolding saindhenging basis kode, sampeyan bisa nggunakake /*rtl: {value}*/sintaks:

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

Sing bakal ngasilake ing ngisor iki kanggo CSS standar lan CSS RTL:

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

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

Numpuk font alternatif

Yen sampeyan nggunakake font khusus, elinga yen ora kabeh font ndhukung aksara non-Latin. Kanggo ngalih saka kulawarga Pan-Eropah menyang kulawarga Arab, sampeyan bisa uga kudu nggunakake /*rtl:insert: {value}*/tumpukan font kanggo ngowahi jeneng kulawarga font.

Contone, kanggo ngalih saka Helvetica Neue WebfontLTR menyang Helvetica Neue ArabicRTL, kode Sass sampeyan katon kaya iki:

$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 lan RTL bebarengan

Perlu LTR lan RTL ing kaca sing padha? Thanks kanggo RTLCSS String Maps , iki cukup gampang. Bungkus @imports sampeyan karo kelas, lan atur aturan ganti jeneng khusus kanggo 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*/

Sawise mbukak Sass banjur RTLCSS, saben pamilih ing file CSS bakal prepended dening .ltr, lan .rtlkanggo file RTL. Saiki sampeyan bisa nggunakake loro file ing kaca sing padha, lan mung nggunakake .ltrutawa .rtling pambungkus komponen kanggo nggunakake siji utawa arah liyane.

Kasus pinggiran lan watesan sing dikenal

Nalika pendekatan iki bisa dingerteni, mangga digatekake ing ngisor iki:

Nalika ngoper .ltrlan .rtl, priksa manawa sampeyan nambah dirlan langatribut sing cocog.
Loading file loro bisa dadi bottleneck kinerja nyata: nimbang sawetara optimasi , lan bisa uga nyoba kanggo mbukak salah siji saka file asynchronously .
Gaya nesting kanthi cara iki bakal nyegah form-validation-state()mixin bisa digunakake kaya sing dikarepake, mula sampeyan kudu ngapiki dhewe. Waca #31223 .

Pemisah breadcrumb minangka siji-sijine kasus sing mbutuhake variabel anyar dhewe - yaiku $breadcrumb-divider-flipped- default menyang $breadcrumb-divider.

RTL