RTL

Yiga engeri y’okusobozesaamu obuwagizi bw’ebiwandiiko okuva ku ddyo okutuuka ku kkono mu Bootstrap mu nteekateeka yaffe yonna, ebitundu, n’ebikozesebwa.

Ku muko guno

Funa okumanya ebisingawo

Tukuwa amagezi okusooka okumanyiira Bootstrap ng'osoma okuyita mu lupapula lwaffe olw'Enyanjula y'Okutandika . Bw'omala okugiyitamu, genda mu maaso n'okusoma wano engeri y'okusobozesaamu RTL.

You may also want to read up on the RTLCSS project , nga bwe kiwa amaanyi enkola yaffe ku RTL.

Ekintu eky’okugezesa

Ekintu kya RTL kikyali kya kugezesa era osanga kijja kweyongera okusinziira ku bye bagamba abakozesa. Olina ky’olaba oba olina okulongoosa kw’oyinza okuteesa? Open an issue , twandiyagadde nnyo okufuna amagezi go.

HTML eyeetaagisa

Waliwo ebisaanyizo bibiri ebikakali eby'okusobozesa RTL mu mpapula ezikozesebwa Bootstrap.

Teeka dir="rtl"ku <html>elementi.
Okwongerako ekintu ekituufu lang, nga lang="ar", ku <html>elementi.

Okuva awo, ojja kwetaaga okussaamu enkyusa ya RTL eya CSS yaffe. Okugeza, wuuno sitayiro ya CSS yaffe ekunganyiziddwa era ekendeezeddwa nga RTL ekoleddwa:

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

Ekifaananyi ky’okutandika

Osobola okulaba ebyetaago ebyo waggulu nga byeyolekera mu kifaananyi kino eky'okutandika RTL ekyusiddwa.

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

Ebyokulabirako bya RTL

Tandika n'ekimu ku byokulabirako byaffe ebiwerako ebya RTL .

Okutuukirira

Enkola yaffe ey’okuzimba obuwagizi bwa RTL mu Bootstrap ejja n’okusalawo kubiri okukulu okukwata ku ngeri gye tuwandiika n’okukozesaamu CSS yaffe:

Okusooka, twasalawo okugizimba ne pulojekiti ya RTLCSS . Kino kituwa ebimu ku bikozesebwa eby’amaanyi eby’okuddukanya enkyukakyuka n’okusazaamu nga tuva ku LTR okudda ku RTL. Era kitusobozesa okuzimba enkyusa bbiri eza Bootstrap okuva mu codebase emu.
Ekirala, tukyusizza amannya ga kiraasi eziraga obulagirizi ntono okwettanira enkola ey’ebintu ebitegeerekeka. Abasinga ku mmwe mwakwatagana dda n’ebintu ebitegeerekeka olw’ebikozesebwa byaffe ebya flex—bikyusa eby’obugagga eby’obulagirizi nga leftera nga rightbiwagira startne end. Ekyo kifuula amannya ga kiraasi n’emiwendo okutuukira ddala ku LTR ne RTL awatali kusaasaanya kwonna.

Okugeza, mu kifo kya .ml-3for margin-left, kozesa .ms-3.

Okukola ne RTL, okuyita mu nsibuko yaffe Sass oba CSS ekunganyiziddwa, tekisaanye kuba kya njawulo nnyo ku LTR yaffe eya bulijjo wadde.

Customize okuva ku nsibuko

When it comes to customization , engeri esinga okwettanirwa kwe kweyambisa enkyukakyuka, maapu, ne mixins. Enkola eno ekola kye kimu ku RTL, ne bwe kiba nga ekoleddwa oluvannyuma okuva mu fayiro ezikung’aanyiziddwa, olw’engeri RTLCSS gy’ekola .

Emiwendo gya RTL egy'ennono

Nga okozesa RTLCSS value directives , osobola okufuula ekifulumizibwa ekikyukakyuka omuwendo ogw’enjawulo ku RTL. Okugeza, okukendeeza ku buzito bwa $font-weight-boldmu codebase yonna, oyinza okukozesa /*rtl: {value}*/ensengeka:

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

Ekyandifulumizza ku bino wammanga ku CSS yaffe eya bulijjo ne RTL CSS:

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

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

Omutambi gw’empandiika endala

Mu mbeera gy’okozesa efonti eya custom, kimanye nti si fonti zonna nti ziwagira ennukuta ezitali za Lulatini. Okukyusa okuva mu Pan-European okudda mu Arabic family, oyinza okwetaaga okukozesa /*rtl:insert: {value}*/mu font stack yo okukyusa amannya ga font family.

Okugeza, okukyusa okuva Helvetica Neue Webfontku for LTR okudda ku Helvetica Neue Arabicfor RTL, Sass code yo eringa eno:

$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 ne RTL mu kiseera kye kimu

Oyagala byombi LTR ne RTL ku muko gwe gumu? Thanks to RTLCSS String Maps , kino kirungi nnyo nga kyangu. Zinga @imports yo ne kiraasi, era oteekewo etteeka ly'okukyusa amannya erya custom eri 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*/

Oluvannyuma lw'okuddukanya Sass olwo RTLCSS, buli musunsula mu fayiro zo eza CSS kijja kuba nga kikulembeddwamu .ltr, era .rtlku fayiro za RTL. Kati osobola okukozesa fayiro zombi ku lupapula lwe lumu, era omala kukozesa .ltroba .rtlku bitundu byo ebizingirizi okukozesa oludda olumu oba olulala.

Edge cases n’obuzibu obumanyiddwa

Wadde ng’enkola eno etegeerekeka, nsaba ofeeyo ku bino wammanga:

Bw’oba okyusa .ltrne .rtl, kakasa nti ossaako dirn’ebiraga langokusinziira ku ekyo.
Okutikka fayiro zombi kiyinza okuba ekizibu ky'omutindo ogwa nnamaddala: lowooza ku kulongoosa okumu , era mpozzi gezaako okutikka emu ku fayiro ezo mu ngeri etakwatagana .
Emisono gy’okusimba ebisu mu ngeri eno ejja kulemesa form-validation-state()mixin yaffe okukola nga bwe yali egendereddwa, bwe kityo kyetaagisa okugikyusaamu katono wekka. Laba #31223 .

Okwawula ebikuta by’omugaati y’ensonga yokka eyeetaaga enkyukakyuka yaayo empya ddala— kwe kugamba $breadcrumb-divider-flipped—okusooka okutuuka ku $breadcrumb-divider.

RTL