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

Для начального этапа этих нескольких сведений вполне достаточно. Я уверен, что если появится интерес, читатель воспользуется поиском и прочитает чуть больше, чем описано экспресс-методом.

____________

Каскадные таблицы стилей (Cascading Style Sheets, CSS) позволяют хранить цвет, размеры текста и другие параметры в стилях. Стилем называется набор правил форматирования, который применяется к элементу документа, чтобы быстро изменить его внешний вид.

Использование таблицы стилей в электронной книге ePub позволяет на всех страницах легко управлять внешним видом текста. Больше информации можно получить на сайте

http://www.w3schools.com/css/

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

Чтобы таблица стилей в книге "работала" – на каждой отдельной страничке книги должна быть ссылка на файл CSS. В папку Styles по нажатию правой кнопки добавьте заранее подготовленную таблицу стилей. Либо выделить мышкой папку Styles и нажать кнопку + (плюс) на панели программы (Ad Existing Files). Кстати, этим же способом добавляются файлы шрифтов в папку Fonts, файлы иллюстраций в папку Images.

Ниже приведен скриншот – в редакторе Sigil режим просмотра кода страницы.

Ссылка на таблицу стилей располагается вверху каждой страницы внутри блока .

В последней на данный момент версии редактора Sigil (точнее, начиная с версии 0.6.0) есть очень приятное нововведение: теперь не надо вручную вставлять ссылку на CSS в редакторе кода. В левом окне выделяется группа файлов, удерживая Shift. Далее правой кнопкой выбрать Link Stylesheets...(добавить ссылки на таблицу(ы) стилей). Поставить «галочку».

Пример таблицы стилей, которую использую я при издании книг (это вовсе не секрет). В верхней части между косым слэшем и звёздочками /*….*/приводится несущественная информация, которая не влияет на отображение текста страницы (Вы можете спокойно выбросить этот текст). Там же можно записывать комментарии, которые могут Вам пригодиться. Должен заметить, что в CSS значима каждая фигурная скобка, каждая точка с запятой. Как записан CSS (каждый стиль записывать в одну линию, или как представлено ниже) – не имеет принципиального значения.

================

/*[(cc) docking the mad dog, Modify if needed]*/

body

{

font-family: LiberationSerif-Regular, serif;

margin-left: 2%;

margin-right: 2%;

line-height: 120%;

text-align: left; /* Text alignment is still a matter of debate. Feel free to change to text-align: justify; */

color: #000000; /*black*/

}

h1

{

text-align: center;

page-break-after: avoid;

page-break-inside: avoid;

font-weight: normal;

font-size: 1.56em;

line-height: 1.2em;

margin: 0;

padding: 0;

color: #000080; /*navy*/

}

h2

{

    text-align: left;

    text-indent:2em;

    page-break-after: avoid;

    page-break-inside: avoid;

    font-weight: normal;

    font-size: 1.40em;

    color: #000080;

}

h3

{

text-align: left;

text-indent:2em;

page-break-after: avoid;

page-break-inside: avoid;

font-weight: normal;

font-size: 1.20em;

color: #000080;

}

h4

{

font-weight: normal;

text-align: left;

font-size: 1.22em;

padding: 1em 2em 0.25em 0;

color: #228B22;

}

h5,h6

{

font-weight: bold;

text-align: left;

font-size: 18px;

padding: 1em 2em 0.25em 0;

color: #006400;

}

p

{

text-indent: 0;

margin-top: 0;

margin-bottom: 0.2em;

text-align: justify;

}

p.author

{

    font-size: 1.5em;

    font-weight: bold;

    text-align: center;

    margin-top: 2em;

    margin-bottom: 2em;

}

p.heading

{

    font-weight: bold;

    margin-top: 1.5em;

    margin-bottom: 1em;

}

p.ind

{

text-indent: 2em;

margin-top: 0;

margin-bottom: 0.2em;

text-align: justify;

}

.title /*Use for the title on the first page*/

 {

    margin-top:1em;

    margin-bottom:1em;

    page-break-after:avoid;

    font-size: 2.5em;

    text-align: center;

    text-indent:0em;

}

.subtitle

{

    margin-top:2em;

    margin-bottom:1.5em;

    page-break-after:avoid;

    font-size: 1.46em;

    text-align: center;

    text-indent:0em;

}

div.epigraf

{

font-family: LiberationSerif-Italic, serif;

font-style: italic;

font-size: 98%;

margin: 1em 1em 2em 17%;

text-align: justify;

color: #000080; /*navy*/

}

div.cite

{

font-family: LiberationSerif-Regular, serif;

font-style: normal;

font-size: 102%;

margin: 1em 1em 2em 7%;

text-align: justify;

color: #000080;

}

div.text

