Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
<bdi>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since enero de 2020.
Resumen
El elementoHTML<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.
Nota:Aunque el mismo efecto visual se puede conseguir usando la regla CSSunicode-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 | Ninguna, tanto la etiqueta inicial como la final son obligatorias. |
| Elementos padre permitidos | Any element that acceptsphrasing content. |
| Interfaz DOM | HTMLElement |
Atributos
Como los demás elementos HTML , este elemento tiene losglobal attributes, pero con una pequeña diferencia semántica: el atributodir no se hereda. Si no está definidio, su valor por defecto esauto 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
| Specification |
|---|
| HTML # the-bdi-element |
Compatibilidad con navegadores
Ver además
- Elementos HTML relacionados:
<bdo> - Propiedades HTML relacionadas:
direction,unicode-bidi