87 символов · копируйте свободно
Символы псевдографики
Блок Unicode от U+2500 до U+257F содержит 128 символов, спроектированных так, чтобы стыковаться в рамки, таблицы, деревья и сетки, — тонкие, жирные, двойные, пунктирные и скруглённые линии, плюс все стыки, где эти толщины встречаются. Именно из них на самом деле сделаны интерфейс терминала, дерево каталогов и ASCII-таблица. Скопируйте любой символ ниже; рядом с каждым указаны его название Unicode и код, а группировка собирает вместе те элементы, которые нужны совместно.
Тонкие линии
Набор по умолчанию. Одиннадцать символов рисуют любую прямоугольную сетку, и каждый из них аккуратно стыкуется с остальными.
Жирные линии
Те же одиннадцать форм, но с большей толщиной. Сочетайте с тонкими линиями, чтобы выделить внешнюю рамку или выбранную строку.
Двойные линии
Два параллельных штриха. Классическая рамка эпохи DOS — до сих пор самый декоративный вариант в этом блоке.
Скруглённые углы
Дугообразные углы, смягчающие рамку из тонких линий. Замените ими ┌ ┐ └ ┘ — больше ничего менять не нужно.
Пунктирные линии
Тройной и четверной пунктир, тонкий и жирный. Пригодится для разделителя, который должен читаться как второстепенный.
Диагонали и половины
Косые линии для перечёркивания ячейки и полудлинные обрубки для концов линий, обрывающихся в середине ячейки.
Переходы тонкое-жирное
Стыки, где тонкая линия встречается с жирной. Именно они позволяют утолщить одну строку таблицы, не сломав соединения.
Переходы двойное-одинарное
Стыки между двойными и одинарными линиями — элементы, которые нужны, когда двойная внешняя рамка встречается с одинарными внутренними разделителями.
Нажмите на любой символ, чтобы скопировать его. Ничего не скачивается — это текстовые символы, а не изображения.
Блоки Unicode
- U+2500–U+257F Псевдографика
Как использовать Символы псевдографики
Всегда используйте моноширинный шрифт
Это правило, от которого зависит всё остальное. Символы псевдографики спроектированы под фиксированную ячейку, поэтому в пропорциональном шрифте вертикали расходятся по колонкам. JetBrains Mono, Menlo, Consolas, Cascadia Code и DejaVu Sans Mono хорошо отрисовывают этот блок.
Выберите одну толщину и придерживайтесь её
Тонкое стыкуется с тонким, жирное — с жирным. Смешивание без переходных элементов оставляет заметные разрывы там, где штрихи не сходятся. Если всё же нужна жирная внешняя рамка с тонкими внутренними разделителями, берите стыки из группы переходов тонкое-жирное.
Стройте сначала углы, затем края, затем стыки
Таблица — это четыре угла, два ряда краёв и пересечения между ними. Разместите сначала углы, а остальное выстроится механически — именно поэтому это легко генерировать в коде.
Задавайте line-height: 1 для сплошных рамок
Вертикальные штрихи прорисованы на всю высоту ячейки символа. Любой дополнительный межстрочный интервал создаёт разрыв между строками, так что рамка, которая выглядит сломанной, обычно просто нуждается в line-height: 1.
О «Символы псевдографики»
Блок Box Drawing — прямой потомок набора символов кодовой страницы IBM PC 437, который десятилетиями назад давал DOS-приложениям их рамки и меню задолго до того, как графика стала повсеместной. Unicode сохранил весь этот набор на позиции U+2500, и он до сих пор в постоянном использовании: границы в файловом менеджере терминала, ветви дерева каталогов, рамки вокруг таблицы в командной строке и сетки в играх на этом сайте — всё это нарисовано этими 128 символами.
Необычно продуманным этот блок делает системное покрытие всех стыков. Недостаточно иметь горизонтальную и вертикальную линию — нужна каждая комбинация того, что подходит к ячейке с каждой из четырёх сторон, для каждой толщины. Именно поэтому в блоке есть символы настолько специфичные, как «вниз тонкое и горизонталь жирное», — они существуют для того, чтобы таблица могла менять толщину штриха посередине, не оставляя ни единого разрыва в месте стыка.
Практическое ограничение — это шрифт. Эти глифы прорисованы так, чтобы касаться самых краёв своей ячейки, — тогда соседние ячейки соединяются в непрерывный штрих. Это работает только в моноширинном шрифте с line-height: 1. Добавьте тексту лишний межстрочный интервал — и между строками появятся горизонтальные щели; поставьте пропорциональный шрифт — и вертикали разъедутся. Почти любая проблема «псевдографика выглядит сломанной» сводится к одной из этих двух причин.
В блоке есть один намеренный пробел. Unicode кодирует тонкие и жирные диагонали и тонкий диагональный крест, но не двойную диагональ и не дуги жирной толщины, потому что в исходной кодовой странице их не было, а блок создавался ради совместимости, а не полноты. Если нужен жирный скруглённый угол — его не существует: четыре дуги на U+256D–U+2570 доступны только тонкой толщины.
Игры, нарисованные этими символами
Каждое игровое поле на этом сайте сделано из Unicode, а не из спрайтов. Эти игры используют символы, показанные выше.
Часто задаваемые вопросы
Почему мои символы псевдографики не выстраиваются в линию?
Почти всегда дело в шрифте. Эти глифы рассчитаны на ячейку фиксированной ширины, поэтому пропорциональный шрифт сдвигает вертикальные штрихи с колонки. Переключитесь на моноширинный шрифт вроде JetBrains Mono, Consolas или Menlo. Если по горизонтали рамка сходится, но между строками видны разрывы, задайте line-height: 1 — лишний межстрочный интервал разделяет вертикальные штрихи.
В чём разница между символами псевдографики и ASCII-артом?
ASCII-арт имитирует линии 128 символами ASCII — дефисами, вертикальными чертами и знаками плюс, — поэтому углы получаются приблизительными, а стыки заметно неровными. Символы псевдографики — это специально спроектированные глифы, которые точно сходятся на краю ячейки, давая непрерывный штрих. Это символы Unicode, а не ASCII, хотя эти два понятия часто путают.
Какие символы псевдографики нужны для простой таблицы?
Одиннадцать: четыре угла ┌ ┐ └ ┘, два края ─ │, четыре Т-образных стыка ├ ┤ ┬ ┴ и крест ┼. Из них одних строится любая прямоугольная сетка, какого бы размера она ни была.
Можно ли смешивать тонкие и жирные линии?
Да, но только через переходные символы. Жирная вертикаль, встречающая тонкую горизонталь, требует глифа, созданного именно для этого случая, например U+2542. Если соединить жирную линию с тонкой напрямую, без нужного элемента, получится заметный разрыв. Полный набор таких стыков — в группе «Переходы тонкое-жирное» выше.
Работают ли символы псевдографики на мобильных устройствах?
Они отображаются на любом современном телефоне — блок старый и поддерживается повсеместно. Загвоздка в том, что мобильные браузеры часто используют пропорциональный шрифт по умолчанию, так что оборачивайте символы в CSS-правило с моноширинным шрифтом, а не полагайтесь на настройки по умолчанию, иначе выравнивание сломается.
Есть ли в блоке псевдографики скруглённые углы?
Четыре, на позициях U+256D–U+2570, и только тонкой толщины. Подставьте их вместо ┌ ┐ └ ┘, чтобы смягчить рамку из тонких линий. Жирного или двойного аналога не существует — блок унаследовал свой репертуар от кодовой страницы 437, где таких символов не было.
Support the arcade
Нравятся игры?
UnicodeGames бесплатен, без рекламы и всегда таким останется. Если игра скрасила вам перерыв на кофе, можете отплатить тем же.
Угостить меня кофеOne-off · No account needed · Handled by Buy Me a Coffee