Воскресенье, 19.11.2017, 02:08
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Для авторов [13]
Мастер-класс [19]

Наш опрос
Оцените мой сайт
Всего ответов: 205

Twitter

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Социальные сети

Программы для чтения epub

Главная » Статьи » Статьи » Для авторов

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

Каскадные таблицы стилей CSS (Cascading Style Sheets) – первый стандарт стилей, объявленный консорциумом W3C.  W3C (World Wide Web Consortium) – Консорциум Всемирной паутины – организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет сэр Тимоти Джон Бернерс-Ли, автор множества разработок в области информационных технологий. Дата основания: Октябрь 1994 г. 

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

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

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

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

На начальном этапе этой минимальной информации должно быть достаточно. Больше информации можно получить на сайте

 http://www.w3schools.com/css/ (англ.). 

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

Чтобы таблица стилей в книге "работала" – на каждой отдельной страничке книги должна быть ссылка на файл CSS. В папку Styles по нажатию правой кнопки добавьте заранее подготовленную таблицу стилей. Чтобы подключить таблицу CSS к конкретному файлу xhtml, его надо выделить и выбрать опцию Link Stylesheets...

 Большинство специалистов по форматированию книг рекомендуют не стремиться к очень сложным изыскам. На начальном этапе лучше стремиться к простоте и проверенным приёмам форматирования книги, которые будут работать на большинстве устройств чтения. Подключение таблицы CSS позволяет встроить кириллические шрифты в книгу, описать внешний вид иллюстраций и точный вид форматирования текста.

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

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

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

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

Правильный CSS!  Приведенный ниже файл CSS прошел валидацию успешно. 

Вы можете скачать таблицу стилей вот по этой ссылке, это легально, вы ничего не нарушаете). (загрузок 102, просмотров 828) UPD: файл теперь перезалит в облако на mail.ru, т.к. на сайте box.com с лета 2015 проблемы со скачиванием файлов.

Даже если вы не считаете себя специалистом в программировании  опасаться нечего.  Я тоже изучал таблицу CSS отдельными фрагментами, постепенно. И уровень подготовки в этой области был минимальный. Это  очень мощное средство управление внешним видом форматирования. В книге может быть 1 или несколько таблиц стилей. (Это удобно, когда необходимо какой-то раздел книги оформить особым образом. Злоупотреблять не стоит, но попробовать можно.)

 

Как создаётся таблица стилей? Скачивается программа Notepad++  (ссылка  последнюю версию найдите в разделе download ). Это программа для OS Windows, для Mac поищите другую программу самостоятельно. 

В этом редакторе можно сохранить введенный текст как таблицу CSS 

(Сохранить как...). Сразу необходимо запомнить, что в CSS значима каждая фигурная скобка, каждая точка с запятой. (NB!) 

