RTL

Sužinokite, kaip įgalinti teksto iš dešinės į kairę palaikymą sistemoje „Bootstrap“ mūsų išdėstyme, komponentuose ir paslaugų programose.

Šiame puslapyje

Susipažink

Rekomenduojame pirmiausia susipažinti su „Bootstrap“ perskaitę mūsų pradžios įvado puslapį . Peržiūrėję toliau skaitykite čia, kaip įjungti RTL.

Taip pat galbūt norėsite perskaityti apie RTLCSS projektą , nes jis skatina mūsų požiūrį į RTL.

Eksperimentinė funkcija

RTL funkcija vis dar yra eksperimentinė ir tikriausiai bus tobulinama atsižvelgiant į vartotojų atsiliepimus. Pastebėjote ką nors arba turite ką nors patobulinti? Pradėkite problemą , norėtume gauti jūsų įžvalgų.

Reikalingas HTML

Yra du griežti reikalavimai įgalinti RTL „Bootstrap“ maitinamuose puslapiuose.

Nustatykite dir="rtl"ant <html>elemento.
Prie elemento pridėkite atitinkamą langatributą, pvz ., .lang="ar"<html>

Iš ten turėsite įtraukti mūsų CSS RTL versiją. Pavyzdžiui, čia yra mūsų sudaryto ir sumažinto CSS su įjungtu RTL stiliaus lapas:

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

Starterio šablonas

Šiame pakeistame RTL pradžios šablone galite matyti aukščiau nurodytus reikalavimus.

<!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 pavyzdžiai

Pradėkite nuo vieno iš kelių mūsų RTL pavyzdžių .

metodas

Mūsų požiūris į RTL palaikymą „Bootstrap“ apima du svarbius sprendimus, turinčius įtakos tam, kaip rašome ir naudojame CSS:

Pirmiausia nusprendėme jį sukurti naudodami RTLCSS projektą. Tai suteikia mums keletą galingų funkcijų, leidžiančių valdyti pakeitimus ir nepaisymą pereinant iš LTR į RTL. Tai taip pat leidžia mums sukurti dvi „Bootstrap“ versijas iš vienos kodų bazės.
Antra, pervardijome kelias krypties klases, kad pritaikytume loginių savybių metodą. Daugelis iš jūsų jau bendravo su loginėmis savybėmis dėl mūsų lanksčių paslaugų – jos pakeičia krypties ypatybes, pvz ., leftir rightnaudai startir end. Dėl to klasių pavadinimai ir reikšmės tinka LTR ir RTL be jokių papildomų išlaidų.

Pavyzdžiui, .ml-3vietoj margin-leftnaudokite .ms-3.

Tačiau darbas su RTL, naudojant mūsų šaltinį Sass arba kompiliuotą CSS, neturėtų labai skirtis nuo numatytojo LTR.

Tinkinti iš šaltinio

Kalbant apie tinkinimą , tinkamiausias būdas yra pasinaudoti kintamųjų, žemėlapių ir mišinių teikiamais pranašumais. Šis metodas taip pat veikia ir RTL, net jei jis vėliau apdorojamas iš sukompiliuotų failų, nes veikia RTLCSS .

Tinkintos RTL reikšmės

Naudodami RTLCSS vertės direktyvas , galite nustatyti kintamojo išvesties skirtingą RTL reikšmę. Pavyzdžiui, norėdami sumažinti svorį $font-weight-boldvisoje kodų bazėje, galite naudoti /*rtl: {value}*/sintaksę:

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

Kuris būtų išvestas į šiuos numatytuosius CSS ir RTL CSS:

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

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

Alternatyvi šriftų krūva

Jei naudojate pasirinktinį šriftą, atminkite, kad ne visi šriftai palaiko ne lotynišką abėcėlę. Jei norite pereiti iš visos Europos į arabų šeimą, šriftų grupe gali reikėti naudoti /*rtl:insert: {value}*/šriftų šeimų pavadinimus.

Pavyzdžiui, norint pakeisti Helvetica NeueLTR šriftą į Helvetica Neue ArabicRTL, jūsų Sass kodas gali atrodyti taip:

$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 ir RTL vienu metu

Reikia ir LTR, ir RTL tame pačiame puslapyje? RTLCSS String Maps dėka tai gana paprasta. Apvyniokite savo @imports klase ir nustatykite tinkintą RTLCSS pervadinimo taisyklę:

/* 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*/

Paleidus Sass, tada RTLCSS, kiekvienas jūsų CSS failų parinkiklis bus pridėtas .ltrprie .rtlRTL failų ir . Dabar galite naudoti abu failus tame pačiame puslapyje ir tiesiog naudoti .ltrarba .rtlant savo komponentų įvynioklius naudoti vieną ar kitą kryptį.

Kraštiniai atvejai ir žinomi apribojimai

Nors šis metodas yra suprantamas, atkreipkite dėmesį į šiuos dalykus:

Perjungdami .ltrir .rtlįsitikinkite, kad atitinkamai pridedate dirir langatributus.
Abiejų failų įkėlimas gali būti tikras našumo kliūtis: apsvarstykite galimybę optimizuoti ir galbūt pabandykite įkelti vieną iš tų failų asinchroniškai .
Tokiu būdu sudėti stiliai neleis mūsų form-validation-state()mišiniui veikti taip, kaip numatyta, todėl turėsite patys jį šiek tiek pakoreguoti. Žr. #31223 .

Nurodyto kelio skyriklis yra vienintelis atvejis, kai reikalingas visiškai naujas kintamasis, ty $breadcrumb-divider-flippedpagal nutylėjimą $breadcrumb-divider.

RTL