![Как я запрограммировала собственный рукописный шрифт - 1 Как я запрограммировала собственный рукописный шрифт - 1](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift.png)
У меня нередко бывает, что я решу не увлекаться слишком сильно какой-то затеей, но в итоге всё равно в неё погружаюсь. Так было и на этот раз.
Недавно я создала на JavaScript собственный блочный шрифт, решив, что запрограммировать слитное рукописное письмо будет слишком сложно. Но не прошло и двух месяцев, как вот я здесь и готова рассказать о созданном мной механизме слитного письма. Пожалуй, в этом есть свой урок, но мы в его смысл углубляться не станем.
▍ Блочный шрифт
Предыдущая моя статья (англ.) была посвящена разработке печатной версии алфавита. Если коротко, то реализовала я его так:
- Создала код для определения ключевых точек на пути написания каждой буквы (~10 точек на букву).
- Сгладила эти пути с помощью алгоритма Чайкина.
- Преобразовала пути в контуры букв с переменной толщиной.
- Отрисовала полученные контуры с помощью библиотеки p5js.
Вот, что в итоге получилось:
![Как я запрограммировала собственный рукописный шрифт - 2 Как я запрограммировала собственный рукописный шрифт - 2](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-2.png)
Пути написания букв я определяла вручную, прописывая и подгоняя их позиции в коде, пока буквы не будут выглядеть нужным образом. Когда же дело коснулось программирования слитного письма, я упростила этот процесс.
▍ Дизайн букв
Для простоты работы я создала в редакторе p5js инструмент, упрощающий вывод ключевых точек в путях.
Он показывает образец буквы (для понимания масштаба и контекста) рядом с областью, в которой нужно построить новую букву. Само же построение происходит в несколько шагов:
- Кликами мыши отмечаются ключевые точки пути, который принимает форму кривой Чайкина.
- Нажатием
p
происходит переход в режим редактирования. - Точки поочерёдно перетаскиваются в нужные позиции.
- Нажатием «Ввод» готовый путь выводится в консоль.
Я создала для каждой буквы по 2-3 варианта.
![Как я запрограммировала собственный рукописный шрифт - 3 Как я запрограммировала собственный рукописный шрифт - 3](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-3.gif)
Итоговый путь написания выглядит так:
[{x:0.7,y:22.5},{x:8.2,y:18.1},{x:8.9,y:11.2},{x:3.7,y:11.4},{x:1.7,y:18.9},{x:8.4,y:22.4},{x:17.7,y:22.0}]
Я хотела использовать в качестве ориентира собственный рукописный шрифт, поэтому записала ряд примеров прописных и заглавных букв, изображение которых загрузила напрямую в инструмент построения букв для трассировки.
Клавиши w/a/s/d используются для размещения изображения в нужной точке, а r/e — для его приближения или отдаления. Размытая e
на изображении выше выступает образцом.
![Как я запрограммировала собственный рукописный шрифт - 4 Как я запрограммировала собственный рукописный шрифт - 4](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-4.jpg)
Числа на этом листе бумаги представляют координаты x
и y
, обеспечивающие попадание образца в окно создания буквы.
После разметки всех путей, их выравнивания и преобразования в контуры с переменной толщиной (подробнее об этом в прошлой статье), отдельные буквы получились такими:
![Как я запрограммировала собственный рукописный шрифт - 5 Как я запрограммировала собственный рукописный шрифт - 5](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-5.png)
▍ Соединение букв
Иногда соединять между собой буквы легко — достаточно просто перейти сразу от одного пути ключевых точек к следующему, после чего алгоритм Чайкина разом их все объединит. Но некоторые пары букв связывать проблематично.
Возьмём, к примеру, пару na
. На изображении ниже красным обозначена последняя точка написания n
, а зелёным — первая точка a
. Первая находится внизу, а вторая вверху, в результате чего объединяющая линия проходит по диагонали через a
, делая её похожей на e
.
Ещё один пример. В паре ti
буква t
заканчивается как раз над базовой линией, и написание i
начинается оттуда, создавая неестественный выступ.
![Как я запрограммировала собственный рукописный шрифт - 6 Как я запрограммировала собственный рукописный шрифт - 6](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-6.png)
Чтобы исправить эти нюансы, в первом случае можно добавить в начало a
дополнительную точку, а во втором удалить две последние точки из t
.
![Как я запрограммировала собственный рукописный шрифт - 7 Как я запрограммировала собственный рукописный шрифт - 7](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-7.png)
Но такое изменение букв подойдёт не для всех сценариев.
Например, если a
находится в начале слова, дополнительная точка приведёт к появлению лишнего хвоста, а если перед a
будет идти w
, то получится линия, проходящая через a
иначе. Что касается t
, то в случае перехода в k
она деформируется.
![Как я запрограммировала собственный рукописный шрифт - 8 Как я запрограммировала собственный рукописный шрифт - 8](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-8.png)
Точки в начале и конце контуров букв должны менять своё положение в зависимости от того, какая буква идёт следующей.
Сначала я пробовала выделить конкретные «проблемные» пары и отдельно прописать для них правила, но в итоге решила этот вопрос иначе, добавив в начало и конец каждого пути одно число, определяющее один из четырёх возможных случаев:
- Невозможность соединения со следующей буквой (0).
- Соединение в районе базовой линии (1).
- Соединение чуть выше базовой линии (2).
- Соединение в районе x-height (3)
Вот несколько примеров:
![Как я запрограммировала собственный рукописный шрифт - 9 Как я запрограммировала собственный рукописный шрифт - 9](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-9.png)
![Как я запрограммировала собственный рукописный шрифт - 10 Как я запрограммировала собственный рукописный шрифт - 10](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-10.png)
Ниже показано, как теперь выглядит путь написания каждой буквы. Обратите внимание на цифры в начале и конце:
[0,{x:12.2,y:13.2},{x:13.5,y:11.0},{x:6.2,y:8.4},{x:1.1,y:13.0},{x:1.8,y:19.0},{x:7.0,y:23.4},{x:15.2,y:23.6},{x:18.4,y:22.1},1],
Возможные соединения всех пар букв я проверила таким образом:
![Как я запрограммировала собственный рукописный шрифт - 11 Как я запрограммировала собственный рукописный шрифт - 11](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-11.png)
Здесь также видны некоторые отклонения, вызванные наличием у каждой буквы нескольких путей и их редактированием в зависимости от того, какая буква идёт следующей. В идеале для каждой буквы у меня должно было получиться не менее 5-6 вариантов путей написания, но я стремилась к балансу, чтобы не раздувать размер файла.
▍ Создание слов
При создании слова:
- Для каждой буквы из 2-3 вариантов выбирается базовый путь.
- Информация о концах пути передаётся в смежные буквы (изначально должны быть выбраны все пути букв, поскольку в некоторых случаях разные их варианты для одной и той же буквы имеют разные конечные точки).
- Смежные базовые пути сонастраиваются. Например, если высота предыдущей буквы равна 2, из начала этого пути удаляется одна точка, или если стартовая высота следующей буквы равна 1, в определённое место добавляется дополнительная точка.
Функции корректировки букв порой получаются сложными. Вот пример для буквы q
:
// ip = путь
// pc = информация о конце пути предыдущей буквы
// nc = информация о начале следующей буквы
// n = индекс пути, выбранного для этой буквы
adjust: (ip, pc, nc, n) => {
// Случайным образом добавляет в конец разрыв, равный 70% этой буквы.
if (rand() < 0.7 ) ip.splice(-1, 1, 0);
// Если из 4 возможных вариантов для этого пути был выбран [2],
if (n < 2) {
// а предыдущая буква заканчивается на 3, заменить первые две точки на другую точку.
if (pc == 3) ip.splice(1, 2, {x:10,y:12});
// В противном случае, если это не 0, добавить точку в начало.
else if (pc > 0) ip.splice(1, 0, {x:10,y:20});
}
// Если между этим символом и следующим нет разрыва (0),
if (nc > 0 && ip[ip.length-1] != 0){
// заменить последние две точки другой точкой.
ip.splice(-3, 2, {x:16,y:34})
}
}
Но зачастую они откровенно короткие. Например, вот функция для буквы n
:
adjust: (ip, pc, nc) => {
// Если следующая буква начнётся с 3, на выбор создать разрыв или переместить последнюю точку.
if (nc == 3) rand() < 0.3 ? ip.splice(-1, 1, 0) : ip.splice(-2, 1, {x:17,y:23.8})
}
Затем базовые пути всех букв объединяются. При этом программа игнорирует 1,2 и 3 в их путях, но при встрече 0 создаёт разрыв, начиная новый путь.
После прорисовки этих путей, их преобразования в контуры с переменной толщиной и внесения некоторого дрожания точек с помощью шума Перлина, получился такой рукописный шрифт:
![Как я запрограммировала собственный рукописный шрифт - 12 Как я запрограммировала собственный рукописный шрифт - 12](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-12.png)
Забавы ради приведу для сравнения два текста: один, полученный программным путём на плоттере, и второй написанный мной вручную.
![Как я запрограммировала собственный рукописный шрифт - 13 Как я запрограммировала собственный рукописный шрифт - 13](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-13.jpg)
▍ Сколько он весит?
При создании блочного шрифта код для обработки букв составил 9,7 КБ. В случае же рукописного после прогона через минификатор сейчас он весит 26,1 КБ.
Так получилось в основном из-за присутствия у каждой буквы нескольких вариантов путей, а также функции для корректировки крайних точек соседних букв. Но мне удалось сэкономить. Уверена, что можно добиться ещё большей экономии — хоть я и не профессиональный программист, но кое-какие идеи у меня есть.
Например, сейчас буквы построены на основе предустановленного размера шрифта 20 и последующего изменения этого размера. В итоге множество точек определены как, например x: 14.5
. Если же сменить базовый размер шрифта на 200, то точку можно будет определить как 145, удалив один символ (десятичный разделитель). Это изменение нужно вносить осторожно, так что пока я его отложила.
▍ Как я всё это использую?
Основная цель — это заголовки, подписи и заметки на чертежах, с которыми я работала. Но мне также очень нравится просто играться с самим текстом.
Одно из главных преимуществ использования запрограммированных путей написания текста вместо шрифта в том, что их можно корректировать — например, изменять положение букв, толщину отдельных из них и так далее.
![Как я запрограммировала собственный рукописный шрифт - 14 Как я запрограммировала собственный рукописный шрифт - 14](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-14.png)
![Как я запрограммировала собственный рукописный шрифт - 15 Как я запрограммировала собственный рукописный шрифт - 15](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-15.png)
![Как я запрограммировала собственный рукописный шрифт - 16 Как я запрограммировала собственный рукописный шрифт - 16](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-16.png)
![Как я запрограммировала собственный рукописный шрифт - 17 Как я запрограммировала собственный рукописный шрифт - 17](https://www.pvsm.ru/images/2024/05/25/kak-ya-zaprogrammirovala-sobstvennyi-rukopisnyi-shrift-17.png)
Следующим делом я планирую встроить этот рукописный шрифт в те самые чертежи, но ещё я определённо хочу создать что-то для самого текста, так как он мне очень нравится, и здесь есть ещё масса возможностей.
Автор: Дмитрий Брайт