RTL

Jifunze jinsi ya kuwezesha usaidizi wa maandishi kutoka kulia kwenda kushoto katika Bootstrap katika mpangilio wetu, vijenzi na huduma.

Katika ukurasa huu

Fahamu

Tunapendekeza kufahamiana na Bootstrap kwanza kwa kusoma kupitia ukurasa wetu wa Kuanza Utangulizi . Ukishaipitia, endelea kusoma hapa ili upate jinsi ya kuwezesha RTL.

Unaweza pia kutaka kusoma juu ya mradi wa RTLCSS , kwa kuwa unawezesha mbinu yetu ya RTL.

Kipengele cha majaribio

Kipengele cha RTL bado ni cha majaribio na huenda kitabadilika kulingana na maoni ya mtumiaji. Umeona kitu au una uboreshaji wa kupendekeza? Fungua suala , tungependa kupata maarifa yako.

HTML inayohitajika

Kuna mahitaji mawili madhubuti ya kuwezesha RTL katika kurasa zinazoendeshwa na Bootstrap.

Weka dir="rtl"kwenye <html>kipengele.
Ongeza sifa inayofaa lang, kama lang="ar", kwenye <html>kipengele.

Kuanzia hapo, utahitaji kujumuisha toleo la RTL la CSS yetu. Kwa mfano, hili ni laha ya mtindo kwa ajili ya CSS yetu iliyokusanywa na kupunguzwa na RTL imewezeshwa:

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

template Starter

Unaweza kuona mahitaji yaliyo hapo juu yakionyeshwa katika kiolezo hiki cha kianzilishi cha RTL kilichorekebishwa.

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

Mifano ya RTL

Anza na mojawapo ya mifano yetu kadhaa ya RTL .

Mbinu

Mbinu yetu ya kujenga usaidizi wa RTL katika Bootstrap inakuja na maamuzi mawili muhimu ambayo huathiri jinsi tunavyoandika na kutumia CSS yetu:

Kwanza, tuliamua kuijenga kwa mradi wa RTLCSS . Hii inatupa baadhi ya vipengele muhimu vya kudhibiti mabadiliko na kubatilisha wakati wa kuhama kutoka LTR hadi RTL. Pia huturuhusu kuunda matoleo mawili ya Bootstrap kutoka codebase moja.
Pili, tumebadilisha majina machache ya madarasa ya mwelekeo ili kupitisha mbinu ya mantiki ya mali. Wengi wenu tayari mmeingiliana na sifa za kimantiki kutokana na huduma zetu zinazobadilika-badilika—zinabadilisha sifa za mwelekeo kama vile leftna rightkupendelea startna end. Hiyo hufanya majina na maadili ya darasa kuwa sawa kwa LTR na RTL bila malipo yoyote.

Kwa mfano, badala ya .ml-3kwa margin-left, tumia .ms-3.

Kufanya kazi na RTL, kupitia chanzo chetu cha Sass au CSS iliyokusanywa, haipaswi kuwa tofauti sana na LTR yetu chaguo-msingi.

Geuza kukufaa kutoka chanzo

Linapokuja suala la kubinafsisha , njia inayopendelewa ni kuchukua fursa ya vigeu, ramani, na mchanganyiko. Njia hii inafanya kazi vivyo hivyo kwa RTL, hata ikiwa imechakatwa kutoka kwa faili zilizokusanywa, shukrani kwa jinsi RTLCSS inavyofanya kazi .

Thamani maalum za RTL

Kwa kutumia RTLCSS thamani maelekezo , unaweza kufanya pato variable thamani tofauti kwa RTL. Kwa mfano, ili kupunguza uzito kwa $font-weight-boldmsingi wote wa codebase, unaweza kutumia /*rtl: {value}*/syntax:

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

Ambayo inaweza kutoa zifuatazo kwa CSS yetu ya msingi na RTL CSS:

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

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

Mlundikano wa fonti mbadala

Ikiwa unatumia fonti maalum, fahamu kuwa si fonti zote zinazotumia alfabeti isiyo ya Kilatini. Ili kubadilisha kutoka kwa familia ya Pan-European hadi Kiarabu, huenda ukahitajika kutumia /*rtl:insert: {value}*/katika mrundikano wa fonti yako ili kurekebisha majina ya familia za fonti.

Kwa mfano, kubadili kutoka Helvetica Neuefonti kwa LTR hadi Helvetica Neue Arabickwa RTL, msimbo wako wa Sass unaweza kuonekana kama hii:

$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 na RTL kwa wakati mmoja

Je, unahitaji LTR na RTL kwenye ukurasa mmoja? Shukrani kwa RTLCSS String Maps , hii ni moja kwa moja. Funga @imports yako na darasa, na uweke sheria ya kubadilisha jina maalum kwa 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*/

Baada ya kuendesha Sass kisha RTLCSS, kila kiteuzi katika faili zako za CSS kitatanguliwa na .ltr, na .rtlkwa faili za RTL. Sasa unaweza kutumia faili zote mbili kwenye ukurasa mmoja, na tumia tu .ltrau .rtlkwenye vifuniko vya vifaa vyako kutumia mwelekeo mmoja au mwingine.

Kesi za makali na vikwazo vinavyojulikana

Ingawa mbinu hii inaeleweka, tafadhali zingatia yafuatayo:

Unapobadilisha .ltrna .rtl, hakikisha umeongeza dirna langkuangazia ipasavyo.
Kupakia faili zote mbili kunaweza kuwa kizuizi halisi cha utendakazi: fikiria uboreshaji fulani , na labda ujaribu kupakia mojawapo ya faili hizo asynchronously .
Mitindo ya kuweka viota kwa njia hii itazuia form-validation-state()mixin yetu kufanya kazi inavyokusudiwa, kwa hivyo inahitaji uibadilishe kidogo peke yako. Tazama #31223 .

Kitenganishi cha breadcrumb ndicho kisa pekee kinachohitaji kigezo chake kipya $breadcrumb-divider-flippedkabisa— yaani—chaguo-msingi hadi $breadcrumb-divider.

RTL