34 caracteres · grátis para copiar
Elementos de bloco para pixels de texto
O bloco Unicode de U+2580 a U+259F reúne 32 caracteres que preenchem uma célula de caractere em frações fixas — sombreados em quartos, passos em oitavos de altura, metades e quadrantes. É por causa deles que um terminal consegue desenhar uma barra de progresso, uma sparkline ou um gráfico de barras usando só texto. Copie qualquer caractere abaixo; cada um vem com seu nome Unicode e ponto de código.
Sombreados
Quatro níveis de densidade, de 25% até sólido. O jeito mais rápido de sugerir profundidade ou esmaecimento sem usar cor.
Oitavos verticais
Preenche a célula de baixo para cima em oito passos. Este é o conjunto para sparklines e gráficos de barras.
Oitavos horizontais
Preenche a célula da esquerda para a direita em oito passos — o conjunto para barras de progresso. Uma célula de resolução vira oito.
Metades e quadrantes
Toda combinação dos quatro quartos de célula. Trate uma célula de caractere como uma grade de pixels 2×2, e estes são os dezesseis estados possíveis.
Clique em qualquer caractere para copiá-lo. Nada é baixado — são caracteres de texto, não imagens.
Blocos Unicode
- U+2580–U+259F Elementos de Bloco
Como usar Elementos de Bloco
Monte uma barra de progresso com os oitavos horizontais
Desenhe a parte preenchida com █ e termine a célula parcial com o oitavo mais próximo. Uma barra de 20 caracteres passa a ter 160 passos de resolução em vez de 20, então ela se move de forma suave em vez de pular.
Monte uma sparkline com os oitavos verticais
Mapeie cada ponto de dado para um dos ▁▂▃▄▅▆▇█ de acordo com sua proporção em relação ao máximo. Um gráfico inteiro vira uma linha de texto que você pode colar em uma mensagem de commit ou em um log.
Use os quadrantes como uma grade de pixels 2×2
As dezesseis combinações de quadrantes permitem que uma célula de caractere carregue quatro pixels independentes, dobrando a resolução efetiva nas duas direções. É assim que funcionam os renderizadores de imagem em modo texto.
Colora-os como texto, porque são texto
Um █ assume o `color` do CSS como qualquer caractere, então um gráfico de barras pode ser estilizado inteiramente em CSS, sem canvas e sem imagens. Defina line-height como 1 para que blocos verticalmente adjacentes se toquem.
Sobre Elementos de Bloco
O bloco Elementos de Bloco é o que mais se aproxima de um pixel dentro do texto puro. Cada caractere preenche uma fração definida da sua célula — um oitavo, um quarto, uma metade, ou o todo — o que significa que o texto pode ser usado como um bitmap de resolução muito baixa. Os quatro caracteres de sombreado ░▒▓█ vieram da code page 437 e foram usados por décadas para simular gradientes e dithering em telas que não tinham escala de cinza alguma.
Os caracteres em passos de oitavo são a parte discretamente genial. Como eles subdividem uma célula em oito, uma barra de progresso desenhada em um terminal de 20 colunas tem 160 estados distintos, não 20. A barra avança suavemente em vez de saltar, e faz isso em um fluxo de texto puro que pode ser encanado, registrado em log e copiado. Quase toda barra de progresso moderna de linha de comando é construída a partir do U+2588 e de seus sete irmãos parciais.
Os caracteres de quadrante vão além, tratando uma célula como uma grade 2×2, o que gera todas as dezesseis combinações de ligado/desligado. Isso dobra a resolução na horizontal e na vertical ao mesmo tempo, e é a base dos visualizadores de imagem em terminal: mapeie cada grupo 2×2 de pixels da imagem para um caractere de quadrante, defina as cores de primeiro plano e de fundo, e uma fotografia é exibida em texto.
Este site usa os elementos de bloco como seu principal material de desenho. As peças do Tetris, a raquete e os tijolos do Breakout, as paredes do Labirinto e o corpo da Cobrinha são todos construídos a partir do █ e de suas formas parciais, em vez de sprites, e é por isso que todo jogo herda a cor de destaque da página e continua nítido em qualquer nível de zoom — é tipografia, então escala como tipografia.
Jogos desenhados com esses caracteres
Todo tabuleiro deste site é construído com Unicode, não com sprites. Estes usam os caracteres acima.
Perguntas frequentes
Como eu faço uma barra de progresso com caracteres de bloco Unicode?
Desenhe a parte concluída com o bloco cheio █, depois desenhe a fração restante com o oitavo horizontal mais próximo (▏▎▍▌▋▊▉). Preencha o restante com espaços ou o sombreado leve ░. Multiplicar sua porcentagem por oito e pegar o resto escolhe o caractere parcial certo.
Por que existe uma lacuna entre meus caracteres de bloco?
É o line-height. Os caracteres de bloco são desenhados até a borda exata da célula do caractere, então qualquer espaçamento extra aparece como uma lacuna horizontal entre as fileiras. Defina line-height como 1. Se as lacunas aparecerem entre colunas, a fonte é proporcional, não monoespaçada.
Qual é a diferença entre ░ ▒ ▓ e █?
São quatro níveis de densidade da mesma célula: o sombreado leve tem cerca de 25% preenchido, o médio 50%, o escuro 75% e o bloco cheio 100%. Como são texto, todos os quatro assumem a cor do seu texto — então você consegue quatro níveis aparentes de brilho a partir de uma única cor.
Posso mudar a cor dos caracteres de bloco?
Sim. São caracteres de texto comuns, então o `color` do CSS, as cores ANSI do terminal e o tema do seu editor se aplicam normalmente. Essa é toda a vantagem sobre uma imagem: um caractere pode ter qualquer cor e qualquer tamanho, e continua nítido em qualquer nível de zoom.
Os elementos de bloco funcionam em qualquer fonte?
O suporte é praticamente universal, mas a qualidade varia. Algumas fontes desenham os blocos de oitavo um pouco mais estreitos, deixando frestas finas em um preenchimento sólido. Fontes monoespaçadas feitas para terminal — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — os desenham de borda a borda e são a escolha segura.
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