Texto Bidireccional con HTML BDO

Introducción

La etiqueta HTML <bdo> se utiliza para cambiar la dirección del texto, especialmente en situaciones donde se mezclan diferentes idiomas. La etiqueta es útil en casos donde es necesario mostrar idiomas que se leen de derecha a izquierda, como el árabe o el hebreo, junto con idiomas que se leen de izquierda a derecha, como el inglés. En este laboratorio, aprenderá a crear texto bidireccional utilizando la etiqueta HTML <bdo>.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70712{{"Texto Bidireccional con HTML BDO"}} html/head_elems -.-> lab-70712{{"Texto Bidireccional con HTML BDO"}} html/lang_decl -.-> lab-70712{{"Texto Bidireccional con HTML BDO"}} html/text_dir -.-> lab-70712{{"Texto Bidireccional con HTML BDO"}} html/inter_elems -.-> lab-70712{{"Texto Bidireccional con HTML BDO"}} end

Etiqueta HTML

Crea un nuevo archivo y nombralo "index.html".

Agrega el siguiente código a tu archivo index.html para abrir la etiqueta HTML:

<!doctype html>
<html>
  <head>
    <title>Texto Bidireccional usando la etiqueta bdo</title>
  </head>
  <body></body>
</html>

Agregando la etiqueta bdo

Entre las etiquetas body, agrega el siguiente código para crear un texto bidireccional utilizando la etiqueta <bdo>:

<h3>Texto Bidireccional usando la etiqueta bdo:</h3>
<bdo dir="rtl">مرحبا بالعالم</bdo><br />
<bdo dir="ltr">Hello world</bdo>

Aquí, hemos creado un ejemplo simple de texto bidireccional. El atributo dir se agrega para especificar la dirección del texto en la etiqueta bdo. El valor rtl le dice al navegador que lea el texto de derecha a izquierda, mientras que el valor ltr le dice al navegador que lea el texto de izquierda a derecha.

Guarda tu archivo index.html y dile a un navegador web que lo abra. Ahora deberías ver el texto bidireccional mostrado en la página.

Resumen

La etiqueta <bdo> se utiliza para crear texto bidireccional en una página web. Ayuda a mostrar idiomas que se leen de derecha a izquierda, junto con idiomas que se leen de izquierda a derecha. El atributo dir se utiliza para especificar la dirección del texto en la etiqueta bdo y puede tener dos valores: ltr o rtl. Utiliza la etiqueta con cuidado ya que puede cambiar el significado del texto.