RTL

Aprende cómo habilitar el soporte para texto de derecha a izquierda en Bootstrap en nuestro layout, componentes y utilidades.

On this page

Familiarízate

Recomendamos familiarizarte primero con Bootstrap leyendo nuestra página de introducción Getting Started. Una vez que la hayas revisado, continúa leyendo aquí para saber cómo habilitar RTL.

También puede que quieras leer sobre el proyecto RTLCSS, ya que es la base de nuestro enfoque para RTL.

La función RTL de Bootstrap todavía es experimental y evolucionará según los comentarios de los usuarios. ¿Detectaste algo o tienes una mejora que sugerir? Abre un issue, nos encantaría conocer tu opinión.

HTML requerido

Hay dos requisitos estrictos para habilitar RTL en páginas basadas en Bootstrap.

Establece dir="rtl" en el elemento <html>.
Añade un atributo lang apropiado, como lang="ar", en el elemento <html>.

A partir de ahí, necesitarás incluir una versión RTL de nuestro CSS. Por ejemplo, aquí está la hoja de estilos para nuestro CSS compilado y minificado con RTL habilitado:

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

Plantilla de inicio

Puedes ver los requisitos anteriores reflejados en esta plantilla de inicio RTL modificada.

<!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.3.8/dist/css/bootstrap.rtl.min.css" integrity="sha384-CfCrinSRH2IR6a4e6fy2q6ioOX7O6Mtm1L9vRvFZ1trBncWmMePhzvafv7oIcWiW" 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.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ejemplos RTL

Empieza con uno de nuestros varios ejemplos RTL.

Enfoque

Nuestro enfoque para incorporar el soporte RTL en Bootstrap viene con dos decisiones importantes que impactan cómo escribimos y usamos nuestro CSS:

Primero, decidimos construirlo con el proyecto RTLCSS. Esto nos da algunas funcionalidades potentes para gestionar cambios y sobrescrituras al pasar de LTR a RTL. También nos permite construir dos versiones de Bootstrap a partir de una única base de código.
Segundo, hemos renombrado un puñado de clases direccionales para adoptar un enfoque de propiedades lógicas. La mayoría de vosotros ya habéis interactuado con las propiedades lógicas gracias a nuestras utilidades flex—reemplazan propiedades de dirección como left y right en favor de start y end. Esto hace que los nombres de las clases y los valores sean apropiados para LTR y RTL sin ninguna sobrecarga.

Por ejemplo, en lugar de .ml-3 para margin-left, usa .ms-3.

Trabajar con RTL, a través de nuestro Sass fuente o CSS compilado, no debería ser muy diferente de nuestro LTR por defecto.

Personalizar desde el código fuente

Cuando se trata de personalización, la forma preferida es aprovechar las variables, los maps y los mixins. Este enfoque funciona igual para RTL, incluso si se post-procesa a partir de los archivos compilados, gracias a cómo funciona RTLCSS.

Valores RTL personalizados

Usando las directivas de valor de RTLCSS, puedes hacer que una variable genere un valor diferente para RTL. Por ejemplo, para reducir el peso de $font-weight-bold en toda la base de código, puedes usar la sintaxis /*rtl: {value}*/:

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

Lo cual generaría lo siguiente para nuestro CSS por defecto y CSS RTL:

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

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

Pila de fuentes alternativa

En caso de que estés usando una fuente personalizada, ten en cuenta que no todas las fuentes soportan el alfabeto no latino. Para cambiar de la familia paneuropea a la árabe, puede que necesites usar /*rtl:insert: {value}*/ en tu pila de fuentes para modificar los nombres de las familias tipográficas.

Por ejemplo, para cambiar de la fuente Helvetica Neue para LTR a Helvetica Neue Arabic para RTL, tu código Sass podría verse así:

$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 y RTL al mismo tiempo

¿Necesitas tanto LTR como RTL en la misma página? Gracias a RTLCSS String Maps, esto es bastante sencillo. Envuelve tus @import con una clase, y establece una regla de renombrado personalizada para 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*/

Después de ejecutar Sass y luego RTLCSS, cada selector en tus archivos CSS será precedido por .ltr, y por .rtl para los archivos RTL. Ahora puedes usar ambos archivos en la misma página, y simplemente usar .ltr o .rtl en los contenedores de tus componentes para usar una u otra dirección.

Casos límite y limitaciones conocidas a considerar cuando se trabaja con una implementación combinada de LTR y RTL:

Al cambiar entre .ltr y .rtl, asegúrate de añadir los atributos dir y lang en consecuencia.
Cargar ambos archivos puede ser un verdadero cuello de botella de rendimiento: considera alguna optimización, y quizás intenta cargar uno de esos archivos de forma asíncrona.
Anidar los estilos de esta manera impedirá que nuestro mixin form-validation-state() funcione como se espera, por lo que tendrás que ajustarlo un poco por tu cuenta. Ver #31223.

¿Quieres automatizar este proceso y abordar varios casos límite que involucran ambas direcciones dentro de una sola hoja de estilos? Entonces, considera usar PostCSS RTLCSS como un plugin de PostCSS para procesar tus archivos de origen. PostCSS RTLCSS usa RTLCSS detrás de escena para gestionar el proceso de inversión de dirección, pero separa las declaraciones invertidas en reglas con un prefijo diferente para LTR y RTL, lo que te permite tener ambas direcciones dentro del mismo archivo de hoja de estilos. Al hacer esto, puedes cambiar entre las orientaciones LTR y RTL simplemente cambiando el dir de la página (o incluso modificando una clase específica si configuras el plugin en consecuencia).

Cosas importantes a tener en cuenta al usar PostCSS RTLCSS para construir una implementación combinada de LTR y RTL:

Se recomienda que agregues el atributo dir al elemento html. De esta manera, toda la página se verá afectada cuando cambies la dirección. Además, asegúrate de agregar el atributo lang en consecuencia.
Tener un solo bundle con ambas direcciones aumentará el tamaño de la hoja de estilos final (en promedio, un 20%-30%): considera alguna optimización.
Ten en cuenta que PostCSS RTLCSS no es compatible con las directivas /* rtl:remove */ porque no elimina ninguna regla CSS. Debes reemplazar tus directivas /* rtl:remove */, /* rtl:begin:remove */ y /* rtl:end:remove */ con las directivas /* rtl:freeze */, /* rtl:begin:freeze */ y /* rtl:end:freeze */ respectivamente. Estas directivas agregarán un prefijo a las reglas o declaraciones objetivo con la dirección actual pero no crearán una contraparte RTL (el mismo resultado que las remove en RTLCSS).

The breadcrumb separator is the only case requiring its own brand-new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

RTL