{

display: block;

text-align: justify;

}

p.empty-line

{

height: 1em;

margin: 0px;

}

div.ex-1

{

color: #FF0000; /*red*/

}

.center

{

text-align: center;

}

hr.bar10

{

width:15%;

margin-left:35%;

}

hr.bar25

{

width:25%;

margin-left:10%;

}

.left-float

{

    display: block;

    float: left;

    margin-bottom: 1em;

    margin-right: 1em;

    margin-top: 1em;

    text-align: center;

}

.right-float

{

    display: block;

    float: right;

    margin-bottom: 1em;

    margin-left: 1em;

    margin-top: 1em;

    max-width: 250px;

    text-align: center;

}

.first

{

    display: block;

    margin-bottom: 0;

    margin-left: 1%;

    margin-right: 0;

    margin-top: 1em;

    padding-left: 2em;

    text-align: left;

    text-indent: -1em;

}

.poem

{

    display: block;

    margin-bottom: 0;

    margin-left: 1%;

    margin-right: 0;

    margin-top: 0;

    padding-left: 2em;

    text-align: left;

    text-indent: -2em;

}

div.coverpage

{

text-align: center;

page-break-after: always;

}

img.coverimage

{

max-width:100%;

vertical-align: text-top;

margin-bottom:.5em !important;

padding: 0;

}

.imgDiv

{

text-align:center;

width:100%;

}

.imgDiv img

{

    max-width:100%;

    margin-bottom:5px;

}

.nodisplay

{

display: none;

}

b

{

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*/

} ...... /*закрывающая фигурная скобка*/

При просмотре кода страницы заголовок будет выглядеть так:

Заголовок, а читатель увидит заголовок синего цвета, с выравниванием по центру страницы.

О единицах измерения: emсоответствует размеру используемого шрифта. К примеру, 2em соответствует удвоенному размеру шрифта. Если используется шрифт 12pt, то 2em будет соответственно 24pt; pt (point)– наименьшая единица измерения в типографском деле, соответствует 1/72 дюйма; px (pixels)– пиксель, точка на экране компьютера. Использование em рекомендовано, т.к. поддерживается масштабирование.

Все теоретические описания могут остаться пустым звуком, потому необходимо взять файл 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

UPD: Возможно ли использование CSS в книгах формата fb2? Да, об этом есть публикация на форуме

http://maxima-library.org/forum/razdel-predlozhenij/127-stilnye-knigi

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

-=***=-

Встраивание шрифтов в 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. Проверяем, что таблица стилей и встроенные шрифты работают

Вот как 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 книги:

Warren Cty Ky March 11th

Последний этап – добавить файл с названием com.apple.ibooks.display-options.xmlв папку META-INF (открыть книгу архиватором и добавить файл. В программе Sigil это не делается). Этот файл позволяет программе iBooksв устройствах Appleсообщить, что в книге встроены собственные шрифты. Файл можно создать в программе Notepad++

Всё содержимое:

true

Решает ли встраивание шрифтов все проблемы? Конечно же нет.

– не все ридеры поддерживают чтение встроенных шрифтов;

– существуют лицензионные ограничения на использование очень многих шрифтов.

–

Примерно та же последовательность действий описывается в статье How to Embed Fonts in an Epub or Kindle ebook @font-faceby Suzanne Fyhrie Parrott

http://www.firststepspublishing.com/2012/03/embed-fonts-epub-kindle/

–

Почему вопрос актуален? В большинстве случаев проблемы предлагается решать довольно сложными способами (в программе Calibre с подключением плагинов, перегоняя в fb2 и далее онлайн-конвертер fb2 в epub, который встраивает шрифты и т.д.).

= Вот публикация в ЖЖ-сообществе ru_nook от 10.09.2010

«Костыли для epub»– о проблемах чтения книг на русском языке у пользователей Nook

http://ru-nook.livejournal.com/429.html

= В ЖЖ-сообществе kindle_direct также проходят вопросы по чтению кириллицы в epub

http://kindle-direct.livejournal.com/5890.html

= Конвертируем FB2 в EPUB для NOOK 1st

http://mynook.ru/konvertiruem-fb2-v-epub-dlya-nook/

= В разделе Вопросы и Ответы(Сайт для владельцев ридеров Nook)

http://mynook.ru/faq/

На вопрос о поддержке кириллицыв ответе сказано:

"Начнём с того, что NOOK предназначен только для американского рынка и B&N официально заявляют только о поддержке западноевропейский языков. Однако, это не говорит о том, что книги на русском читать нельзя.

Nook отлично показывает книги ePub со встроенными (embedded) шрифтами. Если шрифты не встроены в книгу, то вместо букв вы увидите вопросительные знаки. Встроить шрифты можно с помощью различных программ для конвертирования книг – Calibre, ePubGen и других.

