RTL

Scopri come abilitare il supporto per il testo da destra a sinistra in Bootstrap in tutti i nostri layout, componenti e utilità.

Su questa pagina

Familiarizzare

Ti consigliamo di familiarizzare con Bootstrap prima leggendo la nostra pagina Introduzione introduttiva . Una volta eseguito, continua a leggere qui per come abilitare RTL.

Potresti anche voler leggere il progetto RTLCSS , poiché alimenta il nostro approccio a RTL.

Caratteristica sperimentale

La funzione RTL è ancora sperimentale e probabilmente si evolverà in base al feedback degli utenti. Hai notato qualcosa o hai un miglioramento da suggerire? Apri un problema , ci piacerebbe ricevere le tue informazioni.

HTML richiesto

Esistono due requisiti rigorosi per abilitare RTL nelle pagine basate su Bootstrap.

Posizionato dir="rtl"sull'elemento <html>.
Aggiungi un langattributo appropriato, come lang="ar", <html>sull'elemento.

Da lì, dovrai includere una versione RTL del nostro CSS. Ad esempio, ecco il foglio di stile per il nostro CSS compilato e minimizzato con RTL abilitato:

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

Modello iniziale

Puoi vedere i requisiti sopra riportati in questo modello di base RTL modificato.

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

Esempi RTL

Inizia con uno dei nostri numerosi esempi RTL .

Approccio

Il nostro approccio alla creazione del supporto RTL in Bootstrap arriva con due importanti decisioni che influiscono sul modo in cui scriviamo e utilizziamo il nostro CSS:

Innanzitutto, abbiamo deciso di costruirlo con il progetto RTLCSS . Questo ci offre alcune potenti funzionalità per la gestione di modifiche e sostituzioni quando si passa da LTR a RTL. Ci consente inoltre di creare due versioni di Bootstrap da una base di codice.
In secondo luogo, abbiamo rinominato una manciata di classi direzionali per adottare un approccio alle proprietà logiche. La maggior parte di voi ha già interagito con le proprietà logiche grazie alle nostre utilità flessibili: sostituiscono le proprietà di direzione come lefte righta favore starte end. Ciò rende i nomi e i valori delle classi appropriati per LTR e RTL senza alcun sovraccarico.

Ad esempio, invece di .ml-3for margin-left, usa .ms-3.

Tuttavia, lavorare con RTL, tramite il nostro Sass sorgente o CSS compilato, non dovrebbe essere molto diverso dal nostro LTR predefinito.

Personalizza dalla fonte

Quando si tratta di personalizzazione , il modo preferito è sfruttare variabili, mappe e mixin. Questo approccio funziona allo stesso modo per RTL, anche se è post-elaborato dai file compilati, grazie a come funziona RTLCSS .

Valori RTL personalizzati

Usando le direttive del valore RTLCSS , puoi fare in modo che un output di una variabile abbia un valore diverso per RTL. Ad esempio, per diminuire il peso per $font-weight-boldtutta la codebase, puoi usare la /*rtl: {value}*/sintassi:

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

Che risulterebbe come segue per i nostri CSS predefiniti e RTL CSS:

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

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

Pila di caratteri alternativo

Nel caso in cui utilizzi un carattere personalizzato, tieni presente che non tutti i caratteri supportano l'alfabeto non latino. Per passare dalla famiglia paneuropea a quella araba, potrebbe essere necessario utilizzare /*rtl:insert: {value}*/nello stack di caratteri per modificare i nomi delle famiglie di caratteri.

Ad esempio, per passare da Helvetica Neue WebfontLTR a Helvetica Neue ArabicRTL, il tuo codice Sass è simile al seguente:

$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 e RTL contemporaneamente

Hai bisogno sia di LTR che di RTL sulla stessa pagina? Grazie a RTLCSS String Maps , questo è abbastanza semplice. Avvolgi @importi tuoi messaggi di posta elettronica con una classe e imposta una regola di ridenominazione personalizzata per 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*/

Dopo aver eseguito Sass quindi RTLCSS, ogni selettore nei file CSS sarà anteposto da .ltre .rtlper i file RTL. Ora puoi utilizzare entrambi i file sulla stessa pagina e utilizzare semplicemente .ltro .rtlsui wrapper dei componenti per utilizzare l'una o l'altra direzione.

Casi limite e limitazioni note

Sebbene questo approccio sia comprensibile, prestare attenzione a quanto segue:

Quando si passa a .ltre .rtl, assicurarsi di aggiungere dire gli langattributi di conseguenza.
Il caricamento di entrambi i file può essere un vero collo di bottiglia per le prestazioni: prendi in considerazione alcune ottimizzazioni e magari prova a caricare uno di quei file in modo asincrono .
Gli stili di nidificazione in questo modo impediranno al nostro form-validation-state()mixin di funzionare come previsto, quindi è necessario modificarlo un po' da soli. Vedi #31223 .

Il separatore breadcrumb è l'unico caso che richiede la propria nuova variabile, vale a dire $breadcrumb-divider-flipped, il valore predefinito di $breadcrumb-divider.

RTL