RTL

לערן ווי צו געבן שטיצן פֿאַר רעכט-צו-לינקס טעקסט אין באָאָטסטראַפּ אַריבער אונדזער אויסלייג, קאַמפּאָונאַנץ און יוטילאַטיז.

אויף דעם בלאַט

באַקומען באַקאַנט

מיר רעקאָמענדירן צו באַקומען באַקאַנט מיט Bootstrap ערשטער דורך לייענען אונדזער באַקומען סטאַרטעד הקדמה בלאַט . אַמאָל איר האָבן דורכגעקאָכט עס, פאָרזעצן לייענען דאָ פֿאַר ווי צו געבן RTL.

איר קען אויך וועלן צו לייענען אויף די RTLCSS פּרויעקט , ווייַל עס מאַכט אונדזער צוגאַנג צו RTL.

עקספּערימענטאַל שטריך

די RTL שטריך איז נאָך יקספּערמענאַל און וועט מיסטאָמע יוואַלוו לויט צו באַניצער באַמערקונגען. צי האָט איר עפּעס אָדער האָבן אַ פֿאַרבעסערונג צו פֿאָרשלאָגן? עפֿענען אַן אַרויסגעבן , מיר וואָלט ווי צו באַקומען דיין ינסייץ.

פארלאנגט HTML

עס זענען צוויי שטרענג רעקווירעמענץ פֿאַר ענייבאַלינג RTL אין Bootstrap-Powered בלעטער.

שטעלן dir="rtl"אויף די <html>עלעמענט.
לייג אַ צונעמען langאַטריביוט, ווי lang="ar", אויף דעם <html>עלעמענט.

פֿון דאָרט, איר דאַרפֿן צו אַרייַננעמען אַן RTL ווערסיע פון אונדזער CSS. פֿאַר בייַשפּיל, דאָ איז די סטילעשעעט פֿאַר אונדזער קאַמפּיילד און מיניפיעד CSS מיט RTL ענייבאַלד:

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

סטאַרטער מוסטער

איר קענען זען די אויבן רעקווירעמענץ שפיגלט אין דעם מאַדאַפייד RTL סטאַרטער מוסטער.

<!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 ביישפילן

אָנהייבן מיט איינער פון אונדזער עטלעכע RTL ביישפילן .

צוגאַנג

אונדזער צוגאַנג צו בויען RTL שטיצן אין Bootstrap קומט מיט צוויי וויכטיק דיסיזשאַנז וואָס פּראַל אויף ווי מיר שרייַבן און נוצן אונדזער CSS:

ערשטער, מיר באַשלאָסן צו בויען עס מיט די RTLCSS פּרויעקט. דאָס גיט אונדז עטלעכע שטאַרק פֿעיִקייטן פֿאַר אָנפירונג ענדערונגען און אָוווערריידז ווען מאָווינג פון LTR צו RTL. עס אויך אַלאַוז אונדז צו בויען צוויי ווערסיעס פון באָאָטסטראַפּ פֿון איין קאָדעבאַסע.
צווייטנס, מיר האָבן ריניימד אַ האַנדפול פון דירעקטיאָנאַל קלאסן צו אַדאַפּט אַ לאַדזשיקאַל פּראָפּערטיעס צוגאַנג. רובֿ פון איר האָבן שוין ינטעראַקטיד מיט לאַדזשיקאַל פּראָפּערטיעס דאַנק צו אונדזער פלעקס יוטילאַטיז - זיי פאַרבייַטן ריכטונג פּראָפּערטיעס ווי leftאון rightאין טויווע startאון end. דאָס מאכט די קלאַס נעמען און וואַלועס פּאַסיק פֿאַר LTR און RTL אָן קיין אָוווערכעד.

פֿאַר בייַשפּיל, אַנשטאָט פון .ml-3פֿאַר margin-left, נוצן .ms-3.

ארבעטן מיט RTL, דורך אונדזער מקור סאַסס אָדער קאַמפּיילד CSS, זאָל נישט זיין פיל אַנדערש פון אונדזער פעליקייַט לטר.

קאַסטאַמייז פון מקור

ווען עס קומט צו קוסטאָמיזאַטיאָן , די בילכער וועג איז צו נוצן וועריאַבאַלז, מאַפּס און מיקסינס. דער צוגאַנג אַרבעט די זעלבע פֿאַר RTL, אפילו אויב עס איז נאָך פּראַסעסט פֿון די קאַמפּיילד טעקעס, דאַנק צו ווי RTLCSS אַרבעט .

מנהג RTL וואַלועס

ניצן RTLCSS ווערט דיירעקטיווז , איר קענען מאַכן אַ בייַטעוודיק רעזולטאַט אַ אַנדערש ווערט פֿאַר RTL. פֿאַר בייַשפּיל, צו פאַרמינערן די וואָג פֿאַר $font-weight-boldדי קאָדבאַסע, איר קען נוצן די /*rtl: {value}*/סינטאַקס:

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

וואָס וואָלט רעזולטאַט צו די פאלגענדע פֿאַר אונדזער פעליקייַט CSS און RTL CSS:

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

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

אַלטערנאַטיווע שריפֿט אָנלייגן

אין דעם פאַל איר נוצן אַ מנהג שריפֿט, זיין אַווער אַז ניט אַלע פאַנץ שטיצן די ניט-לאַטייַן אלפאבעט. צו באַשטימען פון פּאַן-אייראפעישער צו אַראַביש משפּחה, איר קען דאַרפֿן צו נוצן /*rtl:insert: {value}*/דיין שריפֿט אָנלייגן צו מאָדיפיצירן די נעמען פון שריפֿט פאַמיליעס.

פֿאַר בייַשפּיל, צו באַשטימען פון Helvetica Neueשריפֿט פֿאַר LTR צו Helvetica Neue Arabicפֿאַר RTL, דיין Sass קאָד קען קוקן ווי דאָס:

$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 און RTL אין דער זעלביקער צייט

דאַרפֿן ביידע LTR און RTL אויף דער זעלביקער בלאַט? דאַנק צו RTLCSS סטרינג מאַפּס , דאָס איז גאַנץ פּשוט. ייַנוויקלען דיין @importס מיט אַ קלאַס, און שטעלן אַ מנהג רענאַמע הערשן פֿאַר 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*/

נאָך פליסנדיק Sass און RTLCSS, יעדער סעלעקטאָר אין דיין CSS טעקעס וועט זיין פּריפּענדעד דורך .ltr, און .rtlפֿאַר RTL טעקעס. איצט איר קענען נוצן ביידע טעקעס אויף דער זעלביקער בלאַט, און פשוט נוצן .ltrאָדער .rtlאויף דיין קאַמפּאָונאַנץ ראַפּערז צו נוצן איין אָדער די אנדערע ריכטונג.

ברעג קאַסעס און באַוווסט לימיטיישאַנז

כאָטש דעם צוגאַנג איז פאַרשטיייק, ביטע באַצאָלן ופמערקזאַמקייַט צו די פאלגענדע:

ווען סוויטשינג .ltrאון .rtl, מאַכן זיכער איר לייגן dirאון langאַטריביוץ אַקאָרדינגלי.
לאָודינג ביידע טעקעס קענען זיין אַ פאַקטיש פאָרשטעלונג באַטאַלנעק: באַטראַכטן עטלעכע אַפּטאַמאַזיישאַן , און אפֿשר פּרובירן צו מאַסע איינער פון די טעקעס ייסינגקראַנאַסלי .
נעסטינג סטיילז דעם וועג וועט פאַרמייַדן אונדזער form-validation-state()מיקסין פון ארבעטן ווי בדעה, אַזוי איר דאַרפן טוויק עס אַ ביסל אַליין. זען #31223 .

די ברעאַדקרומב סעפּאַראַטאָר איז דער בלויז פאַל וואָס ריקווייערז זיין אייגענע שפּאָגל נייַ בייַטעוודיק - ניימלי - $breadcrumb-divider-flippedדיפאָלטינג צו $breadcrumb-divider.

RTL