Руководство по созданию книг в формате ePub 2.0

Приложение работает для браузеров Chrome, Internet Explorer (10 выше), Firefox (15 и выше),. Под операционные платформы Windows, Linux and MacOS X.

UPD: При тестировании в браузере Mozilla Firefox – увы, кодировка сбита... В Chrome работает без нареканий, IE 10 мной не проверялся.

Возможности: чтение ePub, который уже скачан на Ваш компьютер.

Здесь нельзя настроить фон, сменить шрифт и т.п. Доступно только управление размером шрифта, вызов Оглавления (странички Содержания). Листание страниц – на клавиатуре стрелками влево – вправо, кликом мышки по левой или правой части экрана. Вызов настроек – клик по центру экрана.

Зачем там кнопка закладок? Ну, запомнить место в книге, на котором остановился при чтении. Работает ли это – я не проверял.

Первые впечатления очень приятные. Добавил к себе в Хром на панель закладок. И Вам советую.

______________

На сайте Book on the Move ("Книга в движении") есть две дополнительные публикации:

Как читать ePub на iPhone, iPad, Apple MacBook?

Укороченная ссылка на страницу: http://goo.gl/w5Mjq

Как читать ePub на смартфонах и планшетах Android

Укороченная ссылка: http://goo.gl/8xcke

К странице Содержания

~=***=~

Приложение 1: примеры форматирования

На примере фотографии автора: демонстрация встраивания картинки в текст.

В описание изображения вставлена запись class="left-float" (это можно просмотреть в коде страницы, code view редактора Sigil).

Что из этого получилось рекомендуется просмотреть в разных программах и на разных ридерах. Картинка слева и текст справа отобразились у меня только в EpubReaderдля Firefox, в самом редакторе Sigil и в эталонной программе Azardiна большом ПК. На планшете (OS Android) CoolReader, FBReader, Moon + Reader, Mantano Ebook Reader Lite и другие программы отцентрировали рисунок и ниже отобразили текст. Отсюда можно сделать простой вывод, что усилия потрачены впустую. В файле PDF будет точное форматирование рисунка и текста.

– =-=-=-=-=-

Демонстрационный пример 2:отображение заголовков различного уровня (h1-h6). Ниже будут приведены образцы заголовков и в разных программах просмотра можно протестировать способность точно выполнять правила, прописанные в таблице стилей CSS. (Внимание: большая часть примеров информативна только в книге формата ePub. В формате fb2 Вы не увидите разницу размеров шрифта, цвета и проч.)

Заголовок 1 (font-size: 1.56em)

Заголовок 2 (font-size: 1.40em)

Заголовок 3 (font-size: 1.20em)

Заголовок 4 (font-size: 1.22em)

Заголовок 5 (font-size: 18px)

Заголовок 6 (font-size: 18px)

________________

Обычный текст (без отступа от левого края – text-indent: 0;).

Я встречал медиаридеры, которые отображали только заголовки h1-h4. Как будет показан цвет заголовка, если программа чтения в ридере поддерживает CSS частично или напрочь игнорирует? Скорее всего, зелёный цвет станет серым или чёрным. Если же в настройках выбран фон серого цвета, то читатель может вовсе ничего не увидеть. Ну и не будем забывать о ридерах e-ink, которые показывают 8-16 оттенков серого цвета.

(Текст с отступом 1em). Ранее я собирал тестовый файл ePub с примерами различного форматирования текста и графики. Далее просматривал файл в разных программах чтения и на разных устройствах. Это очень наглядно, попутно я убедился, что указание размера шрифтов (и отступов, полей) желательно прописывать в CSS в em, а не в пикселях px. Кстати, при генерации Оглавления необходимо снять "галочки" напротив заголовков, которые в Оглавление включать не надо. И ещё раз я рекомендую просмотреть код данной странички в редакторе Sigil.

(Текст с отступом 2em). Да, 17.02.2013 вышла новая версия Sigil 0.7.0, в которой есть определённые изменения, которые в данном руководстве не описаны. Clips можно открыть на отдельной панели, вставлять их стало удобнее. Появился режим Preview (предпросмотр, F10) и можно видеть не только просмотр и редактирование кода, но и мгновенные изменения вида текста на отдельной панели справа.

Увеличенный текст с использованием тега <big> </big>. Увеличенный текст с использованием тега <big> </big> дважды. (в формате fb2 это не отображается.)

Полужирный текст (Bold)и текст курсивом (Italic).

Выделение текста другим цветом (Navy)(это увидят не на всех устройствах).

Примеры символов: « » § ¶ † & < > © ® ™ -> • ° - : ± x 1/4 1/2 3/4 lb € (напечатано примерно 25 знаков).

Демонстрация встраивания иллюстраций.

( Примечание: Эта демонстрация наглядна только в книге формата ePub. В файле pdf изображения будут выглядеть точно так, как намечено.)

Для примера взят файл png 150x150pxс QR-кодом – (закодирована ссылка на страничку с информацией об этом Руководстве).

Первый пример: img внутри тега параграфа (в норме изображение должно быть у левого края страницы).

Второй пример: тот же файл заключен в контейнер <div>(изображение по центру).

Третий пример: файл png 780x120pxвнутри тега параграфа (в норме на узком дисплее и на среднем экране около 600 px, портретный режим, изображение должно занять всю ширину страницы).

Тот же файл png внутри контейнера <div> (изображение по центру страницы, но отличия Вы увидите только на дисплее с шириной не менее 600 px и если программа чтения тщательно следует записям в CSS.)