RTL

Lernu kiel ebligi subtenon por dekstre-maldekstren tekston en Bootstrap tra niaj aranĝoj, komponantoj kaj iloj.

Sur ĉi tiu paĝo

Konatiĝu

Ni rekomendas unue konatiĝi kun Bootstrap legante nian Komencan Enkondukan paĝon . Post kiam vi trapasis ĝin, daŭrigu legi ĉi tie por kiel ebligi RTL.

Vi eble ankaŭ volas legi la RTLCSS-projekton , ĉar ĝi plifortigas nian aliron al RTL.

Eksperimenta trajto

La RTL-trajto ankoraŭ estas eksperimenta kaj verŝajne evoluos laŭ uzant-reagoj. Vi vidis ion aŭ havas plibonigon por sugesti? Malfermu temon , ni ŝatus ricevi viajn komprenojn.

Bezonata HTML

Estas du striktaj postuloj por ebligi RTL en Bootstrap-funkciigitaj paĝoj.

Agordu dir="rtl"sur la <html>elemento.
Aldonu taŭgan langatributon, kiel lang="ar", sur la <html>elemento.

De tie, vi devos inkluzivi RTL-version de nia CSS. Ekzemple, jen la stilfolio por nia kompilita kaj minimumigita CSS kun RTL ebligita:

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

Komenca ŝablono

Vi povas vidi la suprajn postulojn reflektitajn en ĉi tiu modifita RTL-startiga ŝablono.

<!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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL-ekzemploj

Komencu kun unu el niaj pluraj RTL-ekzemploj .

Alproksimiĝo

Nia aliro al konstruado de RTL-subteno en Bootstrap venas kun du gravaj decidoj, kiuj influas kiel ni skribas kaj uzas nian CSS:

Unue, ni decidis konstrui ĝin per la projekto RTLCSS . Ĉi tio donas al ni kelkajn potencajn funkciojn por administri ŝanĝojn kaj anstataŭigojn kiam oni transiras de LTR al RTL. Ĝi ankaŭ permesas al ni konstrui du versiojn de Bootstrap el unu kodbazo.
Due, ni renomis kelkajn direktajn klasojn por adopti aliron de logikaj proprietoj. Plej multaj el vi jam interagis kun logikaj propraĵoj danke al niaj fleksaj utilecoj—ili anstataŭigas direktajn ecojn kiel leftkaj rightfavore startkaj end. Tio igas la klasnomojn kaj valorojn taŭgaj por LTR kaj RTL sen ia superkosto.

Ekzemple, anstataŭ .ml-3por margin-left, uzu .ms-3.

Labori kun RTL, per nia fonto Sass aŭ kompilita CSS, tamen ne devus esti multe malsama de nia defaŭlta LTR.

Agordu de fonto

Kiam temas pri personigo , la preferata maniero estas utiligi variablojn, mapojn kaj miksaĵojn. Ĉi tiu aliro funkcias same por RTL, eĉ se ĝi estas post-prilaborita de la kompilitaj dosieroj, danke al kiel funkcias RTLCSS .

Propraj RTL-valoroj

Uzante RTLCSS-valorajn direktivojn , vi povas fari variablan eligon malsama valoro por RTL. Ekzemple, por malpliigi la pezon por $font-weight-boldla tuta kodbazo, vi povas uzi la /*rtl: {value}*/sintakson:

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

Kiu eligus al la sekvanta por niaj defaŭltaj CSS kaj RTL CSS:

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

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

Alternativa tiparo stako

Se vi uzas kutiman tiparon, konsciu, ke ne ĉiuj tiparoj subtenas la nelatinan alfabeton. Por ŝanĝi de tuteŭropa al araba familio, vi eble bezonos uzi /*rtl:insert: {value}*/en via tiparstako por modifi la nomojn de tiparfamilioj.

Ekzemple, por ŝanĝi de Helvetica Neue Webfontpor LTR al Helvetica Neue Arabicpor RTL, via Sass-kodo aspektas jene:

$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 kaj RTL samtempe

Ĉu vi bezonas kaj LTR kaj RTL sur la sama paĝo? Danke al RTLCSS String Maps , ĉi tio estas sufiĉe simpla. Envolvu viajn @imports per klaso, kaj starigu kutiman alinomi regulon por 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*/

Post rulado de Sass kaj poste RTLCSS, ĉiu elektilo en viaj CSS-dosieroj estos antaŭmetita de .ltr, kaj .rtlpor RTL-dosieroj. Nun vi povas uzi ambaŭ dosierojn sur la sama paĝo, kaj simple uzi .ltraŭ .rtlsur viaj komponantoj envolvaĵoj por uzi unu aŭ la alian direkton.

Randaj kazoj kaj konataj limigoj

Kvankam ĉi tiu aliro estas komprenebla, bonvolu atenti la jenajn:

Kiam vi ŝanĝas .ltrkaj .rtl, certigu, ke vi aldonas dirkaj langatribuojn laŭe.
Ŝargado de ambaŭ dosieroj povas esti vera rendimenta proplemkolo: konsideru iom da optimumigo , kaj eble provu ŝargi unu el tiuj dosieroj nesinkrone .
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