Что описывается внутри? На примере заголовка первого уровня (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>, а читатель увидит заголовок синего цвета, с выравниванием по центру страницы.

Заголовок

При форматировании книги стихов,  для названий отдельных стихотворений я предпочитаю использовать заголовок 2 уровня h2  со следующими параметрами:

h2

{

    text-align: left;  /*выравнивание по левому краю*/

    text-indent:2em; /* отступив 2em */

    page-break-after: avoid;

    page-break-inside: avoid;

    font-weight: normal;

    font-size: 1.40em; 

    color: #000080;

}

Логика простая: текст стихотворения выравнивается по левому краю и при не слишком длинной строке заголовок по центру страницы выглядит немного диссонансом, потому h2 я тоже выравниваю по левому краю, с небольшим отступом (вправо). С параметром font-size надо быть очень осторожным, т.к. слишком большие значения могут приводить к появлению гигантских заголовков на страничке при даже небольшом увеличении шрифта основного текста. Если заголовок слишком длинный, допустимо внутри использовать тег <br/> для принудительной разбивки заголовка на две строчки. Если в свойствах h1 записано выравнивание по центру, то обе строчки будут выглядеть вполне эстетично.

<h1>Tree Man In A Boat<br/>

(To Say Nothing of the Dog)</h1>

 

Сохраню здесь полезную ссылку на таблицу цветов CSS Color Names. Там возможно посмотреть много полезной информации.

http://www.w3schools.com/cssref/css_colornames.asp

http://colorscheme.ru/html-colors.html

http://www.stm.dp.ua/web-design/color-html.php

Тут мне необходимо сказать про форматирование отступов в параграфах, которое следует прописать в таблице CSS. При подготовке книг с прозой рекомендуют в характеристиках свойств параграфа указывать отступ 1em или 1.2em, 1.6em, 2em, например: 

p.ind 

{

text-indent: 1em; 

margin-top: 0; 

margin-bottom: 0.2em; 

text-align: justify;

}

Между абзацами пустые строки не рекомендуются. 

Параграф без отступов (text-indent: 0;) рекомендован для форматирования поэзии, non-fiction books (документалистика, очерки, научные работы, эссе, биографии, воспоминания, техническая документация, руководства и др.).

Если в таблицу стилей вставить:

a
{
color: #000080;
/*navy*/
text-decoration: none;
}
a:hover
{
 text-decoration: underline;
}

тогда гиперссылки внутренние и на ресурсы в сети будут синего цвета и без подчёркивания. Подчёркивание ссылки описано: "при наведении курсора" - a:hover . Имхо, так чуть эстетичнее вид внутри книги, особенно если вы решили сделать кликабельное содержание. Да, ещё мне кажется более логичным размещать страницу Содержание (HTML-toc) в начале книги.

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

 

Все ли проблемы решаются таким способом? Увы, нет. iBooks (программа чтения на устройствах Apple) не следует спецификациям CSS. Однако, Firefox, Safari и Adobe Digital Editions (ADE), и все ридеры на основе АDE (Sony Reader и Barnes & Noble Nook) работают с CSS.

В книге формата ePub может быть использовано несколько таблиц CSS, например, для основной части книги  основная таблица, для страницы с html-содержанием  другая и т.д.   

 

Каждую таблицу стилей рекомендуется проверить валидатором, например здесь:

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

CSS2 Cheat Sheet by DaveChild (имхо, слишком кратко)

http://www.cheatography.com/davechild/cheat-sheets/css2/

______________________________

Короткая ссылка на данную страницу: http://goo.gl/yF8la

 

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

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

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

 

 Мастер-класс по созданию ePub (Оглавление)

 

Категория: Для авторов | Добавил: docking_the_mad_dog (07.11.2012)
Просмотров: 8474 | Комментарии: 2 | Теги: оформление книг, стили для epub, how-to, Мастер-класс, CSS, таблицы стилей, tutorial, epub | Рейтинг: 0.0/0
Всего комментариев: 2
1  
Добрый день! 
Не могли бы подсказать как лучше поступить в следующей ситуации:
не все ридеры видят стили, вынесенный в отдельном файле. Приходится прописывать их дополнительно между <head> и </head> в каждой странице, дабы у любого читателя отображались желаемые стили. Это нормально, или есть какой-то момент, позволяющий избежать подобной ситуации, и добиться результата только отдельным(и) файлами .css?
Заранее признателен за ответ!

2  
Ваш вариант решения проблемы допускается, но нежелателен. Имхо, подстраиваться под особенности какого-то отдельного ридера не очень целесообразно, "железо" достаточно быстро устаревает, появляются более современные модели.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту

Мы в соцсетях
facebook twittwer youtubeподпискаПодпишитесь на рассылку

Друзья сайта
МЕГАЛИТ. Евразийский журнальный портал.
Электронный журнал «Точка ZRения»
 Book on the Move – независимые издатели электронных книг
 Материалы для самостоятельного изучения английского языка:словари, видеоуроки, книги,программы Ирина Бебнева на сервере Стихи.ру Читать Book on the Move


Новости сайта
[16.12.2016]
[Современная поэзия]
Яков Рабинер. Мой Сатирикон
(0)
[10.07.2016]
[Современная проза]
Яков Рабинер. Бодлер
(0)
[05.05.2016]
[Современная поэзия]
Яков Рабинер. Глубокая провинция души
(0)
[07.02.2016]
[Современная поэзия]
Яков Рабинер. Фрески.
(0)
[26.12.2015]
[Docking the Mad Dog представляет]
Иван Храмовник - Коварство и кавай
(0)
[06.12.2015]
[Современная поэзия]
Светлана Чернышова. От Японского до Эвксинского.+
(1)
[04.10.2015]
[Самиздат]
Наталья По. Я не знала еще...
(0)
[13.09.2015]
[Учебная литература]
Яков Рабинер. Крещендо
(0)
[24.05.2015]
[Современная проза]
Ангелина Злобина. Странная моя птица - 2-е издание
(0)
[10.05.2015]
[Учебная литература]
Якоа Рабинер. Пушкин и Лермонтов. Заметки на полях биографий
(0)



Поддержи проект
Книги для наших авторов мы создаем бесплатно. Однако вы можете поддержать проект, оказав ему некоторую материальную помощь.


Copyright Book on the Move © 2017Создать бесплатный сайт с uCoz