{
font-weight: bold;
font-family: LiberationSerif-Bold, serif;
}
em, i
{
font-family: LiberationSerif-Italic, serif;
}
@font-face
{
font-weight: normal;
font-style: normal;
font-family: LiberationSerif-Regular;
src: url(../Fonts/LiberationSerif-Regular.ttf);
}
@font-face
{
font-weight: bold;
font-style: normal;
font-family: LiberationSerif-Bold;
src: url(../Fonts/LiberationSerif-Bold.ttf);
}
@font-face
{
font-weight: normal;
font-style: italic;
font-family: LiberationSerif-Italic;
src: url(../Fonts/LiberationSerif-Italic.ttf);
}
====================
Приведенный выше файл CSS прошел валидацию успешно. (Да, вы можете скачать эту таблицу стилей, нажав кнопку Download и пользоваться ей, изменять различные компоненты при необходимости или скопировать отсюда. Вы ничего не нарушаете, это легально, ничего секретного.) Ссылка на онлайн-публикацию:
http://goo.gl/yF8la
____________
Как создаётся таблица стилей? Скачивается программа Notepad++. Приведенный выше текст можно скопировать и вставить в редактор. Сохранить введенный текст как таблицу CSS. Я не использую все пункты, включённые в эту таблицу, но мне это не мешает.
Что описывается внутри? На примере заголовка первого уровня (h1)
h1
{
text-align: center; ........ заголовок выравнивается по центру
page-break-after: avoid; ...... запрет на разрыв страницы после заголовка
page-break-inside: avoid; ..... запрет на разрыв страницы внутри заголовка
font-weight: normal; ..... тип шрифта – обычный
font-size: 1.56em; ...... размер шрифта по сравнению с основным текстом (в данном случае 156%)
line-height: 1.2em;
margin: 0;
padding: 0;
color: #000080; /*navy*/ .... цвет шрифта, в данном примере цвет navy
} ...... закрывающая фигурная скобка
При просмотре кода страницы заголовок будет выглядеть так:
<h1>Заголовок</h1>, а читатель увидит заголовок синего цвета, с выравниванием по центру страницы.
О единицах измерения: emсоответствует размеру используемого шрифта. К примеру, 2em соответствует удвоенному размеру шрифта. Если используется шрифт 12pt, то 2em будет соответственно 24pt; pt (point)– наименьшая единица измерения в типографском деле, соответствует 1/72 дюйма; px (pixels)– пиксель, точка на экране компьютера. Использование em рекомендовано, т.к. поддерживается масштабирование.
В процессе работы с книгой уже встроенную таблицу CSS можно корректировать. Допустимо использование нескольких таблиц в одной книге (в данном руководстве подключено две).
Все теоретические описания могут остаться пустым звуком, потому необходимо взять файл ePub и "разбираться" – просмотреть код, таблицу CSS в редакторе Sigil, многое становится простым и понятным.
Все ли проблемы решаются таким способом? Увы, нет. iBooks (программа чтения на устройствах Apple) не следует спецификациям CSS. Однако, Firefox, Safari и Adobe Digital Editions (ADE), и все ридеры на основе АDE (Sony Reader и Barnes & Noble Nook) работают с CSS.
Каждую таблицу стилей рекомендуется проверить валидатором, например здесь:
http://jigsaw.w3.org/css-validator/
или здесь http://validator.w3.org/
Ну и если речь зашла о валидаторах – онлайн-сервис для проверки готовой книги ePub:
http://validator.idpf.org/
-----------
Думаю, будет интересно ознакомиться с таблицей стилей от mattharrison – epub-css-starter-kit
https://github.com/mattharrison/epub-css-starter-kit/blob/master/css/base.css
Рекомендовано к прочтению (англ.) несколько страничек по форматированию электронных книг на сайте Dr. George Benthien
http://www.gbenthien.net/Kindle%20and%20EPUB/index.html
К странице Содержания
-=***=-
Встраивание шрифтов в ePub
Эпиграф:
abracadabra to
крибле-крабле-бумс…
Съешь ещё этих мягких французских булочек…
да выпей водки…
Значимость встраиваемых шрифтов.
На многих англоязычных ресурсах уже не один раз встречался с утверждением, что встраивать шрифты в книгу критически-необходимо, если речь идет об иностранных языках. When to embed fonts in ePub filesby Liza Daly:
http://blog.threepress.org/2009/09/16/when-to-embed-fonts-in-epub-files/
Пример отображения книги epub, в которую не встроены кириллические шрифты. Просмотр в Adobe® Digital Editions(попутно замечу, что данная программа у многих создателей книг является эталонной):
Последовательность действий для встраивания шрифтов:
1. Создайте новый файл epub
2. В отдельную папку скачайте и сохраните нужный шрифт (в примере использован шрифт Liberation Serif)
Добавление шрифтов normal, bold, italicв папку Fontsвнутри книги:
3. Добавление в книгу файла CSS (таблица стилей)
Далее продемонстрировано использование таблицы стилей и встроенных шрифтов для отображения форматирования текста в книге.
4. Проверяем, что таблица стилей и встроенные шрифты работают (у меня в CSS записано, что заголовки должны быть цвета "navy"):
Вот как Liz Castroописывает встраивание шрифтов в epub в публикации Embedding Fonts in EPUB-iPad, iPhone AND nook(april 12, 2011) by Liz Castro
http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-and.html
Первое: добавить шрифт в книгу обычным способом – дописав в начале CSS указание @font-face, что-то типа этого:
@font-face
{
font-family: Prophecy Script;
font-style: normal;
font-weight: normal;
src:url("Fonts/Prophecy_Script.ttf");
}
Это сделает шрифт доступным. Для применения шрифта к тексту надо дописать его использование к стилю отображения, например, параграфа вида letter (пример ниже).
p.letter
{
font-family: "Prophecy Script";
font-weight: normal;
font-style: normal;
font-size: 1em;
margin: 1em 0 0 0;
-webkit-hyphens:none;
}
Далее следует убедиться, что данный стиль действительно применяется в каком-то из файлов HTML книги:
<p class="letter">Warren Cty Ky March 11th</p>
Последний этап – добавить файл с названием com.apple.ibooks.display-options.xmlв папку META-INF (открыть книгу архиватором и добавить файл. В программе Sigil это не делается). Этот файл позволяет программе iBooksв устройствах Appleсообщить, что в книге встроены собственные шрифты. Файл можно создать в программе Notepad++
Всё содержимое:
<display_options>
<platform name="*">
<option name="specified-fonts">true</option>
</platform>
</display_options>
Решает ли встраивание шрифтов все проблемы? Конечно же нет.
– не все ридеры поддерживают чтение встроенных шрифтов;