<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 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.
Nota:
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 | Ninguna, tanto la etiqueta inicial como la final son obligatorias. |
| 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
| Specification |
|---|
| HTML # the-bdi-element |
Compatibilidad con navegadores
Loading…
Ver además
- Elementos HTML relacionados:
<bdo> - Propiedades HTML relacionadas:
direction,unicode-bidi