Но есть способ лучше – установить прошивку от mynook.ru. В этом случае вы сможете сами выбрать оптимальный для себя набор шрифтов и необходимость в конвертировании книг пропадёт."

= http://nookdevs.com/Font_Changes#Instructions_for_Linking_3rd_Party_Fonts_from_ePubs

= «Встроить русский шрифт в книгах EPUB – инструкция с картинками»

http://paul-kamp.livejournal.com/445889.html

= Let's embed fonts into non Western ePub books of choice!

http://www.nookboards.com/forum/73-original-nook/9476-lets-embed-fonts-into-non-western-epub-books-choice.html

= Как русифицировать epub книги. (03.03.2011)

http://bejoy.ru/2011/03/kak-rusificirovat-epub-knigi/

= IriverStory и Русский шрифт в ePub

http://www.the-ebook.org/forum/viewtopic.php?t=13054

-=***=-

Вставляем иллюстрации в книгу

Что необходимо помнить? В названиях файлов иллюстраций не должно быть пробелов, кириллических букв. Многие специалисты рекомендуют давать осмысленные названия для файлов изображений (так будет легче ориентироваться).

Не рекомендуются слишком маленькие изображения, т.к., на небольших экранах (например, смартфоны) картинка будет совсем мелкой. В некоторых программах чтения есть тенденция показывать даже небольшие изображения на всю ширину страницы, и это приводит к значительным искажениям, размытости и пикселизации. Все подготовленные иллюстрации желательно поместить в отдельную папку, проверить их "вес" и размеры.

Спецификация ePub описывает допустимые форматы изображений:

image/jpeg

image/gif

image/png

image/svg+xml

Давайте определимся с концепцией. Любое цветное и качественное изображение на экранах черно-белых ридеров с e-ink дисплеем (8-16 градаций серого) – будет смотреться достаточно невзрачно. Значит ли это, что иллюстрации не нужно особо подготавливать? Нет, есть люди, читающие книги на планшетах, цветных ридерах. У планшетов уже сейчас есть высококачественные дисплеи с высоким разрешением (скептикам рекомендуется пообщаться с iPad, полистать фотографии). Вывод – планка требований к иллюстрациям должна быть на уровне хорошего качества.

Еще одна особенность. Обычно книги читают в портретной ориентации экрана. Возьмём за основу абстрактный экран шириной 600 и высотой 800 пикселей. Особенности форматирования стилей в книге epub диктуют, чтобы изображения подгонялись под 100% ширину экрана. Тогда иллюстрация 600×800 будет демонстрироваться на весь экран, что смотрится достаточно приятно. Стоит ли подбирать все изображения в портретной ориентации? Вовсе нет. Рисунок может быть шириной 1200 и высотой 600 пикселей, он будет масштабирован на 100% ширины экрана. Будем уменьшать размеры?

Нет. Открою небольшой секрет – электронную книгу можно читать и повернув экран в ориентацию landscape(альбомная ориентация, хотя мне больше нравится термин «ландшафт»). Это возможно на многих ридерах, на планшетах. И вот тут, внимание, иллюстрация снова будет масштабирована на всю ширину экрана.

Более того, на планшетах есть возможность увеличить любое изображение, рассмотреть детали. Я это проверял в нескольких программах – очень приятная функция.

Какие выводы? Да, есть ограничения: «вес» изображенияне должен быть более 270-290 кб (иначе процессор устаревших ридеров может не справиться с перелистыванием такой странички. Впрочем, это ограничение можно и игнорировать). Ну и собственно размеры изображений не стоит брать с большим запасом. Минимум 768×1024 (ширина – высота) диктуется увеличением разрешения более современных устройств для чтения. И практически все разработчики подчеркивают, что для иллюстраций в электронной книге не требуется того высокого качества, которое требуется для цветной печати (это важно!).

При использовании фотографий для иллюстраций – безусловно рекомендован формат jpeg. Для уменьшения "веса" изображения есть 2 способа: уменьшение размера (ресайзинг) и снижение качества изображения по сравнению с исходным файлом. Считается, что при хорошем исходном качестве файла (яркость, контрастность, мало посторонних шумов и т.п.), уменьшение качества изображения до 72-75% визуально отличить на мониторе очень трудно. Я использую оба способа. Да, обычному пользователю вовсе не нужно виртуозное владение фотошопом. Есть много бесплатных графических редакторов (можно я не буду перечислять и давать здесь ссылки?).

Некоторые авторы рекомендуют на иллюстрациях чуть повышать резкость. Я думаю, что подход к изображениям должен быть индивидуальным и + тесты. (Я иногда использую "нерезкую маску" – unsharp mask). Надо пробовать разные варианты. Доработка иллюстраций необходима, так как именно за счёт иллюстраций увеличивается общий вес книги.

