34 caractères · libres à copier
Éléments de bloc pour des pixels de texte
Le bloc Unicode U+2580 à U+259F contient 32 caractères qui remplissent une cellule de caractère selon des fractions fixes — quarts de teinte, pas de huitième en hauteur, moitiés et quadrants. C'est grâce à eux qu'un terminal peut dessiner une barre de progression, une sparkline ou un graphique en barres avec rien d'autre que du texte. Copiez n'importe quel caractère ci-dessous ; chacun est répertorié avec son nom Unicode et son point de code.
Teintes
Quatre pas de densité de 25 % au plein. La façon la plus rapide de suggérer une profondeur ou un assombrissement sans couleur.
Huitièmes verticaux
Remplit la cellule de bas en haut en huit pas. C'est le jeu des sparklines et des graphiques en barres.
Huitièmes horizontaux
Remplit la cellule de gauche à droite en huit pas — le jeu des barres de progression. Une cellule de résolution en devient huit.
Moitiés et quadrants
Chaque combinaison des quatre quarts de cellule. Traitez une cellule de caractère comme une grille de pixels 2×2 : ce sont les seize états possibles.
Cliquez sur un caractère pour le copier. Rien n'est téléchargé — ce sont des caractères de texte, pas des images.
Blocs Unicode
- U+2580–U+259F Éléments de bloc
Comment utiliser Éléments de bloc
Construisez une barre de progression avec les huitièmes horizontaux
Dessinez la portion remplie avec █ et terminez la cellule partielle avec le huitième le plus proche. Une barre de 20 caractères a soudain 160 pas de résolution au lieu de 20, donc elle avance en douceur plutôt que par à-coups.
Construisez une sparkline avec les huitièmes verticaux
Associez chaque point de donnée à l'un de ▁▂▃▄▅▆▇█ selon sa part du maximum. Un graphique entier devient une seule ligne de texte que vous pouvez coller dans un message de commit ou un journal.
Utilisez les quadrants comme une grille de pixels 2×2
Les seize combinaisons de quadrants permettent à une cellule de caractère de porter quatre pixels indépendants, doublant la résolution effective dans les deux directions. C'est ainsi que fonctionnent les afficheurs d'images en mode texte.
Colorez-les comme du texte, parce que c'en est
Un █ prend le `color` CSS comme n'importe quel caractère, donc un graphique en barres peut être stylisé entièrement en CSS sans canvas ni images. Réglez line-height à 1 pour que les blocs verticalement adjacents se touchent.
À propos de Éléments de bloc
Le bloc Éléments de bloc est ce qui ressemble le plus à un pixel en texte brut. Chaque caractère remplit une fraction définie de sa cellule — un huitième, un quart, une moitié, ou la totalité — ce qui signifie que le texte peut servir de bitmap à très basse résolution. Les quatre caractères de teinte ░▒▓█ viennent de la page de code 437 et ont servi pendant des décennies à simuler des dégradés et du tramage sur des écrans qui n'avaient aucun niveau de gris.
Les caractères à pas de huitième sont la partie discrètement brillante. Comme ils subdivisent une cellule en huit, une barre de progression dessinée dans un terminal de 20 colonnes a 160 états distincts plutôt que 20. La barre avance en douceur au lieu de sursauter, et elle le fait dans un flux de texte brut qui peut être redirigé, journalisé et copié. Presque toutes les barres de progression CLI modernes sont construites à partir de U+2588 et de ses sept frères partiels.
Les caractères de quadrant vont plus loin en traitant une cellule comme une grille 2×2, donnant les seize combinaisons d'états possibles. Cela double la résolution horizontalement et verticalement à la fois, et c'est la base des visualiseurs d'images en terminal : associez chaque groupe 2×2 de pixels d'image à un caractère de quadrant, réglez les couleurs de premier et d'arrière-plan, et une photographie s'affiche en texte.
Ce site utilise les éléments de bloc comme matériau de dessin principal. Les pièces de Tetris, la raquette et les briques de Casse-Briques, les murs du Labyrinthe et le corps du Snake sont tous construits à partir de █ et de ses formes partielles plutôt qu'à partir de sprites, ce qui explique pourquoi chaque jeu hérite de la couleur d'accent de la page et reste net à tout niveau de zoom — c'est du texte, donc ça s'adapte comme du texte.
Jeux dessinés avec ces caractères
Chaque plateau de ce site est construit à partir d'Unicode, pas de sprites. Ceux-ci utilisent les caractères ci-dessus.
Questions fréquentes
Comment faire une barre de progression avec des caractères de bloc Unicode ?
Dessinez la portion terminée avec le bloc plein █, puis affichez la fraction restante avec le huitième horizontal le plus proche (▏▎▍▌▋▊▉). Complétez le reste avec des espaces ou une teinte claire ░. Multiplier votre pourcentage par huit et prendre le reste indique le bon caractère partiel.
Pourquoi y a-t-il un trou entre mes caractères de bloc ?
L'interlignage. Les caractères de bloc sont dessinés jusqu'au bord exact de la cellule de caractère, donc tout interlignage supplémentaire apparaît comme un trou horizontal entre les rangées. Réglez line-height à 1. Si des trous apparaissent entre les colonnes à la place, la police est proportionnelle plutôt qu'à chasse fixe.
Quelle est la différence entre ░ ▒ ▓ et █ ?
Ce sont quatre pas de densité de la même cellule : la teinte claire est remplie à environ 25 %, la moyenne à 50 %, la sombre à 75 % et le bloc plein à 100 %. Comme ce sont des caractères de texte, tous les quatre prennent votre couleur de texte — vous pouvez donc obtenir quatre niveaux de luminosité apparents à partir d'une seule couleur.
Puis-je changer la couleur des caractères de bloc ?
Oui. Ce sont des caractères de texte ordinaires, donc le `color` CSS, les couleurs ANSI du terminal et le thème de votre éditeur s'appliquent tous. C'est tout l'avantage sur une image : un caractère peut être de n'importe quelle couleur et de n'importe quelle taille, et il reste net à tout niveau de zoom.
Les éléments de bloc fonctionnent-ils dans toutes les polices ?
Le support est quasi universel, mais la qualité varie. Certaines polices dessinent les blocs de huitième légèrement trop étroits, laissant des coutures fines dans un remplissage plein. Les polices à chasse fixe conçues pour les terminaux — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — les dessinent bord à bord et sont le choix sûr.
Support the arcade
Vous aimez les jeux ?
UnicodeGames est gratuit, sans publicité, et le restera. Si le site a égayé une pause café, vous pouvez rendre la pareille.
Offrez-moi un caféOne-off · No account needed · Handled by Buy Me a Coffee