Elemento bdi

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento bdi aísla a un trozo de texto del contenido circundante con propósitos de formateo bidireccional de texto. Este elemento resulta muy útil en situaciones en las que el algoritmo bidireccional, responsable de decirdir automáticamente la dirección del texto, puede "confundirse" y cambiar incorrectamente la dirección del texto.

A diferencia de los demás elementos del estándar, el valor del atributo dir no es heredado en bdi. Su valor por defecto es siempre auto.

El elemento bdi ha sido introducido en HTML5 y no es completamente soportado por los navegadores. Aunque su uso es inofensivo, los autores deberian considerar su complementación con CSS con motivos de compatibilidad.

Ejemplos

En este ejemplo, se recrea una conversación de chat, donde los nombres han sido elegidos por los usuarios involucrados. A continuación de cada nombre, se muestran los puntos obtenidos por el usuario entre paréntesis.

Para anticiparse a posibles problemas, los nombres están siendo encerrados con el elemento bdi, lo que evitará que el algoritmo bidireccional altere la dirección del texto circundante, en caso que los nombres usen una dirección diferente (como estos en hebreo).

<ul>
  <li><b><bdi>Aaron</bdi> (2):</b> Hola!</li>
  <li><b><bdi>נקניק</bdi> (5):</b> Hola! Cómo estás?</li>
  <li><b><bdi>Aaron</bdi> (2):</b> Bueno, ha sido una semana larga, pero creo que no puedo quejarme.</li>
  <li><b><bdi>נקניק</bdi> (5):</b> Wow, estamos en la misma luna...</li>
</ul>
  • Aaron (2): Hola!
  • נקניק (5): Hola! Cómo estás?
  • Aaron (2): Bueno, ha sido una semana larga, pero creo que no puedo quejarme.
  • נקניק (5): Wow, estamos en la misma luna...

Para dejar absolutamente en claro cuál es la función de bdi, el siguiente ejemplo muestra una representación del mismo diálogo, pero en este caso el programa que ha generado el código no utilizó al elemento bdi para aislar los nombres.

<ul>
  <li><b>Aaron (2):</b> Hola!</li>
  <li><b>נקניק (5):</b> Hola! Cómo estás?</li>
  <li><b>Aaron (2):</b> Bueno, ha sido una semana larga, pero creo que no puedo quejarme.</li>
  <li><b>נקניק (5):</b> Wow, estamos en la misma luna...</li>
</ul>
  • Aaron (2): Hola!
  • נקניק (5): Hola! Cómo estás?
  • Aaron (2): Bueno, ha sido una semana larga, pero creo que no puedo quejarme.
  • נקניק (5): Wow, estamos en la misma luna...

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.