Textos com direção e idioma: bdo, bdi e lang

A internet é global, e o HTML precisa ser capaz de lidar com textos em diversos idiomas e direções de escrita. Enquanto a maioria dos idiomas ocidentais (como português, inglês, espanhol) são escritos da esquerda para a direita (LTR - Left-to-Right), idiomas como árabe, hebraico e persa são escritos da direita para a esquerda (RTL - Right-to-Left).

Para garantir que seu conteúdo seja exibido corretamente e de forma acessível, o HTML oferece atributos e tags específicas: o atributo lang, e as tags <bdo> e <bdi>.

O atributo lang: definindo o idioma do conteúdo

O atributo lang é um atributo global que especifica o idioma principal do conteúdo de um elemento. Ele pode ser aplicado à tag <html> para definir o idioma de toda a página, ou a elementos específicos para indicar que parte do conteúdo está em um idioma diferente.

Por que lang é importante?

• Acessibilidade: Leitores de tela e outras tecnologias assistivas usam o atributo lang para pronunciar o texto corretamente, com a entonação e sotaque adequados ao idioma.
• Mecanismos de Busca (SEO): Ajuda os mecanismos de busca a entender o idioma do seu conteúdo, o que pode ser relevante para resultados de pesquisa específicos por idioma.
• Navegadores: Pode influenciar a renderização de fontes, a verificação ortográfica e a tradução automática.

Como usar:

• Na tag <html> (recomendado para o idioma principal da página):

  <html lang="pt-BR"> <!-- Português do Brasil -->
  <head>
    <meta charset="UTF-8">
    <title>Minha Página em Português</title>
  </head>
  <body>
    <h1>Bem-vindo!</h1>
    <p>Este é um texto em português.</p>
  </body>
  </html>
  

• Em elementos específicos (para trechos em outro idioma):

  <p>Hello, world! Em português, dizemos <span lang="pt-BR">Olá, mundo!</span></p>
  <p>A famosa frase em latim é: <i lang="la">Carpe Diem</i>.</p>
  

Códigos de idioma:

• Use códigos de idioma padrão ISO 639-1 (ex: en para inglês, es para espanhol, fr para francês).
• Para variações regionais, use o código do idioma seguido de um hífen e o código do país ISO 3166-1 (ex: en-US para inglês americano, en-GB para inglês britânico, pt-BR para português do Brasil).

A tag <bdo>: sobrescrevendo a direção do texto

A tag <bdo> (Bi-Directional Override) é usada para sobrescrever a direção padrão do texto para um trecho específico de conteúdo. Isso é útil quando você precisa exibir um texto que, por algum motivo, deve ter uma direção de escrita diferente daquela que o algoritmo bidirecional do navegador normalmente aplicaria.

Como funciona:

• Você envolve o texto que deseja sobrescrever com <bdo>.
• Usa o atributo dir para especificar a direção:
  • dir="ltr": Left-to-Right (esquerda para direita).
  • dir="rtl": Right-to-Left (direita para esquerda).

Exemplo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de BDO</title>
</head>
<body>

  <h1>Direção do Texto</h1>

  <p>Texto normal (LTR): Olá, mundo!</p>
  <p>Texto árabe (RTL): <span lang="ar">مرحبا بالعالم</span></p>

  <p>Sobrescrevendo para RTL: <bdo dir="rtl">Hello World</bdo></p>
  <p>Sobrescrevendo para LTR: <bdo dir="ltr">مرحبا بالعالم</bdo></p>

  <p>
    Nome de arquivo em um texto RTL:
    <span lang="ar">الملف هو </span><bdo dir="ltr">report.pdf</bdo><span lang="ar">.</span>
  </p>

</body>
</html>

Casos de uso:

• Exibir nomes de arquivos ou URLs em um texto RTL.
• Citar trechos de código ou termos técnicos que devem ser LTR dentro de um contexto RTL, ou vice-versa.
• Importante: Use <bdo> com cautela e apenas quando necessário, pois pode confundir leitores de tela e usuários se usado incorretamente. Geralmente, o algoritmo bidirecional do navegador já faz um bom trabalho.

A tag <bdi>: isolando trechos de texto bidirecional

A tag <bdi> (Bi-Directional Isolation) é usada para isolar um trecho de texto que pode ter uma direção de escrita diferente do seu contexto circundante. Ela é mais inteligente que <bdo> porque não força uma direção específica, mas sim "isola" o texto para que o algoritmo bidirecional do navegador possa aplicar a direção correta sem afetar o texto ao redor.

Como funciona:

• Você envolve o texto que deseja isolar com <bdi>.
• O navegador aplica a direção de escrita apropriada ao conteúdo dentro de <bdi> sem que isso "vaze" para o texto externo.

Exemplo:

Imagine um fórum onde usuários de diferentes idiomas postam seus nomes. Se um nome árabe (RTL) for inserido em um texto português (LTR), o algoritmo bidirecional pode tentar reordenar o texto ao redor. <bdi> resolve isso.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de BDI</title>
</head>
<body>

  <h1>Isolamento Bidirecional</h1>

  <p>Usuário <bdi>اسم المستخدم</bdi> postou um comentário.</p>
  <p>Usuário <bdi>John Doe</bdi> postou um comentário.</p>

  <p>
    O nome do arquivo é <bdi>تقرير.pdf</bdi> (em árabe) e
    <bdi>report.pdf</bdi> (em inglês).
  </p>

</body>
</html>

Casos de uso:

• Conteúdo gerado por usuário (ex: nomes de usuário, comentários) que podem estar em idiomas RTL dentro de um contexto LTR (ou vice-versa).
• Quando você não sabe a direção do texto que será inserido, mas quer garantir que ele não bagunce o layout.

Resumindo

• Atributo lang:
  • Define o idioma principal do conteúdo de um elemento.
  • Essencial para acessibilidade (leitores de tela) e SEO.
  • Use códigos ISO (ex: pt-BR, en-US).
• Tag <bdo> (Bi-Directional Override):
  • Força uma direção de escrita (dir="ltr" ou dir="rtl") para um trecho de texto, sobrescrevendo o algoritmo bidirecional.
  • Use com cautela, apenas quando o algoritmo padrão falhar.
• Tag <bdi> (Bi-Directional Isolation):
  • Isola um trecho de texto para que o algoritmo bidirecional possa aplicar a direção correta sem afetar o texto ao redor.
  • Mais flexível e segura que <bdo> para conteúdo de direção desconhecida.

Com essas ferramentas, você pode criar páginas web que se adaptam graciosamente a diferentes idiomas e direções de escrita, tornando seu conteúdo verdadeiramente global e acessível.