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 Introduction à la mise en route . Une fois que vous l'avez parcouru, continuez à lire ici pour savoir comment activer RTL.

Vous voudrez peut-être également en savoir plus 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 serions ravis d'avoir votre avis.

HTML requis

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

Fixé dir="rtl"sur l' <html>élément.
Ajoutez un langattribut approprié, comme lang="ar", sur l' <html>élément.

À 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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 exemples RTL .

Approcher

Notre approche pour intégrer le support 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 :

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 modifications et les remplacements lors du passage de LTR à RTL. Cela nous permet également de créer deux versions de Bootstrap à partir d'une seule base de code.
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 flex — ils remplacent les propriétés de direction comme leftet righten faveur de startet 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-3pour 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 au fonctionnement de RTLCSS .

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-boldtout au long de la base de code, vous pouvez utiliser la /*rtl: {value}*/syntaxe :

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

Ce qui donnerait la sortie suivante pour nos CSS et RTL CSS par défaut :

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

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

Pile de polices 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 Webfontpour LTR à Helvetica Neue Arabicpour 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

Besoin à la fois de LTR et de RTL sur la même page ? Grâce à RTLCSS String Maps , c'est assez simple. Enveloppez votre @imports 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 .rtlpour les fichiers RTL. Vous pouvez maintenant utiliser les deux fichiers sur la même page, et simplement utiliser .ltrou .rtlsur vos wrappers de composants pour utiliser l'un ou l'autre sens.

Cas marginaux et limites connues

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

Lorsque vous changez .ltret .rtl, assurez-vous d'ajouter les attributs diret en conséquence.lang
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 .
L'imbrication des styles de cette manière empêchera notre form-validation-state()mixin de fonctionner comme prévu, vous obligeant donc à le modifier un peu par vous-même. Voir #31223 .

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.

RTL