Adicione dir="auto" a campos de entrada e áreas de texto

 (mough.xyz)
3 pontos por GN⁺ 2023-08-24 | 1 comentários | Compartilhar no WhatsApp
  • Com apenas o atributo dir="auto" do HTML, campos de entrada e áreas de texto passam a dar suporte automaticamente a idiomas RTL (da direita para a esquerda), como hebraico, árabe e urdu
  • Até então, só eram conhecidas abordagens manuais e complexas, como escrever listeners para detectar caracteres, usar bibliotecas de terceiros ou alternar manualmente para dir="right"
  • Como dir="auto" não era mencionado em nenhum resultado de busca por "textarea rtl", o problema vinha sendo confundido com algo que exigia intervenção direta
  • Na aplicação real, funcionou imediatamente e corretamente, sem parsing de linguagem de baixo nível adicional
  • Uma mudança pequena, mas de grande impacto: um elemento central de internacionalização (i18n) que pode determinar se usuários do mundo todo conseguem usar um app

A dificuldade do suporte a RTL

  • Desde os primeiros dias do Standard Notes, havia pedidos de suporte a idiomas RTL como hebraico, árabe e urdu, mas a implementação parecia difícil e foi adiada
  • A cada avaliação, parecia envolver trabalho de parsing de linguagem em baixo nível, lidando com codificações como Unicode e ASCII, então era evitado
  • A cada poucos meses, o mesmo tema voltava, mas as recomendações eram sempre as mesmas
    • Escrever um parser de caracteres próprio
    • Usar uma biblioteca de terceiros
    • Aplicar dir="right"

Limitações da busca

  • Mesmo buscando por "textarea rtl", "textarea right to left" etc., dir="auto" simplesmente não aparecia nos resultados
  • Em vez disso, apareciam respostas do Stack Overflow sugerindo usar dir="rtl" na tag, ou bibliotecas de terceiros do Twitter
  • Ao confiar apenas na primeira página dos resultados, o problema foi tratado como algo que exigia intervenção direta e continuou sendo empurrado para baixo na lista de prioridades

Descoberta da solução

  • Algumas semanas atrás, em uma nova busca, apareceu um comentário em uma discussão do GitHub dizendo que bastava adicionar dir="auto" à textarea
  • Um problema cuja solução vinha sendo procurada havia um ano foi resolvido com uma única linha
  • Ao aplicar diretamente, funcionou perfeitamente, sem falhas

Como aplicar

  • Basta adicionar uma linha de atributo a campos de entrada e áreas de texto
    • <textarea dir='auto'> שלום, עתיד. </textarea>
  • A direção do texto é detectada automaticamente de acordo com o valor inserido
  • Como referência, a documentação do atributo dir na MDN traz explicações relacionadas

Leituras relacionadas

