6 Jun 2022

IDENTIFICANDO IDIOMAS ATRAVÉS DO JAVASCRIPT


Trabalhar com múltiplos idiomas é o principal caminho para entrar no mundo Unicode, mas não é o único já que os emojis só são possíveis graças a essa normalização. Conseguir identificar e trabalhar com Unicode é uma tarefa que parece complicada, mas pelo menos em JS, não é.

Porque Unicode

Sem Unicode até escrever HTML seria impossível porque é a base de qualquer enconding, sem isso jamais teríamos a tag <meta charset="utf-8"> que é responsável para avisar o navegador como renderizar determinados caracteres especiais.

Usando Unicode no Javascript

Para usar Unicode no Javascript basta usar o padrão \u0000 onde o número é o código do símbolo dentro do padrão Unicode como. É possível consultar a lista com todos os caracteres suportados pelo Unicode aqui.

const A = "\u0100" // "Ā"

Identificando idiomas

Todos os símbolos do Unicode são alocados em blocos de contexto o que nos dá uma facilidade para testar idiomas contra cada um desses blocos de maneira fácil. Mas atenção: A separação de blocos é por contexto e não idioma o que nos obriga a testar determinado texto em mais de um bloco se quisermos de fato entender a qual idioma ele pertence.

No exemplo abaixo existem 2 blocos diferentes que serviriam para o mesmo “idioma” (Coreano) que na realidade possui dentro de sí dois conjuntos diferentes de caracteres (Hanguls e CJK), assim como para identificar o idioma “Japonês” também existem pelo menos 2 blocos (Hiragana e Katana) diferentes.

/* 
  Veja o GIST em 
  https://gist.github.com/rhamses/584861ba94b2fbe72f66078efe6df31e
*/

const ArabicBlock = new RegExp('[\u0621-\u064A]','g')
const ThaiBlock = new RegExp('[\u0E00-\u0E7F]','g')
const HangulBlock = new RegExp('[\uAC00-\uD7AF]','g')
const CJKBlock = new RegExp('[\u3000-\u303F]', 'g')
const HiraganaBlock = new RegExp('[\u3040-\u309F ]','g')
const KatanaBlock = new RegExp('[\u30A0-\u30FF ]','g')

function identifyLanguage(text) {
  let result
  if (text.match(ArabicBlock)) {
    result = ['ArabicBlock', text.match(ArabicBlock)];
    
  } else if (text.match(ThaiBlock)) {
    result = ['ThaiBlock', text.match(ThaiBlock)];
    
  } else if (text.match(HangulBlock)) {
    result = ['HangulBlock', text.match(HangulBlock)];
    
  } else if (text.match(KatanaBlock)) {
    result = ['KatanaBlock', text.match(KatanaBlock)];
    
  } else if (text.match(HiraganaBlock)) {
    result = ['HiraganaBlock', text.match(HiraganaBlock)];
    
  } else if (text.match(CJKBlock)) {
    result = ['CJKBlock', text.match(CJKBlock)];
    
  } else {
    result = "Unicode not found";
  }
  return result
}

// const text = "کمالہ_خان";
const text = "ยิ่งปัดยิ่งพุ่ง";
// const text = "끝없이서로의가능성을믿다";
// const text = "オリエント・アルカディア";

console.log(identifyLanguage(text))

Aplicações práticas

Uma das aplicações dessa localização é conseguir atribuir uma fonte específica para cada linguagem já que é muito difícil achar uma única fonte que suporte todos os idiomas do mundo (ainda mais gratuita).

Uma forma de testar isso é navegar no Google Fonts é possível fazer busca de fontes que suportes idiomas específicos. No exemplo abaixo comparei o suporte a um texto árabe com a Roboto e a fonte específica Almarai que suporta além dos caracteres latinos, também caracteres árabes e que foi a minha escolha dar suporte aos textos árabes dentro do projeto Hashflags Bot.

Imagem ilustrando o suporte a caracteres árabes com a fonte Roboto do Google Fonts
Imagem ilustrando o suporte a caracteres árabes com a fonte Almarai do Google Fonts
Imagem ilustrando a fonte Almarai do Google Fonts em uso no projeto @hashflagsbot

Conteúdos Relevantes


Headshot of Rhamses Soares

Hi, I'm Rhamses. I'm a Web engineer based in Brasil. You can follow me on Twitter, see some of my work on GitHub, or read more about me on my website.