34 символов · копируйте свободно
Блочные элементы для текстовых пикселей
Блок Unicode от U+2580 до U+259F содержит 32 символа, заполняющих ячейку фиксированными долями — четвертями плотности, ступенями по восьмым, половинами и квадрантами. Именно благодаря им терминал может нарисовать индикатор прогресса, мини-график или столбчатую диаграмму одним лишь текстом. Скопируйте любой символ ниже; рядом с каждым указаны его название Unicode и код.
Плотности
Четыре ступени плотности от 25% до сплошной заливки. Самый быстрый способ передать глубину или затемнение без использования цвета.
Вертикальные восьмые
Заполняет ячейку снизу вверх в восемь ступеней. Это набор для мини-графиков и столбчатых диаграмм.
Горизонтальные восьмые
Заполняет ячейку слева направо в восемь ступеней — набор для индикаторов прогресса. Разрешение в одну ячейку превращается в восемь.
Половины и квадранты
Все комбинации четырёх четвертей ячейки. Если считать одну ячейку символа сеткой 2×2 пикселя, это все шестнадцать её состояний.
Нажмите на любой символ, чтобы скопировать его. Ничего не скачивается — это текстовые символы, а не изображения.
Блоки Unicode
- U+2580–U+259F Блочные элементы
Как использовать Блочные элементы
Постройте индикатор прогресса из горизонтальных восьмых
Рисуйте заполненную часть символом █, а частичную ячейку завершайте ближайшей восьмой. У полосы из 20 символов внезапно появляется 160 ступеней разрешения вместо 20, поэтому она движется плавно, а не скачками.
Постройте мини-график из вертикальных восьмых
Сопоставьте каждую точку данных одному из символов ▁▂▃▄▅▆▇█ по её доле от максимума. Целый график превращается в одну строку текста, которую можно вставить в комментарий к коммиту или в лог.
Используйте квадранты как сетку пикселей 2×2
Шестнадцать комбинаций квадрантов позволяют одной ячейке символа нести четыре независимых пикселя, удваивая эффективное разрешение в обоих направлениях. Именно так работают текстовые рендереры изображений.
Раскрашивайте их как текст, ведь это и есть текст
█ принимает CSS-свойство `color`, как и любой символ, так что столбчатую диаграмму можно оформить полностью средствами CSS — без canvas и картинок. Задайте line-height: 1, чтобы соседние по вертикали блоки соприкасались.
О «Блочные элементы»
Блок Block Elements — это самое близкое, что есть у обычного текста к понятию пикселя. Каждый символ заполняет определённую долю своей ячейки — восьмую, четверть, половину или целиком, — а значит, текст можно использовать как растровое изображение очень низкого разрешения. Четыре символа плотности ░▒▓█ пришли из кодовой страницы 437 и десятилетиями использовались, чтобы имитировать градиенты и дизеринг на дисплеях, вообще не поддерживавших полутона.
Символы-восьмые — незаметно гениальная часть блока. Поскольку они делят ячейку на восемь частей, индикатор прогресса, нарисованный в 20-колоночном терминале, получает 160 отдельных состояний вместо 20. Полоса продвигается плавно, а не рывками, причём делает это в потоке обычного текста, который можно перенаправлять, логировать и копировать. Почти любой современный индикатор прогресса в командной строке построен из U+2588 и семи его частичных «братьев».
Символы квадрантов идут ещё дальше, рассматривая одну ячейку как сетку 2×2 и давая все шестнадцать комбинаций «включено/выключено». Это одновременно удваивает разрешение по горизонтали и вертикали и лежит в основе терминальных просмотрщиков изображений: каждая группа 2×2 пикселя изображения сопоставляется символу квадранта, задаются цвета переднего плана и фона — и фотография отображается текстом.
Этот сайт использует блочные элементы как основной материал для рисования. Фигуры Тетриса, платформа и кирпичи в Breakout, стены Лабиринта и тело Змейки — всё это построено из █ и его частичных форм, а не из спрайтов, поэтому каждая игра наследует акцентный цвет страницы и остаётся чёткой при любом масштабе — это типографика, а значит, она масштабируется как текст.
Игры, нарисованные этими символами
Каждое игровое поле на этом сайте сделано из Unicode, а не из спрайтов. Эти игры используют символы, показанные выше.
Часто задаваемые вопросы
Как сделать индикатор прогресса из блочных символов Unicode?
Рисуйте завершённую часть полным блоком █, а оставшуюся долю передавайте ближайшей горизонтальной восьмой (▏▎▍▌▋▊▉). Дополните остаток пробелами или символом лёгкой штриховки ░. Умножив процент на восемь и взяв остаток от деления, вы получите нужный частичный символ.
Почему между моими блочными символами есть промежуток?
Дело в line-height. Блочные символы прорисованы точно до края ячейки, поэтому любой лишний межстрочный интервал создаёт горизонтальный промежуток между строками. Задайте line-height: 1. Если промежутки появляются между столбцами, значит, шрифт пропорциональный, а не моноширинный.
В чём разница между ░ ▒ ▓ и █?
Это четыре ступени плотности заполнения одной ячейки: лёгкая штриховка заполнена примерно на 25%, средняя — на 50%, тёмная — на 75%, а полный блок — на 100%. Поскольку это текст, все четыре символа принимают цвет вашего текста — так из одного цвета можно получить четыре видимых уровня яркости.
Можно ли изменить цвет блочных символов?
Да. Это обычные текстовые символы, поэтому применяются CSS-свойство `color`, ANSI-цвета терминала и тема редактора. В этом всё преимущество перед картинкой: один символ может быть любого цвета и размера и остаётся чётким при любом масштабе.
Работают ли блочные элементы в любом шрифте?
Поддержка практически повсеместна, но качество различается. Некоторые шрифты рисуют блоки-восьмые чуть уже, чем нужно, оставляя тонкие щели в сплошной заливке. Моноширинные шрифты, созданные для терминалов, — JetBrains Mono, Cascadia Code, DejaVu Sans Mono, Menlo — рисуют их точно край в край и остаются безопасным выбором.
Support the arcade
Нравятся игры?
UnicodeGames бесплатен, без рекламы и всегда таким останется. Если игра скрасила вам перерыв на кофе, можете отплатить тем же.
Угостить меня кофеOne-off · No account needed · Handled by Buy Me a Coffee