В таблице стилей CSS должно быть прописано правило по форматированию изображений.

Пример:

.imgDiv

{

text-align: center;

width: 100%;

}

В коде страницы изображение заключают внутри тега

.

Элемент

является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.

Как и при использовании других блочных элементов, содержимое тега

всегда начинается с новой строки. После него также добавляется перенос строки.

   

          

   

Вооружившись этим набором знаний уже можно вставить иллюстрацию внутрь книги в программе Sigil.

В нужное место после текста ставится курсор. Нажимается кнопка Insert File. (В версиях до 0.7.0 эта кнопка обозначалась как Insert Images.) Появится окно, в котором можно выбрать изображения, которые Вы уже поместили в папку Images. Подтвердите выбор файла. Перейдите в режим просмотра кода и скорректируйте код, как описано выше.

Есть ли ещё какие-то особенности? Увы, да.

Многие авторы помнят, как красиво выглядит обтекание картинки текстом (слева или справа). Да, на странице сайта или в файле PDF можно предполагать, что всё будет хорошо. К сожалению, подобное лёгкое украшение может привести к непредсказуемому внешнему виду странички на различных ридерах, вплоть до полной "каши", т.к. невозможно заранее предсказать ширину экрана, на котором вашу книгу будут читать. Пример в Приложении 2

Большинство экспертов по разработке электронных книг рекомендуют размещать картинки отдельно от текста, иногда даже на отдельной страничке (вставляя разрывы страниц до и после изображения).

И ещё особенность. Если текст, например, стихотворения, занимает 2/3 пространства страницы, и далее сразу же разместить иллюстрацию – часть программ чтения «вытесняет» иллюстрацию на следующую страницу, но может случиться и большая «неприятность» – изображение может получиться разрезанным. Или будет катастрофически уменьшено. Это оставляет неприятный осадок при чтении.

Опытным путем лично я пришел к выводу, что не стоит помещать даже небольшие иллюстрации после названия стихотворения, перед текстом. На некоторых устройствах может возникнуть ситуация, что после рисунка на странице может остаться только первая строчка (или три строки от катрена). Это тоже неприятно. И давайте подумаем, что автор хочет донести до читателя – свой текст или рисунок и текст к нему?

В новой версии Sigil (начиная с v.0.6.0) появилась очень приятная особенность: при просмотре изображений в папке Images теперь можно просмотреть изображения во внешней программе. Под каждой иллюстрацией можно увидеть свойства файла.

Думаю, будет правильно здесь же чуть прокомментировать вопрос "где брать иллюстрации?"

Есть несколько простых рекомендаций, чтобы Ваша книга была легальной и не нарушала авторских прав художников, фотографов и дизайнеров.

1. Сотрудничество со знакомым художником, фотографом, дизайнером.

2. Получение разрешения от автора изображения на использование его работ в Вашей книге.

3. Использование собственных иллюстраций (рисунков или фотографий).

4. Использование изображений из Public Domain (общественное достояние). К примеру, Jason Matthews ( http://ru.scribd.com/doc....or-Free) приводит перечень сайтов, где можно свободно брать изображения:

http://www.photos8.com/

http://www.public-domain-photos.com/

http://www.publicdomainpictures.net/

http://www.public-domain-image.com/

http://www.pdphoto.org/

http://www.usa.gov/Topics/Graphics.shtml

http://www.flickr.com/creativecommons/ – free with permission (бесплатно с определёнными условиями)

О встраивании в книгу обложки будет рассказано в отдельной публикации.

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

-=***=-

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

Страницы книги >>>  Предыдущая | 1 2 3 4 5 6 7 8 9 | Следующая

Ваша оценка произведения:
• • 0
  • 1
  • 2
  • 3
  • 4
  • 5

Почитать похожее на эту книгу

Создание ePub: программы и алгоритм работы

Автор: Николай Мурашов

Как читать ePub на домашнем компьютере

Автор: Николай Мурашов

Zag: манифест другого маркетинга

Автор: Марти Ньюмейер

Создание электронных книг в формате FictionBook 2.1: практическое руководст ...

Автор: Михаил Кондратович

FictionBook Editor V 2.66 Руководство

Автор: Izekbis

Fiction Book Designer 3.2. Руководство по созданию книг

Автор: Izekbis

Первое и единственное наиболее полное руководство по копирайтингу (СИ)

Автор: Игорь Левашов

Создание электронных книг в формате FictionBook 2.1: практическое руководст ...

Автор: Михаил Кондратович

Быстрое и удобное создание книг в формате fb2.pdf (СИ)

Автор: авторов Коллектив