34 caratteri · da copiare gratis
Elementi a blocchi per pixel di testo
Il blocco Unicode da U+2580 a U+259F contiene 32 caratteri che riempiono una cella di carattere in frazioni fisse — ombreggiature a quarti, step a ottavi in altezza, metà e quadranti. Sono il motivo per cui un terminale può disegnare una barra di avanzamento, uno sparkline o un grafico a barre con nient'altro che testo. Copia un carattere qualsiasi qui sotto; ognuno è elencato con il proprio nome Unicode e code point.
Ombreggiature
Quattro livelli di densità dal 25% al pieno. Il modo più rapido per suggerire profondità o attenuazione senza usare il colore.
Ottavi verticali
Riempiono la cella dal basso verso l'alto in otto passi. È il set per sparkline e grafici a barre.
Ottavi orizzontali
Riempiono la cella da sinistra a destra in otto passi — il set per le barre di avanzamento. Una cella di risoluzione ne diventa otto.
Metà e quadranti
Ogni combinazione dei quattro quarti di cella. Considera una cella di carattere come una griglia di pixel 2×2, e questi sono tutti e sedici gli stati possibili.
Clicca su un carattere per copiarlo. Non scarichi nulla: sono caratteri di testo, non immagini.
Blocchi Unicode
- U+2580–U+259F Elementi a Blocchi
Come usare Elementi a Blocchi
Costruisci una barra di avanzamento con gli ottavi orizzontali
Disegna la parte riempita con █ e completa la cella parziale con l'ottavo più vicino. Una barra di 20 caratteri ha improvvisamente 160 passi di risoluzione invece di 20, così la barra si muove in modo fluido invece di scattare.
Costruisci uno sparkline con gli ottavi verticali
Mappa ogni punto dati su uno tra ▁▂▃▄▅▆▇█ in base alla sua quota rispetto al massimo. Un intero grafico diventa una riga di testo che puoi incollare in un messaggio di commit o in un log.
Usa i quadranti come griglia di pixel 2×2
Le sedici combinazioni di quadranti permettono a una cella di carattere di portare quattro pixel indipendenti, raddoppiando la risoluzione effettiva in entrambe le direzioni. È così che funzionano i renderer di immagini in modalità testo.
Colorali come testo, perché sono testo
Un █ assume il `color` di CSS come qualsiasi carattere, quindi un grafico a barre può essere stilizzato interamente in CSS senza canvas e senza immagini. Imposta line-height a 1 così i blocchi verticalmente adiacenti si toccano.
Informazioni su Elementi a Blocchi
Il blocco Elementi a Blocchi è la cosa più vicina a un pixel che il testo semplice possa avere. Ogni carattere riempie una frazione definita della propria cella — un ottavo, un quarto, una metà, o l'intera cella — il che significa che il testo può essere usato come una bitmap a risoluzione molto bassa. I quattro caratteri di ombreggiatura ░▒▓█ provengono dalla code page 437 e sono stati usati per decenni per simulare gradienti e dithering su display che non avevano affatto scala di grigi.
I caratteri a step di ottavi sono la parte silenziosamente geniale. Dato che suddividono una cella in otto, una barra di avanzamento disegnata in un terminale a 20 colonne ha 160 stati distinti invece di 20. La barra avanza in modo fluido invece che a scatti, e lo fa in un flusso di puro testo che può essere reindirizzato, registrato in log e copiato. Quasi ogni barra di avanzamento da riga di comando moderna è costruita con U+2588 e i suoi sette fratelli parziali.
I caratteri a quadranti vanno oltre, trattando una cella come una griglia 2×2, offrendo tutte e sedici le combinazioni acceso/spento. Questo raddoppia la risoluzione orizzontalmente e verticalmente allo stesso tempo, ed è la base dei visualizzatori di immagini da terminale: mappa ogni gruppo 2×2 di pixel dell'immagine su un carattere a quadrante, imposta i colori di primo piano e sfondo, e una fotografia si rende in testo.
Questo sito usa gli elementi a blocchi come materiale di disegno principale. I pezzi di Tetris, la racchetta e i mattoncini di Breakout, i muri del Labirinto e il corpo di Snake sono tutti costruiti con █ e le sue forme parziali invece che con sprite, motivo per cui ogni gioco eredita il colore dell'accento della pagina e resta nitido a qualsiasi livello di zoom — è tipografia, quindi si scala come la tipografia.
Giochi disegnati con questi caratteri
Ogni tabellone di questo sito è costruito con caratteri Unicode, non sprite. Questi giochi usano i caratteri qui sopra.
Domande frequenti
Come creo una barra di avanzamento con i caratteri a blocchi Unicode?
Disegna la parte completata con il blocco pieno █, poi rendi la frazione rimanente con l'ottavo orizzontale più vicino (▏▎▍▌▋▊▉). Riempi il resto con spazi o l'ombreggiatura leggera ░. Moltiplicare la percentuale per otto e prendere il resto individua il carattere parziale giusto.
Perché c'è uno spazio vuoto tra i miei caratteri a blocchi?
Il line-height. I caratteri a blocchi sono disegnati fino al bordo esatto della cella del carattere, quindi qualsiasi interlinea extra appare come uno spazio vuoto orizzontale tra le righe. Imposta line-height a 1. Se invece compaiono spazi vuoti tra le colonne, il font è proporzionale anziché monospace.
Qual è la differenza tra ░ ▒ ▓ e █?
Sono quattro livelli di densità della stessa cella: l'ombreggiatura leggera è riempita per circa il 25%, quella media al 50%, quella scura al 75% e il blocco pieno al 100%. Dato che sono testo, tutte e quattro assumono il colore del tuo testo — quindi puoi ottenere quattro livelli apparenti di luminosità da un unico colore.
Posso cambiare il colore dei caratteri a blocchi?
Sì. Sono normali caratteri di testo, quindi si applicano il `color` di CSS, i colori ANSI del terminale e il tema del tuo editor. È proprio questo il vantaggio rispetto a un'immagine: un carattere può essere di qualsiasi colore e dimensione, e resta nitido a ogni livello di zoom.
Gli elementi a blocchi funzionano in ogni font?
Il supporto è praticamente universale, ma la qualità varia. Alcuni font disegnano gli ottavi leggermente più stretti, lasciando sottili fessure in un riempimento pieno. I font monospace costruiti per i terminali — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — li disegnano bordo a bordo e sono la scelta sicura.
Support the arcade
Ti piacciono i giochi?
UnicodeGames è gratis, senza pubblicità, e lo sarà sempre. Se ha reso più piacevole una pausa caffè, puoi ricambiare il favore.
Offrimi un caffèOne-off · No account needed · Handled by Buy Me a Coffee