Изменить стиль страницы

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

Телефоны

iPhone 3GS 480×320 (3:2) (163 ppi)

iPhone 4 / iPod Touch 960×640 (3,5" 3:2) (326 ppi)

iPhone 5 / iPod Touch 1136×640 (4" 71:40) (326 ppi)

Samsung Galaxy Tab 2 7.0 (7"), 1024×600, (170 ppi)

Samsung Galaxy Tab 10.1 1280×800 (16:10) (149 ppi)

Samsung Galaxy Note 10.1 (10,1"), 1280×800 (149 ppi)

Motorola Xoom 1280×800 (16:10) (149 ppi)

Kobo eReader Touch 800×600 (4:3) (167 ppi)

Kobo Glo (6" e-Ink) 1024×768 (212 ppi)

Kobo Arc (7") 1280×800 (215 ppi)

Hanlin v.3+ (lBook v.3+) 600×800px e-ink 4/16 gray-scale (166 ppi)

iRiver Story 800×600 (4:3) (212 ppi)

Nook Simple Touch e-Ink 800×600 (4:3) (166 ppi)

Nook Color 1024×600 (5.12:3) (169 ppi)

Sony PRS505 / PRS600 / PRS700 (6") 800×600 (167 ppi)

Amazon Kindle 4 (e-Ink) 800×600 (4:3) (167 ppi)

Amazon Kindle 5 (6" e-Ink) 800×600 (4:3) (167 ppi)

Amazon Kindle Paperwhite (6" e-Ink) 1024×768 (212 ppi)

Amazon Kindle DX (9.7") 1200×824 (150 ppi)

Amazon Kindle Fire HD (7") 1280×800 (216 ppi)

Amazon Kindle Fire HD (8.9") 1920×1200 (254 ppi)

ASUS Transformer Pad Infinity (10,1") 1920×1200 (224 ppi)

Google Nexus 7 (7"), 1280×800, (216 ppi)

Google Nexus 10 (10,1") 2560×1600 пикселей (300 ppi) (16:10)

Archos 97 Titanium HD (9,7") 2048×1536 (264 ppi)

Chromebook Pixel (notebook 12.85") 2560×1700 multi-touch screen (239 ppi) (3:2)

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

-=***=-

Epub – что там внутри?

Далее будет приведено несколько скриншотов из программы-редактора Sigil.

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

При упрощённом объяснении ePub – это zip-контейнер, внутри которого есть файлы html (xhtml), файлы изображений, встроенные шрифты (если есть), подключённая таблица стилей CSS, дополнительные служебные файлы с информацией о том, в какой последовательности файлы должны демонстрироваться программой чтения.

Важно, чтобы внутри epub все файлы в названиях не содержали кириллицы, недопустимы пробелы в названиях файлов html, xhtml, jpeg, png. (Эти ошибки приводят к тому, что программы чтения просто не увидят данные файлы).

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

Любой текст в "теле" страницы, заключённый в

<!-- Произвольный текст -->
не будет виден читателю. Как правило, это используется для комментариев. В таблице стилей CSS комментарии помещаются внутрь
/*текст комментария*/
.

Что можно увидеть при просмотре кода:

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

Внутреннее содержимое книги ePub можно посмотреть другим способом – изменить расширение файла с epub на zip и открыть файл программой для работы с архивами (WinRAR или WinZIP, 7-zip). Обратное переименование восстановит книгу (бояться ничего не надо).

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

-=***=-

Таблица стилей (CSS) в ePub

Каскадные таблицы стилей CSS (Cascading Style Sheets) – первый стандарт стилей, объявленный консорциумом W3C.

CSS – это язык, содержащий набор свойств для определения внешнего вида документа.

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

Кратко: любой документ HTML состоит из нескольких основных разделов:

<?xml version="1.0" encoding ="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xml:lang="en">

<!-- пояснение о документе -->

<b>&lt;head&gt;</b> /т.н. &quot;голова&quot; документа/

   &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;application/xhtml+xml; charset=utf-8&quot;/&gt;

   &lt;!-- В этом разделе содержится информация о документе, которая не выводится на дисплей --&gt;

<b>&lt;/head&gt;</b> /закрывающий тег/

<b>&lt;body&gt;</b> /т.н. &quot;тело&quot; документа/

   &lt;!-- В этом разделе расположено содержание страницы, которое видит пользователь. --&gt;

<b>&lt;/body&gt;</b>

&lt;/html&gt;

Фактическое положение вещей таково, что можно создать прекрасно-форматированную книгу формата ePub используя всего несколько простых HTML тегов. Теги – это команды, которые обозначают, как отображать текст на дисплее. Как правило, теги парные (открывающий и закрывающий тег). Простой пример – тег параграфа

<b>&lt;p&gt;</b>
и закрывающий тег
<b>&lt;/p&gt;</b>.
Существуют также "самозакрывающиеся" теги, пример:
<b>&lt;br/&gt;</b>.
Несколько тегов для начального информирования.

<b>&lt;p&gt; … &lt;/p&gt;</b>
текст внутри этого тега формирует параграф.

<b>&lt;div&gt; … &lt;/div&gt;</b>
Этот тег представляет собой пустой контейнер, которому можно задавать определйнные правила, используя CSS. Тег
&lt;div class=&quot;…&quot;&gt;
часто используется для придания определенных правил форматирования для группы параграфов.

<

h1&gt; … &lt;/h1&gt;
(и заголовки меньшего уровня h2, h3, h4) Теги, используемые для заголовков. h1 рекомендуется использовать для названия всей книги.

Существуют специальные теги для обозначения полужирного шрифта

<b>&lt;b&gt;</b>
или
<b>&lt;strong&gt;</b>
, для курсива
<b>&lt;i&gt;</b>
или
<b>&lt;em&gt;</b>
.