«Ща будет шрифт»: история одного русского embedded‑шрифта

от автора

Фото из первых тестов

Фото из первых тестов

Никогда не думал, что программированием можно увлечься, но около года назад я узнал про существование микроконтроллеров — и тут началось.

«Мне нужен шрифт, причём срочно!» — так я подумал спустя полгода. В сумбурном поиске я попробовал много вариантов, приводивших к систематическому разочарованию. Спустя ещё пару месяцев этот вопрос начал тормозить моё обучение и вводить в депрессию.

Зачем

  1. Я обычный пользователь и не могу смотреть на моноширинные шрифты — кровь из глаз

  2. То, что я находил требует значительной переработки

  3. Я не шрифтовик, нужна хорошая точка отправления

  4. Перевод вектора в растр на низком разрешении крайне плохая идея, всё будет кривое

Старый телефон — спасенье

Когда‑то у меня был Nokia 3310. Я хорошо помнил этот экран и шрифт, то, как я вглядывался в эти пиксели, пытаясь понять, почему буква «у» такая кривая, а «А» странная (я не помню, почему именно эти буквы вызывали странные чувства). Но сейчас, понимая ограничения и глядя на свой дисплей 128×64 пикселя, понимаешь, насколько это была хорошая работа.

Так выглядит собранный макет на базе ESP32-S2, справа Nokia 2100

Так выглядит собранный макет на базе ESP32-S2, справа Nokia 2100

Готовые библиотеки

NokjaOriginalSmallBold — прекрасное решение, именно его мне хотелось увидеть на дисплее, но перевести его в растр программными средствами я так и не смог. Кроме вектора, второй подвох — это только одно начертание.

nokia-3310-fonts — готовая библиотека, также была использована как точка отсчёта. Очень много осталось без изменений. Автор Přemysl Eric Janouch отрисовал 3 начертания, но, увы, все на английском языке. Ссылка.

Боже, как это редактировать

Постепенно перешёл к попыткам отрисовать шрифт по пикселям. Когда опыта нет, перебор неподходящих готовых решений (способов перевода в растр) постепенно приводит к депрессии, поэтому отрисовка казалась разумным решением, да и до сих пор кажется.

Конечно, я искал редакторы, но они приводили в ужас — не только интерфейсом, но и многообразием неподходящих. Больше всего мне понравился редактор matrixFont. На момент начала работы я не понял, как им пользоваться, а главное — использовать имеющиеся чужие наработки. Статья.

Первый блин

Помучавшись, мне удалось создать редактор на JavaScript — конечно, нейросетью, за 100 500 итераций. Я вообще не понимал, что делаю, но надо.

Самодельный редактор в браузере

Самодельный редактор в браузере

В процессе я столкнулся со сложностями: массив, в который были записаны буквы, был 8-битным и 8-строковым. Соответственно, русская буква «Щ» без доработок напильником в него не влезла, как и буквы «Й», «Ё» из‑за верхних выносных элементов. И тогда я не понимал этой проблемы. Ну а в Си изменить массив — это попахивает переписыванием проекта: заголовочный файл, сам массив, метод отрисовки. Да ладно проект, у меня снова нет редактора, и теперь было понятно, что в массиве что‑то не так.

// Часть исходного массива с буквой «Щ» (уже исправленный массив){  9, 10, { 0x0000, 0x0000, 0xDB00, 0xDB00, 0xDB00, 0xDB00, 0xDB00, 0xDB00, 0xFF80, 0x0080 } },// Таже часть в двоичном виде (c пробелами для наглядности){  9, 10, {                 // 9 и 10 - в десятичном виде, хранят ширину буквы и отступ0 0 0 0 0 0 0 0 0 0000000,0 0 0 0 0 0 0 0 0 0000000,1 1 0 1 1 0 1 1 0 0000000,1 1 0 1 1 0 1 1 0 0000000,1 1 0 1 1 0 1 1 0 0000000,1 1 0 1 1 0 1 1 0 0000000,1 1 0 1 1 0 1 1 0 0000000,1 1 0 1 1 0 1 1 0 0000000,1 1 1 1 1 1 1 1 1 0000000,0 0 0 0 0 0 0 0 1 0000000}}, // Кто увидел букву Щ?

Первый запуск шрифта был на STM32F103, и всё шло отлично, пока я не увидел отзеркаленную «Щ» хвостом вперёд 🙂

Итог

Спустя какое‑то время я вернулся к идее. Расширил структуры и работал со шрифтом уже в локальном сервере на Си — чтобы проще парсить массив и отдавать в браузер для визуализации. Купил на Авито Nokia 2100 и отрисовал шрифт.

Nokia 2100 — в процессе отрисовки

Nokia 2100 — в процессе отрисовки

Сразу скажу: то, что я отрисовал, мне не понравилось. Некоторые русские буквы были сжаты по ширине, и я корректировал их, несколько искажая ритм.

Вывод в эмулятор дисплея — браузер ПК

Вывод в эмулятор дисплея — браузер ПК
Вывод на крупном дисплее, с большой плотностью пикселей (маленький шрифт уже плохо видно)

Вывод на крупном дисплее, с большой плотностью пикселей (маленький шрифт уже плохо видно)

В итоге получился вполне рабочий шрифт, чем я и хочу поделиться. А если кому-то интересны исходный массив и мои кривые инструменты, то пишите в комментарии я подумаю как их привести в божеский вид и выложить.

Итоговый шрифт можно скачать на GitHub

ссылка на оригинал статьи https://habr.com/ru/articles/1038900/