
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 auto
navegador 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>
.
- Introducción al Lenguaje de Programación HTML
- Elemento HTML
- Elemento base en HTML
- Elemento head en HTML
- Elemento link en HTML
- Elemento meta en HTML
- Elemento style en HTML
- Elemento title en HTML
- Elemento body en HTML
- Elemento address en HTML
- Elemento article en HTML
- Elemento aside en HTML
- Elemento footer en HTML
- Elementos h1 al h6 en HTML
- Elemento header en HTML
- Elemento section en HTML
- Elemento blockquote en HTML
- Elemento nav en HTML
- Elemento dd en HTML
- Elemento div en HTML
- Elemento dl en HTML
- Elemento dt en HTML
- Elemento figcaption en HTML
- Elemento figure en HTML
- Elemento hr en HTML
- Elemento li en HTML
- Elemento main en HTML
- Resumen General de Listas en HTML
- Elemento ol en HTML
- Elemento p en HTML
- Descripción de las Etiquetas HTML
- Qué son los Atributos HTML
- Elemento ul en HTML
- Elemento a en HTML
- Elemento pre en HTML
- El Texto en HTML
- Elemento abbr en HTML
- Elemento b en HTML
- Elemento bdi en HTML
- Elemento bdo en HTML
- Elemento br en HTML
- Elemento cite en HTML