Pull to refresh

Использование OpenType в Веб-Типографике

Reading time 4 min
Views 1.3K

Идея


Недавно пришла в голову такая идея: почему OpenType не поддерживается напрямую в современных браузерах и как получить текст, восприимчивый к OpenType фичам но не являющийся в то же время картинкой? Под катом — мое решение этой задачи.

Для начала поясню что же такое OpenType и зачем он понадобился. По сути дела, ОТ — это технология, позволяющая поместить в обычный шрифт большое количество дополнительной информации. Например, можно добавлять альтернативные начертания для букв или цифр, определять лигатуры, делать «малые заглавные» буквы (капитель), ну и много чего еще. Причем, к сожалению, при обычной HTML верстке, большинство ОТ-фич задать нельзя, а браузеры даже те, что есть (например капитель — small caps ) поддерживают неправильно. Тем самым, в веб-типографике остается некий «вакуум», или поле для деятельности.

Использование ОТ в самом тексте страницы на данный момент представляется мне плохой идеей. Во-первых, мало кто из пользователей имеет на компьютере шрифты, богатые ОТ-фичами. Во-вторых, непонятно как поисковые системы, например, будут распознавать все новые буквы — ведь если на странице вместо букв f и i стоит лигатура fi, поисковой системе нужно будет откуда-то узнать что это действительно лигатура. (Напомню что написать просто две буквы рядом и пометить блок как использующий лигатуры в HTML/CSS пока невозможно.)

Я решил выбрать цель поскромнее — создание заголовков. Для этого я обозначил примерно следующие требования:
  • Заголовки должны использовать тот функционал ОТ, который я (пользователь) считаю нужным
  • Заголовки должны использовать мой шрифт, а не шрифт пользователя, даже если у пользователя нет этого шрифта в системе
  • Заголовки должны хорошо печататься и работать с функцией zoom браузера
  • Все замены обычной типографической подстановки должны работать (например (с) на ©)

Реализация


Для реализации я выбрал технологию SVG, и тем самым отсек большинство пользователей — тех, кто использует IE. Поскольку разработчики IE никаких подвижек в плане SVG не делают, для этого браузера просто выводится текст. Работает же это пока под Firefox и Opera, и хотя интернет продолжает кормить нас слухами что SVG в IE не за горами, пока, увы, приходиться делать fallback. А теперь собственно технические детали.

Алгоритм рендеринга текста с ОТ фичами в SVG прост: нужно взять исходный текст, применить к нему все нужные ОТ фичи (включая кернинг, конечно же), перевести в векторный формат и записать его как SVG. А потом просто показывать пользователям.

Для того, чтобы получить «начинку» ОТ файла, я написал свой парсер для OTF/TTF файлов. Парсер я написал как пару XML+XQuery которая на выходе сгенерировала C# код со всеми ОТ структурами, которые описаны в официальной спецификации. Полученная библиотечка просто «воткнулась» в мое ASP.NET приложение.

Имея у себя парсер ОТ, я написал следующую часть системы: программу, которая берет текст, размеченный специальной разметкой ОТ (разметку придумывал сам, т.к. ничего аналогичного не нашел), и «применяет» все фичи к переданному ей тексту. Конечно весь функционал я не покрыл, т.к. это задача не одного дня, а решение хотелось получить быстро. Вот приблизительный список фич, для которых я сделал поддержку (ссылки ведут в Википедию):

Далее, написал простенький код, который берет трансформированный текст и превращает его в SVG. Собственно код для вытаскивания векторных данных я не писал — воспользовался готовым объектом FormattedText из .NET 3.0 который помимо того что перевел текст в векторные формы, так еще и применил кернинг (правильное расстояние между буквами), тем самым освободив меня от собственноручной его реализации.

Последний штрих — это помещение результата на страницу ASP.NET и создание интерфейса для использования. Для того, чтобы поисковые системы правильно находили заголовки, я добавляю в страницу как ссылку на SVG-файл, так и невидимый (display: none) заголовок в обычном HTML. Он же используется и для показа заголовка в браузерах вроде IE.

Обсуждение


Для того, чтобы показать результаты, я вывесил тестовую страничку. Сразу скажу — там достаточно сыроватая версия кода, и я все еще доделываю парсер, т.к. на данный момент он не умеет парсить абслолютно все ОТ файлы (у меня достаточно большой сампл для тестирования). А еще, моя система пока не умеет строить файлы из текста, в котором используется более одной гарнитуры — достаточно серьезный недостаток, который, к сожалению, непонятно как устанить без написания своего сборщика векторных данных.

Главный недостаток моего подхода в целом — то, что все это не работает в IE. Другой недостаток — то, что это написано на C# под .NET 3.0 и тем самым не очень полезно для разработчиков, чей сервер использует, например, Apache. Хотя с другой стороны, сам парсер ОТ (это самая трудоемкая часть работы) был написан не на C# а на XML, так что портировать ее для другой системы не так уж сложно. Просто тогда придется еще и писать код, который сделает векторный рендеринг ОТ-текста и создаст из него SVG-файл, т.к. на данный момент я полагаюсь на специфический функционал .NET.

Одной из нерешенных проблем остается рендеринг SVG в Google Chrome а также в IE с плагином от Adobe. Я подозреваю что проблема в том, что эти браузеры не могут распознать размер файла просто его прочитав и им нужно «помочь». Если так, то этот недостаток будет исправлен в ближайшем будущем.

Update: пофиксил для Chrome и IE.

И вот еще один disclaimer: я не типограф, поэтому использую слова вроде «шрифт» вместо «гарнитура», и возможно не совсем тонко оперирую типографическими терминами, за что прошу сообщество меня простить.
Tags:
Hubs:
+25
Comments 38
Comments Comments 38

Articles