87 caracteres · grátis para copiar
Caracteres de desenho de caixa
O bloco Unicode de U+2500 a U+257F reúne 128 caracteres feitos para se encaixar em molduras, tabelas, árvores e grades — finos, grossos, duplos, tracejados e arredondados, além de toda junção onde essas espessuras se encontram. É disso que uma interface de terminal, uma árvore de diretórios e uma tabela ASCII são realmente feitas. Copie qualquer caractere abaixo; cada um vem com seu nome Unicode e ponto de código, agrupados para que as peças que você precisa usar juntas fiquem juntas.
Linhas finas
O conjunto padrão. Onze caracteres desenham qualquer grade retangular, e cada um deles se conecta perfeitamente aos outros.
Linhas grossas
As mesmas onze formas em uma espessura mais grossa. Misture com linhas finas para destacar uma borda externa ou uma fileira selecionada.
Linhas duplas
Dois traços paralelos. A clássica moldura da era DOS, ainda a opção mais decorativa do bloco.
Cantos arredondados
Cantos em arco que suavizam uma caixa de linhas finas. Troque por ┌ ┐ └ ┘ e nada mais muda.
Linhas tracejadas
Sequências de traço triplo e quádruplo, finas e grossas. Úteis para um divisor que deve parecer secundário.
Diagonais e meias-linhas
Barras para riscar uma célula, e traços de meio comprimento para pontas de linha que param no meio da célula.
Transições fina-grossa
Junções onde uma linha fina encontra uma grossa. São elas que permitem engrossar uma fileira de uma tabela sem quebrar as conexões.
Transições dupla-simples
Junções entre linhas duplas e simples — as peças que você precisa quando uma moldura externa dupla encontra divisores internos simples.
Clique em qualquer caractere para copiá-lo. Nada é baixado — são caracteres de texto, não imagens.
Blocos Unicode
- U+2500–U+257F Desenho de Caixa
Como usar Caracteres de Desenho de Caixa
Use sempre uma fonte monoespaçada
Essa é a regra da qual tudo o mais depende. Os caracteres de desenho de caixa são projetados para uma célula fixa, então em uma fonte proporcional as linhas verticais saem de alinhamento e a moldura se desfaz. JetBrains Mono, Menlo, Consolas, Cascadia Code e DejaVu Sans Mono exibem bem o bloco.
Escolha uma espessura e mantenha-a
Fino se conecta com fino e grosso se conecta com grosso. Misturá-los sem as peças de transição deixa lacunas visíveis onde os traços não se encontram. Se você realmente quiser uma borda externa grossa com divisores internos finos, pegue as junções no grupo de transições fina-grossa.
Monte os cantos, depois as bordas, depois as junções
Uma tabela é quatro cantos, duas sequências de borda e as interseções entre elas. Posicione os cantos primeiro e o resto segue de forma mecânica — o que também explica por que isso é fácil de gerar em código.
Defina line-height como 1 para molduras sólidas
Os traços verticais são desenhados até a altura total da célula do caractere. Qualquer espaçamento extra aparece como uma lacuna entre as fileiras, então uma caixa que parece quebrada geralmente só precisa de line-height: 1.
Sobre Caracteres de Desenho de Caixa
O bloco de Desenho de Caixa é um descendente direto do conjunto de caracteres da code page 437 do IBM PC, que deu às aplicações DOS suas molduras e menus décadas antes de qualquer um poder contar com gráficos. O Unicode preservou o repertório inteiro em U+2500, e ele continua em uso constante: as bordas de um gerenciador de arquivos de terminal, os ramos de uma árvore de diretórios, as molduras ao redor de uma tabela de linha de comando e as grades dos jogos deste site são todos desenhados com esses 128 caracteres.
O que torna o bloco tão bem projetado é a cobertura sistemática das junções. Não basta ter uma linha horizontal e uma vertical; você precisa de toda combinação do que chega a uma célula vindo de cada uma das quatro direções, em cada espessura. É por isso que o bloco contém caracteres tão específicos quanto "down light and horizontal heavy" — eles existem para que uma tabela possa mudar de espessura no meio do caminho sem que apareça uma única lacuna na junção.
A restrição prática é a fonte. Esses glifos são desenhados para tocar exatamente as bordas da célula do caractere, para que células adjacentes se conectem em um traço contínuo. Isso só funciona em uma fonte monoespaçada com line-height igual a 1. Dê espaçamento extra ao texto e finas linhas horizontais aparecem entre as fileiras; use uma fonte proporcional e as linhas verticais saem do alinhamento. Quase todo problema de "o desenho de caixa está quebrado" é um desses dois motivos.
Existe uma lacuna deliberada no bloco. O Unicode codifica diagonais finas e grossas e uma cruz diagonal fina, mas nenhuma diagonal de linha dupla e nenhum arco em espessura grossa, porque a code page original não tinha nenhum dos dois e o bloco foi criado visando compatibilidade, não completude. Se você precisar de um canto grosso arredondado, ele não existe — os quatro arcos em U+256D a U+2570 são só de espessura fina.
Jogos desenhados com esses caracteres
Todo tabuleiro deste site é construído com Unicode, não com sprites. Estes usam os caracteres acima.
Perguntas frequentes
Por que meus caracteres de desenho de caixa não se alinham?
Quase sempre é a fonte. Esses glifos pressupõem uma célula de largura fixa, então uma fonte proporcional empurra os traços verticais para fora da coluna. Troque para uma fonte monoespaçada, como JetBrains Mono, Consolas ou Menlo. Se a moldura se alinha na horizontal, mas mostra lacunas entre as fileiras, defina line-height como 1 — o espaçamento extra separa os traços verticais.
Qual é a diferença entre caracteres de desenho de caixa e ASCII art?
A ASCII art simula linhas com os 128 caracteres do ASCII — traços, barras verticais e sinais de mais — então os cantos são aproximados e as junções ficam visivelmente ásperas. Os caracteres de desenho de caixa são glifos feitos sob medida que se encontram exatamente na borda da célula, produzindo traços contínuos e sem interrupção. Eles são Unicode, não ASCII, embora os dois costumem ser confundidos.
Quais caracteres de desenho de caixa eu preciso para uma tabela simples?
Onze: os quatro cantos ┌ ┐ └ ┘, as duas bordas ─ │, as quatro junções em T ├ ┤ ┬ ┴ e a cruz ┼. Toda grade retangular, por maior que seja, é construída só com esses.
Posso misturar linhas finas e grossas?
Sim, mas só através dos caracteres de transição. Uma vertical grossa encontrando uma horizontal fina precisa de um glifo feito exatamente para esse caso, como o U+2542. Conectar uma linha grossa direto a uma fina sem a peça certa gera uma lacuna visível. O grupo de transições fina-grossa acima tem o conjunto completo.
Os caracteres de desenho de caixa funcionam no celular?
Eles são exibidos em qualquer celular moderno — o bloco é antigo e tem suporte universal. O problema é que navegadores mobile costumam usar uma fonte padrão proporcional, então envolva-os em uma regra CSS monospace em vez de confiar no padrão, ou o alinhamento vai quebrar.
Existem cantos arredondados no bloco de desenho de caixa?
Quatro, em U+256D a U+2570, e são só de espessura fina. Use-os no lugar de ┌ ┐ └ ┘ para suavizar uma caixa de linhas finas. Não existe equivalente grosso ou de linha dupla — o bloco herdou seu repertório da code page 437, que não tinha nenhum dos dois.
Support the arcade
Curtindo os jogos?
O UnicodeGames é gratuito, não tem anúncios e nunca vai ter. Se ele alegrou uma pausa para o café, você pode retribuir o favor.
Me pague um caféOne-off · No account needed · Handled by Buy Me a Coffee