Formatação de Texto Bidirecional com a Tag BDI em HTML

Introdução

Texto Bidirecional (bidi) é um estilo de formatação onde o texto é escrito tanto da esquerda para a direita quanto da direita para a esquerda. É extremamente útil quando você está escrevendo conteúdo em vários idiomas e também quando o usuário insere dados em idiomas diferentes do idioma padrão da sua página web. Nesses casos, ter a tag <bdi> pode ser de grande benefício e melhorar a experiência do usuário.

Neste laboratório, você aprenderá como usar a tag <bdi> para isolar texto bidirecional em HTML. Ao final deste laboratório, você será capaz de criar conteúdo web que seja amigável ao usuário e promova o multilinguismo.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Configurar a estrutura do arquivo HTML

Vamos configurar a estrutura básica do arquivo para o nosso arquivo HTML. Abra o seu editor de texto preferido, crie um novo arquivo e salve-o como index.html.

<!doctype html>
<html>
  <head>
    <title>Texto Bidirecional Usando HTML</title>
  </head>
  <body></body>
</html>

Criar um Formulário para Entrada do Usuário

Em seguida, criaremos um formulário para coletar feedback do usuário, que pode ser escrito em qualquer idioma. Este formulário será adicionado à tag body que você criou no passo anterior. Para fazer isso, adicione o seguinte código ao seu arquivo index.html:

<body>
  <h1>Formulário de Feedback do Usuário</h1>

  <form>
    <label for="user-feedback">Insira seu feedback aqui:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Enviar Feedback</button>
  </form>
</body>

O código acima cria um formulário simples contendo um rótulo para o feedback, uma área de entrada para o feedback e um botão de envio.

Adicionar a Tag para Texto Bidirecional

Para garantir que qualquer idioma bidirecional que os usuários inserirem no feedback seja exibido corretamente na página da web, precisamos envolvê-lo com a tag <bdi>. O bloco de código abaixo demonstra como usar a tag <bdi>.

<body>
  <h1>Formulário de Feedback do Usuário</h1>

  <form>
    <label for="user-feedback">Insira seu feedback aqui:</label>
    <br />
    <textarea name="user-feedback" id="user-feedback" rows="5"></textarea>
    <br />
    <button type="submit">Enviar Feedback</button>

    <div>
      <p>Feedback do Usuário:</p>

      <!-- Adicionando a Tag <bdi> -->

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

// Script para exibir o feedback do usuário
<script>
  const feedbackDisplay = document.getElementById("feedback-display");
  const feedbackInput = document.getElementById("user-feedback");

  // Manipular o Envio do Formulário
  document.querySelector("form").addEventListener("submit", (event) => {
    event.preventDefault();
    feedbackDisplay.innerHTML = feedbackInput.value;
  });
</script>

O código acima contém um bloco de código que exibe o feedback do usuário envolvido pela tag <bdi> fornecido acima como saída.

Fique tranquilo, seu texto bidirecional agora está corretamente isolado pela tag <bdi>. Então, vamos testar seu formulário. Abra o arquivo index.html em qualquer navegador da web e insira algum feedback. Este feedback pode conter letras, pontuações e palavras de muitos idiomas. Ao enviar o formulário, você observará que o feedback é exibido na área de saída.

Melhorar a Acessibilidade com ARIA

Para melhorar a acessibilidade da sua página web, você pode adicionar atributos ARIA. ARIA significa Accessible Rich Internet Applications (Aplicações Ricas de Internet Acessíveis). Os atributos ARIA suportam a acessibilidade para usuários com uma ampla gama de deficiências, como cegueira, surdez e mobilidade limitada.

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

Usando o atributo aria-label, podemos anexar um rótulo de texto a qualquer elemento HTML para torná-lo mais acessível. No bloco de código acima, anexamos um aria-label à tag <label>.

Resumo

Neste laboratório, você aprendeu como usar a tag <bdi> para isolar texto bidirecional em HTML. A seguir estão os principais pontos deste laboratório:

Texto Bidirecional (bidi) ajuda na formatação de texto escrito em vários idiomas.
A tag <bdi> é usada em um trecho de texto que deve ser isolado de seus arredores para formatação de texto bidirecional.
A tag <bdi> é útil para uma variedade de idiomas, incluindo árabe e hebraico.
Para exibir corretamente o texto bidirecional, primeiro, envolva-o com a tag <bdi> e, em seguida, use CSS para estilizá-lo.
Atributos ARIA podem ser adicionados para melhorar a acessibilidade das páginas web.

Formatação de Texto Bidirecional com BDI