Elemento bdi en HTML

El elemento html bdi es la abreviatura de aislamiento bidireccional, aísla una parte del texto que puede formatearse en una dirección de texto. Es decir, una dirección de texto de derecha a izquierda o de izquierda a derecha del texto alrededor eso.

Este elemento es útil cuando se incrusta texto cuya dirección no se conoce, como incrustar texto de una base de datos, en texto que tiene una dirección de texto específica.

El siguiente ejemplo usa el elemento <bdi> para mostrar una oración de derecha a izquierda correctamente:

< p  dir = "ltr" > Esta palabra < bdi > En una oración con elemento bdi la cual muestra la dirección del texto independientemente de su entorno </ bdi > 
se muestra automáticamente de derecha a izquierda. </ p >

Si no usa el elemento <bdi> y usamos en su lugar <span> será la oración de izquierda a derecha:

< p  dir = "ltr" > Esta palabra < span > La oración en un elemento bdi que muestra la dirección del texto independientemente de lo que esté a su alrededor </ span > 
se muestra automáticamente de derecha a izquierda. </ p >

Etiqueta html bdi

Clasificaciones de contenido	Elemento organizativo o elemento normal.
Contenido permitido	Contenido ordinario.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normal.
Interfaz DOMO	`HTMLElement`

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	No soportado	Soportado	Soportado

La mayoría de los navegadores modernos que admiten HTML5 admiten este elemento.

Características

En este elemento se pueden utilizar propiedades globales. Pero con una pequeña diferencia organizativa de que el valor de la propiedad no se hereda dir, si esta propiedad no se establece, tendrá su valor predeterminado y el autonavegador decidirá cuál es la dirección del texto en función del contenido del elemento.

Descripción de uso

Es cierto que es posible obtener el mismo efecto visual usando una propiedad unicode-bidi:isolate en CSS sobre un elemento <span> o cualquier otro elemento que acepte texto, pero este elemento tiene un significado organizacional, y es útil si el usuario deshabilita el uso de CSS estilos, en cuyo caso el texto se mostrará correctamente utilizando la extensión <bdi>.