pinterest linkedin behance copy

RTL

Découvrez comment activer la prise en charge du texte de droite à gauche dans Bootstrap dans notre mise en page, nos composants et nos utilitaires.

Sur cette page

Se familiariser

Nous vous recommandons de vous familiariser d'abord avec Bootstrap en lisant notre page d'introduction pour commencer. Une fois que vous l'avez parcouru, continuez à lire ici pour savoir comment activer RTL.

Vous pouvez également lire sur le projet RTLCSS, car il alimente notre approche du RTL.

Fonctionnalité expérimentale

La fonctionnalité RTL est encore expérimentale et évoluera probablement en fonction des retours des utilisateurs. Vous avez repéré quelque chose ou avez une amélioration à suggérer ? Ouvrez un problème, nous aimerions connaître votre point de vue.

HTML requis

Il existe deux exigences strictes pour activer RTL dans les pages alimentées par Bootstrap.

  1. Définissez dir="rtl" sur l'élément <html>.
  2. Ajoutez un attribut lang approprié, comme lang="ar", sur l'élément <html>.

À partir de là, vous devrez inclure une version RTL de notre CSS. Par exemple, voici la feuille de style de notre CSS compilé et minifié avec RTL activé :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

Modèle de démarrage

Vous pouvez voir les exigences ci-dessus reflétées dans ce modèle de démarrage RTL modifié.

<!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/bootstrap@5.0.2/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Exemples RTL

Commencez avec l'un de nos nombreux RTL exemples.

Approche

Notre approche pour intégrer la prise en charge RTL dans Bootstrap s'accompagne de deux décisions importantes qui ont un impact sur la façon dont nous écrivons et utilisons notre CSS :

  1. Tout d'abord, nous avons décidé de le construire avec le projet RTLCSS. Cela nous donne des fonctionnalités puissantes pour gérer les changements et remplace lors du passage de LTR à RTL. Cela nous permet également de créer deux versions de Bootstrap à partir d'une seule base de code.

  2. Deuxièmement, nous avons renommé une poignée de classes directionnelles pour adopter une approche de propriétés logiques. La plupart d'entre vous ont déjà interagi avec des propriétés logiques grâce à nos utilitaires flexibles : ils remplacent les propriétés de direction telles que left et right en faveur de start et end. Cela rend les noms et les valeurs de classe appropriés pour LTR et RTL sans aucune surcharge.

Par exemple, au lieu de .ml-3 pour margin-left, utilisez .ms-3.

Travailler avec RTL, via notre source Sass ou CSS compilé, ne devrait pas être très différent de notre LTR par défaut.

Personnaliser à partir de la source

En ce qui concerne la personnalisation, la méthode préférée consiste à tirer parti des variables, des cartes et des mixins. Cette approche fonctionne de la même manière pour RTL, même si elle est post-traitée à partir des fichiers compilés, grâce à comment RTLCSS fonctionne.

Valeurs RTL personnalisées

À l'aide des directives de valeur RTLCSS, vous pouvez définir une sortie de variable sur une valeur différente pour RTL. Par exemple, pour diminuer le poids de $font-weight-bold dans toute la base de code, vous pouvez utiliser la syntaxe /*rtl : {value}*/ :

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

Which would output to the following for our default CSS and RTL CSS:

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

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

Pile de police alternative

Si vous utilisez une police personnalisée, sachez que toutes les polices ne prennent pas en charge l'alphabet non latin. Pour passer de la famille paneuropéenne à la famille arabe, vous devrez peut-être utiliser /*rtl:insert : {value}*/ dans votre pile de polices pour modifier les noms des familles de polices.

Par exemple, pour passer de Helvetica Neue Webfont pour LTR à Helvetica Neue Arabic pour RTL, votre code Sass ressemble à ceci :

$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 et RTL en même temps

Vous avez besoin à la fois de LTR et de RTL sur la même page ? Grâce à RTLCSS String Maps, c'est assez simple. Enveloppez vos @import avec une classe et définissez une règle de renommage personnalisée pour 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*/

Après avoir exécuté Sass puis RTLCSS, chaque sélecteur dans vos fichiers CSS sera précédé de .ltr, et de .rtl pour les fichiers RTL. Vous pouvez désormais utiliser les deux fichiers sur la même page et utiliser simplement .ltr ou .rtl sur vos wrappers de composants pour utiliser l'une ou l'autre direction.

Cas limites et limitations connues

Bien que cette approche soit compréhensible, veuillez prêter attention aux points suivants :

  1. Lorsque vous changez .ltr et .rtl, assurez-vous d'ajouter les attributs dir et lang en conséquence.
  2. Le chargement des deux fichiers peut être un véritable goulot d'étranglement pour les performances : envisagez une optimisation, et essayez peut-être de charger l'un de ces fichiers de manière asynchrone.
  3. L'imbrication des styles de cette manière empêchera notre mixin form-validation-state() de fonctionner comme prévu, vous obligeant donc à le modifier un peu par vous-même. Voir #31223.

Le cas du fil d'Ariane

Le séparateur de fil d'Ariane est le seul cas nécessitant sa propre nouvelle variable, à savoir $breadcrumb -divider-flipped — par défaut à $breadcrumb-divider.

Ressources supplémentaires

© 2010-2024 QZYcodes by Quazerty.