devLap

Como caracteres Unicode criam letras diferentes no navegador

javascript dev.to

Quando alguém copia um nome como 𝕸𝖆𝖗𝖎𝖆, o navegador não está carregando uma fonte personalizada. Na maioria dos geradores de letras diferentes, o texto é convertido para outros caracteres já definidos pelo padrão Unicode.

Essa distinção é importante para quem desenvolve interfaces, geradores de nomes, bios para redes sociais ou ferramentas de texto: CSS muda apenas a aparência local; caracteres Unicode continuam no conteúdo copiado.

Fonte visual e caractere não são a mesma coisa

Com CSS, podemos escrever:

.nome {
  font-family: "Georgia", serif;
}
Enter fullscreen mode Exit fullscreen mode

O HTML continua contendo as mesmas letras. Se o usuário copiar o texto, o destino recebe “Maria”, sem a tipografia do site.

Um conversor Unicode trabalha de outra maneira. Ele pode trocar o caractere latino M por um símbolo matemático visualmente parecido, como 𝕄 ou 𝑀. O resultado é texto real e pode ser colado em uma bio, legenda ou nickname.

Isso explica por que uma página como o gerador de fontes para Instagram funciona sem instalar arquivos de fonte no celular.

Uma implementação simples em JavaScript

A forma mais direta é criar um mapa entre caracteres comuns e equivalentes estilizados:

const mapa = {
  A: "𝔸",
  B: "𝔹",
  C: "ℂ",
  a: "𝕒",
  b: "𝕓",
  c: "𝕔"
};

function transformar(texto) {
  return Array.from(texto)
    .map((caractere) => mapa[caractere] ?? caractere)
    .join("");
}

console.log(transformar("Cab")); // ℂ𝕒𝕓
Enter fullscreen mode Exit fullscreen mode

O uso de Array.from merece atenção. Muitos caracteres Unicode ocupam mais de uma unidade de código UTF-16. Um split por string pode separar incorretamente partes de certos símbolos; Array.from já percorre por pontos de código e evita vários problemas básicos.

Para famílias de emoji, tons de pele e sequências unidas por zero-width joiner, a segmentação por grafema ainda é mais adequada. Navegadores modernos oferecem Intl.Segmenter:

const segmentador = new Intl.Segmenter("pt-BR", {
  granularity: "grapheme"
});

const partes = [...segmentador.segment("Olá 👩🏽‍💻")]
  .map((item) => item.segment);
Enter fullscreen mode Exit fullscreen mode

Nem toda letra estilizada é uma letra comum

Muitos alfabetos decorativos vêm dos blocos Mathematical Alphanumeric Symbols. Eles foram criados para diferenciar símbolos matemáticos, não como um sistema universal de tipografia para redes sociais.

Há consequências práticas:

  • a aparência muda entre sistemas e aplicativos;
  • alguns dispositivos antigos exibem um quadrado vazio;
  • mecanismos de busca e leitores de tela podem interpretar o texto de forma diferente;
  • filtros de username podem recusar determinados caracteres;
  • contagens de tamanho nem sempre coincidem com o que parece estar na tela.

Por isso, um gerador responsável mantém o texto original por perto, oferece várias opções e deixa o usuário testar no destino final. No Letras Diferentes, por exemplo, a transformação acontece no navegador e o visitante escolhe a variação que faz sentido para o contexto.

Acessibilidade vem antes do efeito visual

Um título inteiro convertido pode parecer bonito, mas tende a ser pior para leitura, busca e tecnologias assistivas. Uma estratégia equilibrada é reservar caracteres decorativos para trechos curtos:

  • nome de exibição;
  • uma palavra de destaque na bio;
  • nickname de jogo;
  • separador visual;
  • título curto, acompanhado por texto convencional.

Informações essenciais — endereço, instruções, preço, descrição do perfil — devem permanecer em caracteres comuns. Também é recomendável manter aria-label em texto normal quando o elemento estilizado possui função interativa.

<button aria-label="Copiar nome estilizado">
  Copiar 𝕟𝕠𝕞𝕖
</button>
Enter fullscreen mode Exit fullscreen mode

Símbolos exigem curadoria, não só quantidade

Em nicks, o usuário costuma misturar letras com estrelas, setas, linhas e ornamentos. Uma lista sem organização rapidamente vira ruído. Categorias por uso ajudam mais: separadores, bordas, estrelas, corações, setas e símbolos minimalistas.

A página de símbolos para nick segue esse princípio: a ferramenta apresenta opções copiáveis e permite montar o resultado sem exigir conhecimento técnico sobre os pontos de código.

Do lado do desenvolvimento, vale registrar cada item com metadados simples:

const simbolos = [
  { valor: "✦", categoria: "estrela", rotulo: "estrela de quatro pontas" },
  { valor: "➜", categoria: "seta", rotulo: "seta para a direita" },
  { valor: "┊", categoria: "separador", rotulo: "linha vertical pontilhada" }
];
Enter fullscreen mode Exit fullscreen mode

Esses rótulos melhoram busca interna, filtros e acessibilidade.

Checklist para uma ferramenta de conversão

Antes de publicar um gerador desse tipo, eu verificaria:

  1. o texto original nunca é perdido;
  2. caracteres sem equivalente permanecem inalterados;
  3. copiar funciona em celular e desktop;
  4. a interface avisa sobre compatibilidade;
  5. o resultado pode ser testado sem cadastro;
  6. botões possuem rótulos acessíveis;
  7. a página não promete uma “fonte instalada” quando entrega caracteres Unicode.

A técnica é simples, mas uma boa experiência depende de escolhas cuidadosas. Unicode torna o resultado portátil; a curadoria, a compatibilidade e a acessibilidade determinam se ele será realmente útil.

Source: dev.to

arrow_back Back to Tutorials