Чтение онлайн

ЖАНРЫ

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

Посмотрим, что же в коде страницы:

<body>

<img alt="cover" src="../Images/cover.jpg" />

</body>

При таких условиях или надо уменьшать обложку до каких-то усреднённых размеров гипотетического "ридера", или сделать так, чтобы обложка масштабировалась по ширине экрана.

В таблице стилей CSS должны быть следующие записи:

div.coverpage

{

text-align: center;

page-break-after: always;

}

img.coverimage

{

max-width:100%;

vertical-align: text-top;

margin-bottom:.5em !important;

padding: 0;

}

Теперь

надо, чтобы на страничке обложки была ссылка на таблицу CSS и можно в коде чуть исправить отображение изображения:

<head>

<title></title>

<link href="#" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="coverpage">

<img alt="cover" src="../Images/cover.jpg" />

</div>

</body>

Но и этого мало! В описание img следует добавить

class="coverimage"

<body>

<div class="coverpage">

<img alt="cover" class="coverimage" src="../Images/cover.jpg" />

</div>

</body>

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

alt=""
должна быть заполнена для каждого изображения, иначе будет ошибка при валидации, а система TTS (text-to-speech – система чтения вслух) при чтении книги может давать сбои на изображениях. В последних верcиях редактора Sigil значение
alt=""
вcтавляется автоматически.)

Должен напомнить, что в названии файлов html (xhtml) и файлов изображений недопустимы пробелы, нельзя использовать кириллицу.

Всё ли изложено? Почти. В руководстве программы Sigil особо подчёркивается, что и файлу html, и собственно изображению обложки должна быть присвоена "семантика" Coverи Cover Imageсоответственно. Выделяем файл, и по правому клику мышкой вызываем меню действий – Add Semantics:

Если этого не сделать, ряд программ чтения не покажет обложку (они просто не будут иметь о ней информацию). Adobe (и все ридеры на основе SDK) будут считать первую страницу HTML как страницу обложки и воспроизводить её автоматически, тогда как Apple и некоторые другие ридеры распознают только cover picture – изображение обложки (не страничку).

Потому,

если обложка в книгу не встроена, АDE (Adobe Digital Editions), будет использовать скриншот первой странички в качестве обложки, а Apple просто не покажет обложку, вообще. Правильное и универсальное отображение обложки на всех устройствах достигается именно присвоением "семантики" и 1-й страничке html, и изображению.

Источник: http://epingsoft.com/blog/?p=30

___________

Немного другой способ описан на сайте electricbookworks.com

Запись на странице обложки:

<body class="cover">

<p class="cover"><img class="cover" alt="" src="cover.jpg" />

</body>

В таблице CSS должна быть запись:

/*Cover*/

body.cover

{

margin: 0;

padding: 0;

text-align: center;

}

p.cover

{

margin: 0;

padding: 0;

text-align: center;

}

img.cover

{

height: 100%;

}

___________

В данном Руководствесознательно в <head> страницы с обложкой вставлена запись:

<head>

<title>Cover page</title>

<link href="#" rel="stylesheet" type="text/css" />

<style type="text/css">

body {text-align: center; padding:0; margin: 0;}

</style>

</head>

___________

В Adobe советуют выбрать правильные пропорцииобложки (например, 567x819) и в CSS указать:

img { max-width: 100%; padding: 0; margin: 0;}

Таким образом, подход к обложке может чуть отличаться. (Да, предложенные размеры обложки были вполне актуальны для 2009 года.) Я пользуюсь способом, описанным в самом начале (т.е. указание максимальной ширины изображения).

– =***=-

Просмотр кода и коррекция ошибок в книге

Сейчас желательно вернуться к главе Программы для создания ePub и Алгоритм работы и проверить, все ли пункты работы выполнены.

К Алгоритму

Если проделано разбиение файла на отдельные странички, вставлена обложка и иллюстрации, необходимо проверить файл на наличие типичных ошибок и огрехов форматирования. С помощью функции Find & Replace(Найти и заменить) необходимо проверить файл и заменить все ("-") дефисы в тех местах, где должно быть тире "–", (поверьте, это разные знаки). Применение функции "Найти и заменить" в режиме Regex возможно к "Данному открытому файлу" (Current File) или "Ко всем файлам HTML" (All HTML Files). Желательно придерживаться единого стиля на протяжении всей книги. Тщательный подход к таким вопросам отличает профессиональные книги от кустарных сборок. Отступы параграфов должны быть одинаковой величины во всей книге, если речь идет о художественном произведении. Параграфы без отступов чаще встречаются в руководствах, кулинарных книгах и т.д. (non-fiction books).

Поделиться с друзьями: