Por que a arte ASCII está desalinhada?

A arte ASCII geralmente fica desalinhada porque o destino usa uma fonte proporcional, reduz espaços consecutivos a um só, expande tabulações de outra maneira ou quebra a linha antes do fim do desenho. Corrija primeiro o contêiner: use um bloco de código delimitado ou um elemento pre, escolha uma fonte monoespaçada, substitua tabulações por espaços e mantenha todas as linhas dentro da menor largura disponível no destino. O Gerador de arte ASCII do ClockTools mostra contagens dinâmicas de colunas, linhas, caracteres e bytes para que você possa testar a saída real antes de colá-la.

Quais são as quatro verificações que encontram a maioria das falhas de alinhamento?

Siga esta ordem, pois cada etapa elimina uma categoria inteira de falhas:

1. Fonte: confirme se o destino renderiza a arte em uma fonte monoespaçada.
2. Espaço em branco: confirme se espaços repetidos e quebras de linha são preservados.
3. Largura: encontre a linha mais longa e compare-a com o contêiner de visualização mais estreito.
4. Caracteres: procure tabulações, símbolos Unicode largos, emojis ou glifos de fontes substitutas que possam ocupar um número inesperado de células.

Não comece redesenhando letras individuais. Se todas as linhas se deslocam depois do mesmo ponto, a estrutura provavelmente está intacta e o renderizador está alterando o espaçamento.

Por que uma fonte proporcional desorganiza a imagem?

A arte ASCII trata os caracteres como peças em uma grade. Um espaço, um sublinhado, uma barra e um W maiúsculo precisam ocupar a mesma largura de célula para que os elementos verticais continuem alinhados. Uma fonte proporcional atribui larguras diferentes de propósito; assim, uma linha com letras estreitas deixa de ocupar a mesma largura que outra com letras largas.

A família genérica monospace do CSS solicita ao navegador uma fonte em que todos os caracteres avancem a mesma largura. As orientações do W3C sobre fontes listam monospace como uma família genérica, enquanto a definição do CSS 2 descreve uma fonte monoespaçada pela largura fixa de seus glifos.

Quando você controla a página, use um elemento pré-formatado e uma lista de fontes monoespaçadas:

<pre class="ascii-art">YOUR ART HERE</pre>

.ascii-art {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre;
  overflow-x: auto;
}

Isso preserva o desenho sem forçar quebras de linha. A rolagem horizontal costuma prejudicar menos do que uma borda direita desorganizada.

Como espaços, tabulações e quebra automática alteram as linhas?

Normalmente, o HTML reduz sequências de espaços a um só e trata quebras de linha como espaços em branco no fluxo do texto. A propriedade white-space do CSS controla a preservação de espaços, quebras de linha explícitas e quebras automáticas. pre preserva os três componentes estruturais da arte ASCII comum: espaços repetidos, linhas explícitas e ausência de quebra automática.

Tabulações não são unidades estáveis de alinhamento. Um editor pode usar quatro colunas, outro oito, e um componente da web pode aplicar uma largura personalizada. Substitua cada tabulação pelo número desejado de espaços antes de distribuir o texto.

Os espaços no fim das linhas também são frágeis. Alguns editores os removem ao salvar, e ferramentas de revisão podem ocultá-los. Prefira um desenho cuja borda direita relevante não dependa de espaços invisíveis no final. Espaços no início e no meio das linhas são mais fáceis de preservar em um contêiner pré-formatado.

O que mudou em um teste controlado no ClockTools?

Em um teste no site em 2026-09-01, foi inserido ALIGN na fonte Standard FIGlet. Com alinhamento à esquerda, o gerador informou 31 colunas, 6 linhas, 159 caracteres e 159 bytes. A saída visível foi:

     _    _     ___ ____ _   _
    / \  | |   |_ _/ ___| \ | |
   / _ \ | |    | | |  _|  \| |
  / ___ \| |___ | | |_| | |\  |
 /_/   \_\_____|___\____|_| \_|

Ao definir uma largura-alvo de 40 colunas e centralizar o alinhamento, os espaços de preenchimento à esquerda passaram a fazer parte do texto. O resultado informado aumentou para 65 colunas e 380 caracteres mesmo que os formatos das letras não tivessem mudado. Esta é a observação crítica: o alinhamento pode adicionar espaços literais, então um banner que aparece centralizado no gerador pode ficar largo demais para seu destino.

A ferramenta também separa a cor da prévia do texto bruto e oferece exportações de texto em TXT, Markdown, ANSI e HTML, além de PNG. Essa separação ajuda a impedir que uma configuração decorativa da prévia altere os caracteres copiados sem que você perceba.

Como você deve colar a arte ASCII no Markdown ou HTML?

No GitHub, coloque o texto em um bloco de código delimitado. A documentação do GitHub mostra delimitadores de três crases e recomenda linhas em branco ao redor deles. Acrescente o identificador text quando não quiser que o realce de uma linguagem de programação dê cor aos sinais de pontuação.

```text
YOUR ASCII ART
```

Para um README, mantenha o nome do projeto como título normal antes da arte. Os leitores de tela podem anunciar todos os sinais de pontuação, e um banner decorativo não deve ser o único local onde aparecem palavras essenciais.

Em HTML, use pre em vez de inserir uma sequência de espaços inseparáveis. Teste a visualização estreita. Você pode usar o Editor HTML em tempo real para comparar white-space: pre, pre-wrap e o fluxo normal sem editar uma página em produção.

Quando os caracteres Unicode criam um problema de largura?

Os caracteres do ASCII estrito são estreitos, mas muitas artes chamadas de “ASCII” usam caracteres de desenho de caixas, blocos sombreados, emojis ou outros símbolos Unicode. O relatório East Asian Width do Unicode explica que os caracteres podem ser estreitos ou largos em contextos de layout, e caracteres ambíguos podem depender do ambiente.

A substituição de fontes acrescenta outra variável. Se a fonte monoespaçada selecionada não contiver um símbolo, o navegador poderá buscá-lo em outra fonte, com métricas diferentes. Teste no mesmo terminal, aplicativo de conversa ou navegador em que a arte será vista.

Para obter a maior compatibilidade possível, escolha uma sequência de caracteres ASCII simples, como @%#*+=-:., e evite emojis. Use blocos Unicode apenas quando souber que o destino os exibe de maneira consistente.

Qual exportação você deve usar quando o texto não consegue ficar alinhado?

Escolha o formato conforme o destino, não conforme a prévia do gerador:

Antes de exportar, cole o texto bruto no Bloco de notas on-line para procurar tabulações acidentais e compare as versões anterior e posterior com o Comparador de texto. A comparação caractere a caractere revela espaços excluídos que podem passar despercebidos em uma inspeção visual.

Se o destino não aceita texto monoespaçado, remove os delimitadores dos blocos de código ou quebra linhas longas, deixe de tratá-lo como uma área confiável para esse desenho em texto. Exporte um PNG, mantenha uma legenda em texto comum para acessibilidade e preserve o texto original separadamente para futuras edições.