34 Zeichen · kostenlos kopierbar
Blockelemente für Text-Pixel
Der Unicode-Block U+2580 bis U+259F enthält 32 Zeichen, die eine Zeichenzelle in festen Bruchteilen füllen — Viertel-Schattierungen, Achtel-Höhenstufen, Halbierungen und Quadranten. Sie sind der Grund, warum ein Terminal einen Fortschrittsbalken, eine Sparkline oder ein Balkendiagramm mit nichts als Text zeichnen kann. Kopiere unten ein beliebiges Zeichen; jedes ist mit seinem Unicode-Namen und Codepunkt aufgeführt.
Schattierungen
Vier Dichtestufen von 25 % bis massiv. Der schnellste Weg, Tiefe oder Abdunklung ohne Farbe anzudeuten.
Vertikale Achtel
Füllt die Zelle von unten nach oben in acht Stufen. Das ist das Sparkline- und Balkendiagramm-Set.
Horizontale Achtel
Füllt die Zelle von links nach rechts in acht Stufen — das Fortschrittsbalken-Set. Aus einer Zelle Auflösung werden acht.
Halbierungen und Quadranten
Jede Kombination der vier Viertelzellen. Behandle eine Zeichenzelle als 2×2-Pixelraster, und das sind alle sechzehn Zustände.
Klicke auf ein Zeichen, um es zu kopieren. Es wird nichts heruntergeladen — das sind Textzeichen, keine Bilder.
Unicode-Blöcke
- U+2580–U+259F Blockelemente
So verwendest du Blockelemente
Einen Fortschrittsbalken aus den horizontalen Achteln bauen
Zeichne den gefüllten Teil mit █ und schließe die Teilzelle mit dem nächstliegenden Achtel ab. Ein 20-Zeichen-Balken hat plötzlich 160 Auflösungsstufen statt 20, der Balken bewegt sich also flüssig statt zu springen.
Eine Sparkline aus den vertikalen Achteln bauen
Bilde jeden Datenpunkt anhand seines Anteils am Maximum auf eines von ▁▂▃▄▅▆▇█ ab. Ein ganzes Diagramm wird zu einer Textzeile, die du in eine Commit-Message oder ein Log einfügen kannst.
Die Quadranten als 2×2-Pixelraster nutzen
Die sechzehn Quadranten-Kombinationen lassen eine Zeichenzelle vier unabhängige Pixel tragen und verdoppeln so die effektive Auflösung in beide Richtungen. So arbeiten Bildrenderer im Textmodus.
Wie Text einfärben, weil sie Text sind
Ein █ nimmt CSS `color` an wie jedes Zeichen, ein Balkendiagramm lässt sich also vollständig per CSS stylen, ohne Canvas und ohne Bilder. Setze line-height auf 1, damit vertikal benachbarte Blöcke sich berühren.
Über Blockelemente
Der Block Blockelemente ist das, was reiner Text am ehesten für einen Pixel hat. Jedes Zeichen füllt einen festgelegten Bruchteil seiner Zelle — ein Achtel, ein Viertel, eine Hälfte oder das Ganze —, das heißt, Text lässt sich als sehr niedrig auflösende Bitmap verwenden. Die vier Schattierungszeichen ░▒▓█ stammen aus Codepage 437 und wurden jahrzehntelang genutzt, um Verläufe und Dithering auf Displays vorzutäuschen, die überhaupt keine Graustufen hatten.
Die Achtel-Schritt-Zeichen sind der still geniale Teil. Weil sie eine Zelle in acht Teile unterteilen, hat ein in einem 20-Spalten-Terminal gezeichneter Fortschrittsbalken 160 verschiedene Zustände statt 20. Der Balken schreitet flüssig voran statt zu ruckeln, und das in einem reinen Textstrom, der weitergeleitet, geloggt und kopiert werden kann. Fast jeder moderne CLI-Fortschrittsbalken ist aus U+2588 und seinen sieben Teil-Geschwistern gebaut.
Die Quadranten-Zeichen gehen noch weiter, indem sie eine Zelle als 2×2-Raster behandeln und so alle sechzehn An/Aus-Kombinationen liefern. Das verdoppelt die Auflösung horizontal und vertikal gleichzeitig und ist die Grundlage von Terminal-Bildbetrachtern: Bilde jede 2×2-Gruppe von Bildpixeln auf ein Quadranten-Zeichen ab, setze Vordergrund- und Hintergrundfarbe, und ein Foto wird als Text dargestellt.
Diese Seite nutzt die Blockelemente als ihr wichtigstes Zeichenmaterial. Die Tetris-Steine, der Breakout-Schläger und die Steine, die Labyrinth-Wände und der Snake-Körper sind alle aus █ und seinen Teilformen gebaut statt aus Sprites, weshalb jedes Spiel die Akzentfarbe der Seite übernimmt und bei jeder Zoomstufe scharf bleibt — es ist Schrift, also skaliert es wie Schrift.
Spiele, die mit diesen Zeichen gezeichnet sind
Jedes Spielbrett auf dieser Seite besteht aus Unicode statt aus Sprites. Diese hier verwenden die Zeichen oben.
Häufig gestellte Fragen
Wie erstelle ich einen Fortschrittsbalken mit Unicode-Blockzeichen?
Zeichne den fertigen Teil mit dem Vollblock █, und stelle den restlichen Bruchteil mit dem nächstliegenden horizontalen Achtel dar (▏▎▍▌▋▊▉). Fülle den Rest mit Leerzeichen oder heller Schattierung ░ auf. Deinen Prozentsatz mit acht zu multiplizieren und den Rest zu nehmen, wählt das richtige Teilzeichen.
Warum ist eine Lücke zwischen meinen Blockzeichen?
Zeilenabstand. Blockzeichen sind bis zum genauen Rand der Zeichenzelle gezeichnet, jeder zusätzliche Zeilenabstand zeigt sich also als horizontale Lücke zwischen den Reihen. Setze line-height auf 1. Erscheinen stattdessen Lücken zwischen den Spalten, ist die Schriftart proportional statt dicktengleich.
Was ist der Unterschied zwischen ░ ▒ ▓ und █?
Es sind vier Dichtestufen derselben Zelle: helle Schattierung ist etwa zu 25 % gefüllt, mittlere zu 50 %, dunkle zu 75 % und Vollblock zu 100 %. Weil es Text ist, übernehmen alle vier deine Textfarbe — aus einer einzigen Farbe werden so vier scheinbare Helligkeitsstufen.
Kann ich die Farbe von Blockzeichen ändern?
Ja. Es sind gewöhnliche Textzeichen, CSS `color`, Terminal-ANSI-Farben und dein Editor-Theme gelten also alle. Das ist der ganze Vorteil gegenüber einem Bild: Ein Zeichen kann jede Farbe und jede Größe haben und bleibt bei jeder Zoomstufe scharf.
Funktionieren Blockelemente in jeder Schriftart?
Die Unterstützung ist im Wesentlichen universell, aber die Qualität variiert. Manche Schriftarten zeichnen die Achtel-Blöcke minimal zu schmal, was feine Nähte in einer massiven Füllung hinterlässt. Für Terminals gebaute dicktengleiche Schriftarten — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — zeichnen sie randlos und sind die sichere Wahl.
Support the arcade
Gefallen dir die Spiele?
UnicodeGames ist kostenlos, zeigt keine Werbung und wird das auch nie tun. Wenn es deine Kaffeepause aufgehellt hat, kannst du dich revanchieren.
Spendier mir einen KaffeeOne-off · No account needed · Handled by Buy Me a Coffee