Etiqueta HTML `<bdi>`

La etiqueta <bdi> (aislamiento bidireccional) es uno de los elementos HTML5. Se utiliza para aislar un texto bidireccional cuando se usa un idioma con dirección de derecha a izquierda (como el árabe o el hebreo) junto con idiomas de izquierda a derecha. Ten en cuenta que la etiqueta <bdi> no gira el texto físicamente; simplemente lo aísla para que el algoritmo bidireccional del navegador pueda determinar su dirección de forma independiente.

El texto bidireccional puede contener secuencias de caracteres organizadas de derecha a izquierda (RTL) y secuencias de caracteres organizadas de izquierda a derecha (LTR). Para manejar esto, los navegadores utilizan el Algoritmo Bidireccional de Unicode, en el que a los caracteres se les asigna una determinada direccionalidad. Algunos caracteres (p. ej., algunos signos de puntuación y espacios) se tratan como neutros, y su direccionalidad depende de la de los caracteres cercanos.

En general, el algoritmo bidireccional funcionará correctamente y no será necesario proporcionar un marcado especial. Sin embargo, a veces el algoritmo puede necesitar ayuda. En tales casos, se utiliza <bdi>.

La etiqueta <bdi> envuelve un fragmento de texto y funciona de la siguiente manera:

La direccionalidad del texto incrustado en la etiqueta <bdi> no afecta a la direccionalidad del texto circundante.
La direccionalidad del texto circundante no afecta a la direccionalidad del texto incrustado en la etiqueta <bdi>.

La etiqueta <bdi> es similar a la antigua etiqueta <bdo>. El elemento <bdi> aísla el texto contenido del texto que lo rodea, mientras que <bdo> simplemente invierte la dirección. Por lo general, se recomienda usar <bdi> para evitar problemas de renderizado inesperados que pueden surgir con <bdo> .

Sintaxis

La etiqueta <bdi> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<bdi>) y cierre (</bdi>).

Ejemplo de la etiqueta HTML `<bdi>`:

Etiqueta HTML <bdi>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1> Example of using the bdi element </h1>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de bdi

Atributos

La etiqueta <bdi> admite los Atributos Globales y los Atributos de Eventos.

Cómo dar estilo a una etiqueta HTML <bdi>

css

bdi {
  color: blue;
  font-weight: bold;
}

Práctica

¿Cuál es el propósito de la etiqueta HTML <bdi>?

La etiqueta HTML <bdi> se utiliza para separar una parte del texto que podría tener un formato en una dirección diferente al de su texto circundante.La etiqueta HTML <bdi> se utiliza para crear texto en negrita en HTML.La etiqueta HTML <bdi> se utiliza para representar un salto de línea en el texto HTML.La etiqueta HTML <bdi> se utiliza para mostrar texto específico de una cultura, basado en el Algoritmo Bidireccional de Unicode.

Etiqueta HTML <bdi> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <bdi>: ​

Resultado ​