Formato de texto bidireccional con BDI

Introducción

El texto bidireccional (bidi) es un estilo de formato en el que el texto se escribe tanto de izquierda a derecha como de derecha a izquierda. Es muy útil cuando se escribe contenido en varios idiomas y también cuando el usuario ingresa información en idiomas diferentes del idioma predeterminado de su página web. En tales casos, tener la etiqueta <bdi> puede beneficiarle enormemente y mejorar la experiencia del usuario.

En este laboratorio aprenderá a usar la etiqueta <bdi> para aislar el texto bidireccional en HTML. Al final de este laboratorio, será capaz de crear contenido web que sea amigable para el usuario y promueva el multilingüismo.

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.

Configura la estructura del archivo HTML

Vamos a establecer la estructura básica de archivos para nuestro archivo HTML. Abra su editor de texto preferido, cree un nuevo archivo y guárdelo como index.html.

<!doctype html>
<html>
  <head>
    <title>Bi-Directional Text Using HTML</title>
  </head>
  <body></body>
</html>

Crea un formulario para la entrada de usuario

A continuación, crearemos un formulario para recopilar retroalimentación del usuario, que puede escribirse en cualquier idioma. Este formulario se agregará a la etiqueta body que creó en el paso anterior. Para lograr esto, agregue el siguiente código a su archivo index.html:

<body>
  <h1>Formulario de retroalimentación del usuario</h1>

  <form>
    <label for="user-feedback">Ingrese su retroalimentación aquí:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Enviar retroalimentación</button>
  </form>
</body>

El código anterior crea un formulario simple que contiene una etiqueta para la retroalimentación, un área de entrada para la retroalimentación y un botón de envío.

Agrega la etiqueta al texto bidireccional

Para garantizar que cualquier idioma bidireccional que los usuarios ingresen en la retroalimentación se muestre correctamente en la página web, debemos envolverlo con la etiqueta <bdi>. El siguiente bloque de código demuestra cómo usar la etiqueta <bdi>.

<body>
  <h1>Formulario de retroalimentación del usuario</h1>

  <form>
    <label for="user-feedback">Ingrese su retroalimentación aquí:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Enviar retroalimentación</button>

    <div>
      <p>Retroalimentación del usuario:</p>

      <!-- Agregando la etiqueta <bdi> -->

      <p><bdi id="feedback-display"></bdi></p>
    </div>
  </form>
</body>

// Script para mostrar la retroalimentación del usuario
<script>
  const feedbackDisplay = document.getElementById("feedback-display");
  const feedbackInput = document.getElementById("user-feedback");

  // Manejar el envío del formulario
  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();
    feedbackDisplay.innerHTML = feedbackInput.value;
  });
</script>

El código anterior contiene un bloque de código que muestra la retroalimentación del usuario envuelta en <bdi> como salida.

Tenga la seguridad de que su texto bidireccional ahora está correctamente aislado por la etiqueta <bdi>! Entonces, probemos su formulario. Abra el archivo index.html en cualquier navegador web y ingrese alguna retroalimentación. Esta retroalimentación puede contener letras, signos de puntuación y palabras de muchos idiomas. Al enviar el formulario, observará que la retroalimentación se muestra en el área de salida.

Mejora la accesibilidad con ARIA

Para mejorar la accesibilidad de su página web, puede agregar atributos ARIA. ARIA significa Aplicaciones Internet Ricas y Accesibles. Los atributos ARIA apoyan la accesibilidad para usuarios con una amplia variedad de discapacidades, como la ceguera, la sordera y la movilidad limitada.

<label for="user-feedback" aria-label="Enter your feedback"></label>

Al usar el atributo aria-label, podemos adjuntar una etiqueta de texto a cualquier elemento HTML para hacerlo más accesible. En el bloque de código anterior, hemos adjuntado una aria-label a la etiqueta <label>.

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta <bdi> para aislar el texto bidireccional en HTML. A continuación se presentan los principales aprendizajes de este laboratorio:

El Texto Bidireccional (bidi) ayuda a formatear texto escrito en varios idiomas.
La etiqueta <bdi> se utiliza en un fragmento de texto que debe aislarse de su entorno para el formato de texto bidireccional.
La etiqueta <bdi> es útil para una variedad de idiomas, incluyendo el árabe y el hebreo.
Para mostrar correctamente el texto bidireccional, primero, enciérrelo con la etiqueta <bdi>, luego use CSS para darle estilo.
Se pueden agregar atributos ARIA para mejorar la accesibilidad de las páginas web.