Resumen

El elemento HTML <bdi> (o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.

Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.

Aunque el mismo efecto visual se puede conseguir usando la regla  CSS  unicode-bidi: isolate en un elemento  <span> u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento <bdi>. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.

Content categories Flow content, phrasing content, contenido palpable.
Contenido permitido Phrasing content.
Omisión de etiqueta None, both the starting and ending tag are mandatory.
Elementos padre permitidos Any element that accepts phrasing content.
Interfaz DOM HTMLElement

Atributos

Como los demás elementos HTML , este elemento tiene los global attributes, pero con una pequeña diferencia semántica: el atributo dir no se hereda. Si no está definidio, su valor por defecto es auto y permitirá a los navegadores decidir la dirección basándose en el contexto del elemento.

Ejemplo

<p dir="ltr">Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi> se muestra automáticamente de derecha a izquierda.</p>

Resultado

Esta palabra arábica REDLOHECALP_CIBARA se muestra automáticamente de derecha a izquierda.

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de '<bdi>' en esta especificación.
Living Standard  
HTML5
La definición de '<bdi>' en esta especificación.
Recommendation  

Compatibilidad con los distintos navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 16 10.0 (10.0) Sin soporte Sin soporte Sin soporte
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte Básico Sin soporte 10.0 (10.0) Sin soporte Sin soporte Sin soporte

Ver además

Etiquetas y colaboradores del documento

Colaboradores en esta página: pekechis, teoli
Última actualización por: pekechis,