HTML-теги — основа EPUB
Антон Гришин
Все элементы электронной книги располагаются внутри HTML-разметки. Это значит, что для простейшего форматирования текста в EPUB необходимо использовать подходящие HTML-теги. Например, не забывать размечать заголовки тегами <h> различного уровня, а выделения курсивом — тегами <em> или <i>. При экспорте из InDesign есть возможность настроить автоматическое присвоение различным элементам текста почти всех тегов. Но если этого не сделать, то высока вероятность того, что во многих читалках всё форматирование исчезнет и читатель увидит голый текст. Как этого избежать?
Как использовать теги
Для большинства тегов правило простое: если вы открыли тег, его нужно закрыть. Начальный тег абзаца выглядит так <p>, а финальный так </p>. При этом существуют одиночные теги, которые не нужно закрывать. Например, тег разрыва строки <br/> или линейки <hr/>.
Не стоит забывать про соподчинённость тегов. Например, тег курсива <em> может быть внутри тега абзаца <p>, но не наоборот. А сам <p> может быть только внутри <blockquote>, а не окружать его.
Чтобы во всём этом разобраться, достаточно изучить любое введение в HTML-разметку.
Разве теги не появятся сами?
Часть тегов действительно самостоятельно перейдёт в EPUB после экспорта из InDesign. Например, теги абзацев <p>, ссылок <a> и некоторые другие. Другую часть нужно настроить: для стилей заголовков (абзацев с заголовком) прописать конкретный уровень тега <h>, а для стилей символов с курсивом и полужирным — указать соответствующий тег экспорта.
Но некоторые теги придётся добавлять на этапе доработки EPUB после экспорта. Например, курсив и полужирный можно экспортировать с тегом, но вот полужирный курсив — нельзя. Придётся найти текст с таким локальным форматированием в <span> и автозаменой проставить теги <strong><em>...</em></strong>.
Или возьмём тег <blockquote>. Во многих читалках он по умолчанию настроен с отбивкой сверху и снизу абзаца, а также иногда со втяжкой и с уменьшенным кеглем. Он отлично подходит для эпиграфов, а также цитат отдельным блоком в основном тексте. На этапе доработки EPUB соответствующие абзацы можно поместить в тег <blockquote>, чтобы сохранить это выделение.
Основные теги
В таблице приведены основные теги, использующиеся в EPUB.
Как теги выглядят в вёрстке
Возьмём для примера следующую книгу.
Скриншот из редактора Sigil.
Слева — разметка текста тегами и стилями, справа — пример отображения в читалке EPUB.
На скриншоте видно, что каждый элемент текста размечен тем или иным тегом. И для каждого тега задан стиль (class), который описан в CSS. Если такой EPUB откроют в читалке, поддерживающей стили CSS, оформление текста будет примерно такое же, как справа на скриншоте. Но если этот же файл попадёт в читалку, игнорирующую стили и отображающую только теги, форматирование текста не исчезнет. Текст будет выглядеть немного по-другому, в зависимости от настроек оформления текста в конкретной читалке, но базовая разметка сохранится.
Зачем столько сложностей?
К сожалению, экспорт из InDesign в EPUB одной кнопкой не работает. Точнее, работает, но результат получается удручающий. Поэтому после экспорта файлы приходится дорабатывать, в том числе и в плане тегов. А чтобы ответить на вопрос «зачем», можно просто сказать, что по состоянию на лето 2023 года ни у одного коммерческого российского книжного сервиса нет читалки, которая полноценно поддерживала бы CSS в EPUB. Так что теги — вещь необходимая.
Статья впервые опубликована 27 июня 2023 года.
