<bdi>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 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

html
<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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
bdi

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver además