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.
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.
- Définissez
dir="rtl"
sur l'élément<html>
. - Ajoutez un attribut
lang
approprié, commelang="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 :
-
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.
-
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
etright
en faveur destart
etend
. 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. p>
Cas limites et limitations connues
Bien que cette approche soit compréhensible, veuillez prêter attention aux points suivants :
- Lorsque vous changez
.ltr
et.rtl
, assurez-vous d'ajouter les attributsdir
etlang
en conséquence. - 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 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
.