1 comentários

 
GN⁺ 2023-08-24
Comentários do Hacker News

  • É uma forma fácil de corrigir a renderização de texto em campos de entrada e textarea, mas o mesmo tratamento também é necessário nos elementos que exibem o texto enviado
    E, quando você encontra texto bidirecional, por exemplo nomes de produtos em inglês dentro de um parágrafo em árabe, entra em jogo um nível de complexidade completamente diferente
    No momento, o Chrome tem um bug de regressão que afeta a renderização de texto RTL em campos com dir='auto', mas a correção já foi enviada e deve entrar na próxima versão

  • O MDN sempre salva: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

  • Existe um mundo fora dos EUA, mas dependendo da natureza do site isso não precisa necessariamente ser suportado
    Não sou americano nem falante nativo de inglês, mas em 99% dos sites que eu uso não haveria problema nenhum se nomes de usuário ou posts não aceitassem caracteres RTL
    Se isso não foi resolvido no nível do navegador ou do sistema operacional, acho que eu quase não tenho obrigação de dar suporte a isso
    E isso não é um argumento a favor de oprimir minorias

    • Sempre penso nisso quando considero dar suporte a outros idiomas em projetos pessoais
      Uma busca rápida diz que existem cerca de 840 milhões de usuários de inglês, então, para alguém trabalhando sozinho, alcançar 1/10 da população mundial já parece bem razoável
      É bom ampliar o escopo para atender mais gente, mas isso não é uma obrigação
    • Se dar suporte a um caso de uso de nicho for simples e trouxer pouca carga de manutenção, dá para colocar só pela diversão

  • Dizer “a primeira página de resultados do Google nunca mente” até traz uma história que pode ajudar na resolução do problema, mas é melhor sentar antes. Talvez você fique triste

    • Parece que essa frase foi interpretada literalmente
      Considerando a frase posterior “o Google vinha mentindo para nós sobre o suporte RTL em campos de entrada”, a expressão “a primeira página de resultados do Google nunca mente...” quase certamente era sarcasmo

  • Infelizmente, tanto o site quanto o CodePen vinculado têm uma renderização do código-fonte bem ruim. O ponto final está na posição errada, enquanto o HTML renderizado está ok
    Isso parece ser mais um caso clássico em que o algoritmo bidirecional do Unicode falha
    Parece ser necessário um algoritmo especial que renderize tudo entre tags HTML, isto é, entre < e >, como uma unidade atômica internamente LTR, sem afetar a direção dos caracteres ao redor
    Neste exemplo, o algoritmo precisaria conseguir mudar de direção no meio da sequência .<

    • Aqui o algoritmo bidirecional do Unicode não falhou; ele está funcionando como foi projetado
      A direção base do trecho de código-fonte é LTR, mas a direção está misturada por causa do texto em hebraico
      A pontuação tem direcionalidade fraca, então o ponto final aparece no fim do trecho RTL e, como a direção base é LTR, esse “fim” significa à direita
      Para forçar a renderização correta de conteúdo com direções mistas, muitas vezes é preciso inserir caracteres de controle bidirecional indicando onde certos trechos direcionais começam e terminam
      Porém, neste caso, isso provavelmente não seria adequado porque poderia estragar a renderização do exemplo de entrada em si

  • Relacionado a isso, o suporte a propriedades/valores lógicos amadureceu nos últimos anos
    Eles são uma alternativa às propriedades baseadas em direção, como top/left/bottom/right, e podem se adaptar a mudanças na direção do conteúdo ou do texto
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

    • Esse tipo de conceito já era padrão em plataformas móveis há muito tempo. Por exemplo, coisas como leading e trailing no iOS
      É bom ver isso chegando à web, e criar uma UI independente de idioma passa a ser algo muito mais viável

  • Se você pesquisar por textarea e texto BiDi em quase todas as combinações que eu consigo imaginar, https://www.w3.org/International/talks/1602-oman aparece entre os primeiros links
    A seção “What if you don't know the direction in advance” também está lá de cara: https://www.w3.org/International/talks/1602-oman/#advance
    O problema é que o autor aparentemente não conhecia bem essa área, então talvez nem soubesse que BiDi era o termo certo para pesquisar. É uma abreviação de “bi-directional text” e é o termo usado quando você não quer especificar uma direção de escrita em particular
    Também não quero culpá-lo por achar que “os resultados de busca estavam errados”. Se você pesquisar por RTL, aqueles resultados são a resposta certa, mas isso não fica claro até você conhecer um pouco melhor essa área
    Isso mostra a limitação de depender de respostas da internet. A internet não sabe o que eu não sei
    Se você perguntar a alguém com bastante experiência em BiDi, uma das primeiras perguntas provavelmente será “você está falando de RTL ou de BiDi?”
    Se puder, é melhor perguntar a uma pessoa do que a um software. Especialmente quando você não conhece bem a área

    • Em vez de tratar “a área” como um jargão interno de forma meio porteira fechada e diminuir o autor, também dá para ver com bons olhos o fato de ele ter ajudado a tornar esse problema mais conhecido

  • Também valeria adicionar o link para dirname, um atributo interessante que permite incluir a direcionalidade da entrada de texto no envio do formulário: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

  • Se eu fizesse um navegador, gostaria de divulgar como utilidade pública que, na ausência de especificação, o padrão deveria ser dir="auto"

    • Controles de formulário para entrada do usuário são uma espécie de documento separado, então esse valor padrão pode fazer mais sentido nesse caso, mas como padrão para todos os elementos seria muito ruim
      Se você souber em que idioma o usuário vai digitar, talvez isso também não seja o melhor padrão. Ainda assim, claro, é melhor do que definir errado

  • Meio relacionado, recentemente descobri que o Vim tem :set rl, que faz o texto seguir da direita para a esquerda
    Para voltar ao normal, basta usar :set norl

    • Uau, bem legal, e até em inglês é curiosamente divertido digitar desse jeito. Fiquei nisso por mais tempo do que esperava
    • O Vim antigo também tinha vim -A, que iniciava em modo árabe. Não sei como se usa, acho que usa algum tipo de método de entrada
    • E :set td?