Как работают стили CSS в EPUB
Часть 1. Стили текста
Антон Гришин
Каскадные таблицы стилей (CSS) применяются в вебе для оформления страниц. Страницы электронных книг в формате EPUB тоже можно и нужно оформлять с помощью CSS, потому что многие читалки поддерживают эту разметку, а отстающие рано или поздно подтянутся. В этой статье — подробное руководство по настройке CSS в файле EPUB и рекомендации, как адаптировать практически любой макет для хорошего отображения на экране смартфона или планшета.
CSS: зачем и как
Всё, что выходит за рамки базовой HTML-разметки в EPUB, потеряется в вашей книге, если не использовать стили. Практически в любой современной книге есть не только основной текст, заголовки, списки, курсивы и прочее, что может отображаться в читалках как угодно, но и такие элементы оформления, как цветной текст, отбивки, абзацы без красной строки и отступы между абзацами, буквицы и т.д. Как и при вёрстке стилями в InDesign, вы можете настроить определённое оформление для каждого стиля абзаца, заголовка, фрагмента текста внутри абзаца, а также иллюстраций и таблиц.
В любой книге в формате EPUB в папке Styles лежит файл .CSS, в котором описываются стили. В этом файле содержится информация о шрифтах, встроенных в EPUB через font-face, а также описание каждого стиля, используемого в книге. Интересно, что стили, примененные к тексту, могут и не описываться в .CSS, и тогда читалка сама решит, какое оформление будет у текста. И обратная ситуация: в файле .CSS может быть прописано больше стилей, чем используется в книге. Это может приводить к появлению ошибок, поэтому в редакторе Sigil есть полезный инструмент для очистки неиспользуемых стилей (Tools — Delete Unused Stylesheet Selectors).
Файл .CSS должен быть привязан к XHTML-файлу, содержащему текст и разметку. Внутри тега <head> должна стоять ссылка вида <link href="styles.css" rel="stylesheet" type="text/css"/>.
Где работает CSS
Поддержка CSS реализована в читалках большинства международных книжных сервисов — и в приложениях, и в читалках с электронными чернилами. Тип экрана, на котором будут читать электронную книгу, — это немаловажный фактор при настройке стилей элементов оформления. Экраны смартфонов и планшетов могут отображать любые цвета, не уступая по качеству и насыщенности цветов печатной полосе. Экраны читалок с электронными чернилами могут быть и чёрно-белыми, и цветными, при этом в передаче цвета их технические возможности пока что ограничены. Не стоит забывать и про опцию выбора фона страницы во многих читалках: на тёмном фоне элементы оформления должны смотреться так же хорошо, как на белом.
Вёрстка электронной книги тегами (то есть без использования стилей CSS) и тегами + CSS.
Читалка книжного сервиса Строки, версия 5.29.
Книга «Да, шеф!»
Среди российских книжных сервисов стили CSS поддерживают читалки Строк (iOS, Android) и Букмейта (iOS). При этом многие издательства продают электронные книги и напрямую со своих сайтов, так что пользователь сам выбирает, в какую читалку загрузить файл EPUB. В качестве примера грамотной работы с CSS могу порекомендовать электронные книги издательств Альпина, МИФ, Азбука и других.
Основные настройки абзаца в CSS
После экспорта из InDesign в файле .CSS стили абзаца будут описаны следующим образом.
p.text {
color: #000000;
font-family: "PT Sans", sans-serif;
font-size: 1em;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1.4;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
orphans: 1;
page-break-after: auto;
page-break-before: auto;
text-align: justify;
text-decoration: none;
text-indent: 6%;
text-transform: none;
widows: 1;
}
Этот набор параметров не является ни необходимым, ни исчерпывающим, но давайте посмотрим внимательнее на основные параметры и разберёмся, как правильно применять их в EPUB.
Цвет текста и подложки
color: #a1390a;
background-color: #046055;
Параметр color задаёт цвет текста абзаца или заголовка, а background-color — цвет подложки под текстом. Несколько рекомендаций по цветам из «Правил хорошего EPUB»:
-
В CSS необходимо использовать 6-символьную кодировку цвета. Например, #FF0000 для красного цвета.
-
Не следует задавать цвет для абзацев с основным текстом книги, по умолчанию будет использоваться черный цвет.
-
Помните, что многие ридеры с электронными чернилами не могут воспроизводить цвета. По этой причине не рекомендуем использовать очень светлые тона для цветного текста. И нужно следить за тем, чтобы контраст между цветом текста и цветом фона был достаточным.
Гарнитура
font-family: "PT Sans", sans-serif;
Этот параметр указывает, какая гарнитура должна применяться к тексту, а также тип шрифта: serif (с засечками, антиква), sans-serif (без засечек, гротеск), monospace (моноширинный). Если вы разобрались со всеми нюансами использования своих шрифтов в EPUB, то для добавления шрифта вам нужно добавить файлы начертаний в папку Fonts и с помощью font-face прописать в файле .CSS путь к этим начертаниям. Например:
@font-face {
font-family: "PT Sans";
font-style: normal;
font-weight: normal;
src: url("../Fonts/PT-Sans_Regular.woff");
}
Сделав это, вы сможете указать в стиле абзаца или заголовка гарнитуру, которую необходимо применить к стилю, в параметре font-family. И не забудьте указать тип шрифта!
Кегль
font-size: 1em;
Крупный размер шрифта для заголовков, обычный для основного текста, уменьшенный для эпиграфов, цитат и сносок — с CSS можно разгуляться! Несмотря на то, что InDesign при экспорте задаёт кегль в пикселях, то есть абсолютных величинах, в EPUB лучше использовать относительные em или проценты. Читатели очень ценят возможность менять размер шрифта в электронных книгах в формате EPUB, во всех читалках есть этот функционал, поэтому следует ориентироваться на эту базовую потребность читателей и в CSS. Оптимальный вариант — задавать кегль абзацев, которые можно считать основным текстом книги, в значении 1em или 100% и отстраивать другие размеры от него.
Кегль текстовых заголовков рядом с основным текстом лучше не делать больше 2em (не забывайте, что при увеличении кегля по всей книге заголовки тоже увеличатся и могут занять слишком много места на экране читалки). Если это «шмуцтитул» и заголовок занимает весь экран, можно экспериментировать с кеглем более свободно. Невидимая пользователю, но важная для читалок разметка заголовков тегами <h> в идеальном варианте сохранит свою соподчиненность через кегль заголовков разных уровней, хотя тут могут быть исключения.
При необходимости уменьшить кегль в эпиграфах, врезах, сносках также не следует забывать о размере основного текста. Кегль в 0,8–0,9em и останется читаемым, и отделит фрагмент от окружающего текста.
Здесь на одном экране — 4 разных размера шрифта. Для короткого заголовка можно использовать и больший кегль.
Читалка книжного сервиса Строки, версия 5.29.
Книга «Разговоры с таксистами о жизни и устройстве Вселенной».
Стиль шрифта
font-style: italic;
За этим не слишком понятным обозначением скрывается указание на прямое (normal), курсивное (italic) или наклонное (oblique) начертание. Если в шрифте есть отдельное курсивное или наклонное начертание, правильно встроенное через font-face, то оно применится к тексту с таким стилем. Если нет — читалки попробуют имитировать наклонность. Или если в читалке не применяются заложенные в EPUB шрифты, то по стилю шрифта она определит, что нужно подставить курсивное или наклонное начертание из своего шрифта.
Несмотря на то, что в стиле можно прописать курсивное начертание для всего текста, не стоит забывать про использование тегов курсивов <em> и <i>. Многие читалки всё ещё не поддерживают CSS, и курсив, указанный только в стиле, просто пропадёт.
Вариант шрифта
font-variant: small-caps;
Этот параметр открывает доступ к использованию в электронных книгах старой доброй капители (small-caps). В идеальном варианте капительное начертание заложено в шрифт, если же его там нет — читалка попробует имитировать капитель. Забегая далеко вперёд в тему продвинутого уровня CSS, не могу не рассказать о псевдоэлементе ::first-line, который применяет стиль к первой строке абзаца. И для капители это часто именно то, что нужно!
Использование пседоэлемента first-line: первая строка набрана капителью независимо от длины строки в разных кеглях.
Читалка книжного сервиса Строки, версия 5.29.
Жирность шрифта
font-weight: normal;
Здесь можно указать жирность шрифта в цифровом или текстовом обозначении. Самыми распространёнными являются normal и bold. Жирное начертание bold соответствует тегам <b> и <strong> и не должно их заменять — тут история такая же, как с курсивными начертаниями. Но для заголовков и других элементов текста настроить жирность бывает очень важно. И если вы добавили в EPUB больше одного начертания для жирного текста, вы сможете управлять этими начертаниями через font-weight.
Все возможные значения:
100 / Thin / Hairline
200 / Extra Light / Ultra Light
300 / Light
400 / Normal / Regular
500 / Medium
600 / Semi Bold / Demi Bold
700 / Bold
800 / Extra Bold / Ultra Bold
900 / Black / Heavy
950 / Extra Black / Ultra Black
Интерлиньяж
line-height: 1.4;
Межстрочный интервал можно настраивать исходя из ваших представлений о прекрасном в типографике. Правда, в настройках многих читалок есть возможность менять интерлиньяж, и тогда ваша красота может превратить во что-то иное. Не споря с классиками типографики, могу предложить использовать интерлиньяж основного текста в диапазоне значений 1.3–1.5, а заголовков — 1–1.2.
Отступы
margin-bottom: 0;
margin-left: 5%;
margin-right: 0;
margin-top: 12px;
Внешние отступы margin позволяют настроить расстояние от, в данном случае, абзаца или заголовка до других элементов. Значения здесь могут быть и абсолютными, и относительными.
На спусковой полосе можно использовать отступ сверху от края экрана до заголовка или первого абзаца в пикселях, настроив margin-top для соответствующего стиля текста. Небольшую отбивку вниз от заголовка до следующего заголовка или основного текста можно прописать в margin-bottom.
Если стоит задача отбить группу абзацев, например, эпиграф и подпись к эпиграфу, лучше применять настройку margin не для каждого абзаца, а для блокового элемента <div> или <blockquote> (последний распознают и читалки, не работающие со стилями). Тот же эпиграф можно отбить слева на 30–50% экрана, справа на несколько процентов, а также сверху и снизу. Кегль самого стиля абзаца эпиграфа хорошо бы уменьшить до 0,8–0,9em. По такой же логике можно оформлять многоабзацные врезы в основной текст. Если вставной элемент состоит всегда из одного абзаца, настроить отступы можно только для него.
Внешний отступ margin не следует путать с внутренним отступом padding. Отступ padding задаётся для абзацев, имеющих внешнюю границу — например, врезов в рамке или на подложке.
Выключка
text-align: justify;
Абзацам и заголовкам можно задавать через этот параметр выключку влево (left), вправо (right), по центру (center), а также по ширине для основных абзацев текста (justify).
Подчёркивание и перечёркивание текста
text-decoration: underline;
Этот параметр позволяет подчеркнуть (underline) и перечеркнуть (line-through) текст, а также добавить линию над текстом (overline). Тип, цвет и толщину линии можно настраивать. Линия может быть обычной (solid), двойной (double), точечной (dotted), пунктирной (dashed) и волнистой (wavy). Для тонкой настройки линий пригодятся параметры text-decoration-color, text-decoration-line, text-decoration-style, text-decoration-thickness.
Абзацный отступ
text-indent: 6%;
Абзацный отступ, или красную строку, можно прописывать в этом параметре и в абсолютных, и в относительных величинах. Нужно помнить, что ваш EPUB могут открыть в читалках и на маленьком экране смартфона, и на большом экране планшета. Абсолютные значения в пикселях могут создать впечатление слишком большого абзацного отступа на узких экранах и недостаточного — на больших экранах. Поэтому рекомендую указывать здесь относительное значение в процентах от экрана (классики типографики, возможно, даже одобрили бы это).
Трансформация текста
text-transform: uppercase;
Этот параметр завязан на особенности типографики различных языков, включая неевропейские. Такие значения, как все прописные (uppercase), все строчные (lowercase), а также заглавные в начале слов (capitalize) для русского языка нужно использовать с осторожностью. Например, плохой практикой можно назвать набор заголовков прописными буквами именно в рукописи, однако если дизайн этого требует, все символы можно «поднять» значением uppercase.
Локальное форматирование в CSS
Опасный, но полезный <span>
Любое локальное форматирование в InDesign, а также стили символов после экспорта в EPUB будет оформлено через тег <span>. Это может создать дополнительный «мусор» в коде разметки, но если вам нужно дополнительно оформить не весь текст абзаца, а отдельные слова, <span> будет полезен.
В стиле, помещённом в <span>, можно задать локальное форматирование для нескольких слов или символов через упомянутые выше параметры. То есть выделить слово цветом, подчеркнуть или перечеркнуть и даже указать другую гарнитуру. От чего точно стоит предостеречь — от настройки выделения курсивом и жирным через <span>. Из макета в InDesign значения italic и bold перейдут именно в виде локального форматирования, если не озаботиться указанием соответствующего тега в настройках экспорта стиля символа. И — могут пропасть в читалках, не поддерживающих CSS.
Буквица
Для использования буквицы нужно поработать и с локальным форматированием первой буквы абзаца (увеличить кегль и настроить отступы padding), и со стилем всего абзаца (убрать абзацный отступ). Можно красить буквицы в любые цвета, можно делать цветные подложки для них. Текстовые буквицы в читалках, не работающих со стилями, могут превратиться в обычную первую букву абзаца, поэтому не стоит ставить лишние пробелы после этой буквы.
Разрядка
Такой классический печатный способ выделения текста, как разрядка, в современных книгах используется чаще в декоративных целях. Точно не стоит ставить лишние пробелы внутри слова, лучше используйте параметр letter-spacing и значение в районе 1px.
***
Надеюсь, что это руководство по CSS в EPUB поможет разобраться в этой новой для многих верстальщиков теме и вдохновит на использование всех возможностей оформления электронных книг, которое может быть ничуть не хуже хорошей вёрстки «под печать». В следующей части поговорим про использование возможностей CSS для вёрстки иллюстраций, таблиц и такие сложные материи, как псевдоэлементы и маски стилей.
Статья впервые опубликована 6 мая 2024 года.
