Создание сложных макетов публикаций в EPUB 3 с применением HTML5, CSS3 и MathML

Использование открытого стандарта электронных книг нового поколения для сложного макетирования и оформления книг

EPUB 3.0, последняя версия стандартного формата электронных книг на базе XML, освоила самую современную Web-технологию, поддерживая HTML5 и CSS3. Она сохраняет направленность на XML-инструментарий, требуя XHTML-сериализации и добавляя дополнительные словари XML, такие как MathML и SVG. EPUB 3 предлагает множество средств для разработки передовых, истинно цифровых публикаций. Эта статья посвящена созданию сложных макетов страниц с использованием некоторых новых возможностей EPUB 3.

Лайза Дейли, вице-президент по проектированию, Safari Books Online

Фото Лайзы ДейлиЛайза Дейли (Liza Daly) ― вице-президент по проектированию компании Safari Books Online и опытный программист, специализирующийся на Web-приложениях и цифровых публикациях. Основала издательство программного обеспечения Threepress Consulting и в 2010 году выпустила Ibis Reader, первую систему для мобильных устройств чтения электронных книг на базе HTML5. Член Совета директоров организации International Digital Publishing Forum (IDPF), спонсирующей и разрабатывающей спецификацию электронных книг EPUB.



24.12.2012

Введение

EPUB — это XML-формат переформатируемых цифровых книг и публикаций, стандартизированный организацией International Digital Publishing Forum (IDPF). К 2009 году EPUB 2 был форматом электронных книг де-факто, используемым большинством крупных розничных продавцов электронных книг и систем для их чтения.

ZIP-архивы EPUB упакованы в рамках четко определенной структуры. Каждый компонент имеет свою собственную спецификацию, унифицированную под общим ярлыком EPUB:

Спецификация контейнера
Определяет метод упаковки документа EPUB.
Публикация EPUB
Включает в себя все метаданные о содержании электронной книги, в том числе: манифест пакета, основной заголовок, метаданные автора и — в EPUB 3 — определения дополнительных возможностей, которые публикация планирует поддерживать, таких как JavaScript или MathML. Это называется файлом Open Container Format.
Документы содержания EPUB
Фактические XHTML- и CSS-файлы, составляющие содержание публикации. В число документов содержания также входят двоичные ресурсы, такие как изображения, мультимедиа и, возможно, внешне определенные XML-документы.

Используемые сокращения

  • CSS: Cascading stylesheet / Каскадные таблицы стилей
  • DTD: Document Type Definition / Определение типа документа
  • HTML: HyperText Markup Language / Язык разметки гипертекста
  • JAR: Java-архив
  • OPF: Open Packaging Format / Открытый формат упаковки
  • SVG: Scalable Vector Graphics / Масштабируемая векторная графика
  • XHTML: Extensible HyperText Markup Language / Расширяемый гипертекстовый язык разметки
  • XML: Extensible Markup Language / Расширяемый язык разметки
  • XSLT: Extensible Stylesheet Language Transformations / Расширяемые преобразования языка таблиц стилей

В этой статье рассматриваются некоторые из особенностей EPUB 3. Она учит валидации документов EPUB 3, навигации и иерархии, а также содержит рекомендации по разработке. Пример иллюстрирует процесс адаптации страницы из детской книжки в EPUB 3. Читатель также узнает, как включить в публикации MathML.

Загрузите примеры, используемые в этой статье.

Предварительные замечания

Пример кода и примеры для этой статьи предполагают начальное знакомство со спецификацией EPUB 2 и публикациями на базе XML в целом. За описанием EPUB 2 обращайтесь к разделу Ресурсы.


Изменения в EPUB 3

EPUB 2 содержит возможности форматирования и макетирования HTML4 и CSS2, которых более чем достаточно для публикаций с интенсивным использованием текста. Однако издатели и авторы обнаружили, что EPUB 2 не справляется со многими типами материалов и способами их использования, такими как мультимедийные книги, книги со сложным макетом, математические публикации и интерактивные документы. В октябре 2011 года сообщество IDPF и eBook выпустило спецификацию EPUB 3.

Системы чтения EPUB 3

По состоянию на декабрь 2011 года ни одна система чтения официально не поддерживала EPUB 3. Однако многие системы чтения, написанные с применением механизмов браузера на базе HTML5, такие как WebKit, поддерживают большую часть спецификации EPUB 3 Content Documents. Мы рекомендуем использовать для тестирования и разработки документов EPUB 3 последнюю версию браузера на базе современного механизма обработки HTML.

Эта статья содержит методы создания безвредных полифиллов (прокладок) для получения EPUB 3-совместимых результатов даже без полной системы чтения EPUB 3.

Ниже перечислены основные изменения EPUB 3 по сравнению с EPUB 2.

  • Необходимая схема документов EPUB 3 изменилась с XHTML 1.1 на XHTML-сериализацию HTML5. Это было важнейшим требованием для включения мультимедийных элементов HTML5 (<video>, <audio> и <canvas>).
  • Допустимый диапазон CSS в документах EPUB 3 расширен с подмножества CSS 2.1 до набора зрелых модулей CSS3, относящихся к созданию документов.
  • К XHTML5 и SVG в качестве типа материалов первого порядка добавлен MathML.
  • От систем чтения с полем просмотра CSS теперь требуется поддержка внедренных шрифтов. В качестве приемлемого формата шрифтов добавлен Open Font Format.
  • Явная поддержка незападных способов и сценариев написания, включая вертикальное расположение на японском языке и другие азиатские сценарии.
  • Опциональная поддержка JavaScript-опосредованной интерактивности с применением специальной модели безопасности.
  • Допустимые метаданные в документах публикации расширены с добавлением некоторой поддержки Resource Description Framework–in–attributes (RDFa).
  • Документ оглавления EPUB 2 Navigational Center eXtended (NCX)заменен на оглавление на базе XHTML5. (NCX по-прежнему допускается для целей обратной совместимости.)

Валидация документов EPUB 3

Так как для большинства типов материалов EPUB 3 опирается на XML-сериализацию, он поддается автоматической валидации. Каноническим методом проверки допустимости и соответствия документов EPUB служит инструмент EpubCheck. Это Java™-библиотека с открытым исходным кодом (тип лицензии: Berkeley Software Distribution). Имеется предварительная версия для разработчиков, которую можно применять с документами EPUB 3 и которая используется в этой статье. См. ссылки на последнюю версию в разделе Ресурсы.

Для всех документов содержания EPUB настоятельно рекомендуется использовать расширение .xhtml. Без этого расширения браузеры не будет интерпретировать HTML-контент как application/xhtml+xml. При работе со многими функциями, демонстрируемыми в этой статье, такими как пространства имен CSS, требуется режим обработки XML.

Как правило, взаимодействие с EpubCheck осуществляется через командную строку:

$ java -jar epubcheck-3.0b3.jar sample.epub

Epubcheck Version 3.0b3

No errors or warnings detected.

Если в ответ вы получаете сообщение об ошибке java.lang.NoClassDefFoundError: com/thaiopensource/validate/SchemaReader, убедитесь, что подкаталог lib/ из дистрибутива EpubCheck находится в том же каталоге, что и JAR-файл EpubCheck.

EpubCheck 3 может валидировать каждый компонент пакета EPUB в отдельности, как показано в листинге 1. Эта чрезвычайно полезная функция, которая используется в примерах к этой статье, может:

  • помочь при решении проблем;
  • уменьшить потребность в трудоемкой переупаковке EPUB в новый файл ZIP только для того, чтобы валидировать его;
  • включаться в среду тестирования модулей для образования цепочки инструментов, выводящей файлы одного типа.
Листинг 1. Запуск EpubCheck 3 с файлами одного типа
$ java -jar ~/src/epubcheck-3.0b3.jar sample-toc.xhtml -mode nav 
Epubcheck Version 3.0b3

WARNING: sample-toc.xhtml: File is validated as a single file of type nav and version 3! 
         Only a subset of the available tests is run!

No errors or warnings detected.

Навигация и иерархия в документах EPUB 3

Файл NCX TOC в EPUB 2 поддерживал богатый набор средств разметки для иерархической навигации и отображения страниц, однако он был основан на системе цифровых говорящих книг Digital Accessible Information System (DAISY - спецификация для производства электронных книг, доступных людям с физическими недостатками). Опора на четко определенный формат DAISY облегчал разработку систем чтения электронных книг, поддерживающих широкие возможности доступа. В этом смысле NCX выполнен мастерски. Однако NCX DTD очень велик и включает в себя функции, не относящиеся к EPUB 2. Путаница с тем, какие части NCX необходимы для EPUB, привела к нежелательной фрагментации и появлению коммерческих расширений, предлагаемых некоторыми поставщиками электронных книг и систем считывания.

В EPUB 3 отказались от NCX и заменили его на EPUB Navigational Document (END). Пример приведен в листинге 2. END использует XHTML5, а не специальные DTD, тем самым сокращая количество XML-форматов для реализации и валидации. Существуют специальные атрибуты EPUB, использующие пространство имен EPUB (http://www.idpf.org/2007/ops).

Листинг 2. Минимальный END
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Example</title>
  </head>
  <body>
    <section epub:type="frontmatter toc">
      <header>
        <h1>Contents</h1>
      </header>
      <nav epub:type="toc" id="toc">
        <ol>
          <li id="chapter_001">
            <a href="chapter_001.html">Chapter 1</a>
          </li>
        </ol>
      </nav>
    </section>
  </body>
</html>

Элемент HTML5 <nav> является обязательным (как и значение epub:typetoc).

Декларация END

END включается в публикацию с помощью объявления в манифесте item со значением propertiesnav, как показано в листинге 3.

Листинг 3. Включение END в EPUB Package Document (OPF)
  <manifest>

    <item id="toc" 
    properties="nav"
    href="toc.html" 
    media-type="application/xhtml+xml"/>

    <item id="chapter_001" 
    href="chapter_001.html" 
    media-type="application/xhtml+xml"/>
    ...
  </manifest>

EPUB 3 требует включения файла END. Для целей обратной совместимости можно включить и файл NCX, но процессоры EPUB 3 должны игнорировать NCX в пользу END.

Визуальное представление END

В отличие от NCX, END можно включить в поток содержания книги. В EPUB 2, если нужно показать пользователям особое оглавление (а не то, которое опирается на встроенную поддержку TOC в eReader), нужно создать две копии одного и того же содержания — одну в NCX и одну в виде HTML-документа. END устраняет это дублирование и допускает повышенную гибкость при представлении некоторых или всех оглавлений в потоке содержания.

Чтобы добавить END в поток содержания, достаточно включить его в OPF spine, как показано в листинге 4.

Листинг 4. Включение END в поток чтения
  <spine>
    <itemref idref="toc" />
    <itemref idref="chapter_001" />
    ...
  </spine>

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

Листинг 5. Удаление подразделов из визуального представления оглавления
...
<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc">
  <ol>
    <li id="chapter_001">
      <a href="chapter_001.html">Chapter 1</a>
      <ol hidden="hidden">
        <li>
          <a href="chapter_001.html#id1">Chapter 1 subsection</a>
          <ol>
            <li>
              <a href="chapter_001.html#id1.1">Chapter 1 subsection 1</a>
            ...

Вы можете спросить, почему бы не сделать это с помощью свойства display: none CSS? Потому что EPUB используется в различных системах чтения, включая устройства с невизуальными экранами или устройства Брайля, а поддержка CSS от всех устройств чтения не требуется. Hidden поддерживается большинством современных браузеров. Хорошая идея ― включить CSS в явный набор свойств отображения этих элементов, как показано в листинге 6. Так как файл END ― просто еще один HTML-файл, CSS можно добавить в HTML head, как любую другую таблицу стилей.

Листинг 6. Задание свойств отображения
/* Никогда не отображать элементы с атрибутом hidden  */
*[hidden] {
  display: none;
}

В несовместимых системах чтения или браузерах отсутствие стилевого оформления для атрибута hidden приводит к тому, что будут показаны все подразделы, как на рисунке 1.

Рисунок 1. END-оглавление без атрибута hidden или CSS
END-оглавление без атрибута hidden или CSS

В браузерах, поддерживающих hidden, или после добавления прокладки CSS результат трансформируется, как показано на рисунке 2.

Рисунок 2. END-оглавление с атрибутом hidden
END-оглавление с атрибутом hidden

По умолчанию упорядоченный HTML-список выдает набор нумерованных списков. Однако в спецификации END говорится: . . "…отображаемый стиль по умолчанию для элементов списка должен быть эквивалентен CSS list-style: none". Для выполнения этого требования добавим в полифилл EPUB 3 CSS еще одно правило, как показано в листинге 7.

Листинг 7. Настройка стиля элементов списка
/* Никогда не показывать нумерацию списка в объявленном оглавлении */
nav#toc ol {
  list-style-type: none;
}

Переход с NCX на END через XSLT

Хотя EPUB 3 END предлагает больше возможностей для размещения и управления, при переводе рабочего процесса с EPUB 2 на EPUB 3 лучше начать с преобразования существующих NCX-документов. Это идеальное применение для XSLT, так как и входные, и выходные документы представляют собой XML-документы.

В листинге 8 приведена базовая среда для создания HTML-документа с оглавлением.

Листинг 8. Объявление пространств имен, необходимых для NCX и END
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
                exclude-result-prefixes="ncx xsl"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ncx="http://www.daisy.org/z3986/2005/ncx/"
                xmlns:epub="http://www.idpf.org/2007/ops"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="ncx:ncx">
    <html>
      <head>
        <title><xsl:apply-templates select="/ncx:ncx/ncx:docTitle/ncx:text"/></title>
      </head>
      <body>
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

Обратите внимание на обязательное включение пространства имен http://www.idpf.org/2007/ops, которое обычно начинается с epub. Это пространство имен включается главным образом для поддержки семантической флексии (semantic inflection) EPUB (особого дополнительного смысла, который имеет элемент в документе содержания EPUB). При использовании EPUB 3 рекомендуется применять средства выражения, доступные в Structural Semantics Vocabulary, для предоставления контекста для программного обеспечения доступности, а также для машинной обработки. За информацией о значениях, включенных в словарь, обращайтесь к разделу Ресурсы.

Полный пример, демонстрирующий преобразование страниц других типов, приведен в приложении с открытым исходным кодом nend (см. раздел Ресурсы).

Теперь, имея базовые наброски, приступим к рассмотрению иерархического оглавления в NCX и вывода соответствующих XHTML-элементов. Хотя NCX допускает несколько разных типов списков страниц, в EPUB-книгах, как правило, используется только ncx:navMap. Фрагмент шаблона, приведенный в листинге 9, показывает, как выводится набор узлов из ncx:navMap.

Листинг 9. Вывод navMap
...
  <!-- Generate a complete nav element and sub-list out of the navMap, 
       then recurse through the nodes -->
  <xsl:template match="ncx:navMap">
      <nav id="toc" epub:type="toc">
        <xsl:copy-of select="@class"/>
        <xsl:choose>
          <xsl:when test="ncx:navLabel">
            <xsl:apply-templates select="ncx:navLabel" mode="heading"/>
          </xsl:when>
          <xsl:otherwise>
            <xsl:if test="self::ncx:navMap">
              <h1>Table of Contents</h1>
            </xsl:if>
          </xsl:otherwise>
        </xsl:choose>
        <ol>
          <xsl:apply-templates select="ncx:navPoint|ncx:navLabel"/>
        </ol>
      </nav>
  </xsl:template>

  <xsl:template match="ncx:navPoint">
    <xsl:text>
</xsl:text>
    <li>
      <xsl:copy-of select="@id|@class"/>

      <!-- Every navPoint must have a navLabel and content -->
      <a href="{ncx:content[1]/@src}">
        <xsl:apply-templates select="ncx:navLabel"/>
      </a>

      <!-- Does this element have a sub-nav? -->
      <xsl:if test="ncx:navPoint">
        <ol>
          <xsl:apply-templates select="ncx:navPoint"/>
        </ol>
      </xsl:if>
    </li>
  </xsl:template>

  <!-- These nodes only contain text -->
  <xsl:template match="ncx:navLabel|ncx:text">
    <xsl:apply-templates/>
  </xsl:template>
...

В листинге 10 приведен пример иерархического NCX.

Листинг 10. Пример иерархического NCX
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" 
  "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">

<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="en">

  <head>
    <meta name="dtb:uid" content="d989d60c-2302-40d1-9c85-1c028414342a" />
    <meta name="dtb:depth"          content="-1" />
    <meta name="dtb:totalPageCount" content="-1" />
    <meta name="dtb:maxPageNumber"  content="-1" />
  </head>

  <docTitle>
    <text>Middlemarch</text>
  </docTitle>

  <navMap>
    <navPoint id="np1" playOrder="1">
      <navLabel>
        <text>Prelude</text>
      </navLabel>
      <content src="prelude.html"/>
    </navPoint>

    <navPoint id="np2" playOrder="2">
      <navLabel>
        <text>I: Miss Brooke</text>
      </navLabel>
      <content src="book1.html" />

      <navPoint id="np3" playOrder="3">
        <navLabel>
          <text>Chapter 1</text>
        </navLabel>
        <content src="chapter1.html" />
      </navPoint>
      <navPoint id="np4" playOrder="4">
        <navLabel>
          <text>Chapter 2</text>
        </navLabel>
        <content src="chapter2.html" />
      </navPoint>
   ...

Преобразование файла с использованием XSLT, приведенное в листинге 10, приводит к результату, показанному в листинге 11. Файлы примеров имеются в загрузке.

Листинг 11. Результат преобразования из NCX в END
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Middlemarch</title>
  </head>
  <body>
    <nav id="toc" epub:type="toc">
      <h1>Table of Contents</h1>
      <ol>
        <li id="np1">
          <a href="prelude.html">Prelude</a>
        </li>
        <li id="np2">
          <a href="book1.html">I: Miss Brooke</a>
          <ol>
            <li id="np3">
              <a href="chapter1.html">Chapter 1</a>
            </li>
            <li id="np4">
              <a href="chapter2.html">Chapter 2</a>
            </li>
...

Так как значения @id из исходного файла сохранены, можно написать программу валидации, гарантирующую, что все первоначальные узлы сохранились. Другие варианты дальнейшего преобразования:

  • обновление метаданных в файле OPF из старой схемы Dublin Core в метасхему @property, как указано в спецификации Publications 3.0 (см. раздел Ресурсы);
  • перенос старого контента OPF guide в функцию landmarks END;
  • перенос ссылок из OPF spine в файл NCX (если только не требуется обратно-совместимый документ).

Как правило, для создания EPUB 3-совместимых документов содержания XHTML 1.1-содержание изменять не нужно. Однако там, где имеется семантическая информация, такая как извлечения из системы управления материалами или из другого хранилища документов, можно подумать о переносе на результат семантической флексии. Дополнительная информация о семантической флексии содержится в спецификации EPUB 3 (см. раздел Ресурсы).


Рекомендации по разработке EPUB 3

До появления систем чтения EPUB 3 было бы преждевременно давать конкретные рекомендации. Однако EPUB 3 основан на быстро развивающихся Web-технологиях. Уже имеется достаточно информации, чтобы дать широкие рекомендации о том, как использовать основные базовые технологии и когда применять существующие рекомендации для создания надежной, семантической и доступной разметки.

Когда переходить на EPUB 3

Что использовать для создания электронных книг сегодня: EPUB 2 или EPUB 3? К счастью, одной из целей разработки EPUB 3 была обратная совместимость. Можно пользоваться семантическими усовершенствованиями и обогащенными метаданными EPUB 3, продолжая производить документы, которые надежно читаются на старых устройствах. На практике может оказаться, что продать такой контент на некоторых рынках электронных книг невозможно: EPUB 3 не примут ввиду установленных правил торговли. Однако "обходная загрузка" такого контента должна работать на большинстве систем чтения, поддерживающих EPUB 2. EPUB 3 должен быть и прямо-совместимым с точки зрения поддержки систем чтения — системы чтения EPUB 3 обязаны поддерживать правильные документы EPUB 2.

Многие системы чтения уже поддерживают своего рода "EPUB 2.5", когда разрешена разметка HTML5 (особенно в отношении элементов типа video, audio и canvas). Нужно ожидать, что платформы чтения с механизмами Web-браузера, такие как Apple iBooks, успешно обработают многие из элементов, разрешенных для документов содержания EPUB 3. Перед выпуском, как и в случае любых передовых Web-материалов, протестируйте их на максимально возможном количестве устройств.

Динамичный дизайн электронной книги

Один из интересных новых компонентов EPUB 3 ― модуль CSS3 Media Query. Он позволяет авторам указать, что набор правил и свойств применим только к конкретным условиям просмотра, обычно в зависимости от размера окна просмотра. Media Query можно использовать и для указания конкретных целевых значений отношения высоты к ширине, например, книжной или альбомной ориентации.

Эти функции уже используются на некоторых Web-сайтах для повышения удобства пользователей мобильных устройств. Взятые вместе, эти принципы называются динамичным Web-дизайном. Они доказали свою эффективность в Web и в некоторых отношениях даже еще больше подходят для оформления книг. Художники-оформители книг десятилетиями исследовали и экспериментировали в поисках способа эффективного представления визуальной информации на форматах различных размеров и ориентаций. (Подробнее о динамичном Web-дизайне см. в разделе Ресурсы).

Большинство книг ― это исключительно или главным образом текст. Однако для многих типов публикаций требуется более богатый макет ― из маркетинговых соображений или ввиду природы содержания книги. Книги со сложным макетом считались плохими кандидатами для преобразования в электронные книги, но EPUB 3 и использование им HTML5 и CSS3 позволяют обеспечить богатое оформление. Однако расширенные возможности влекут за собой повышенную ответственность. Нельзя игнорировать пользователей мобильных устройств, которые хотят легко читать содержание и в то же время иметь привлекательный макет. Здесь-то и соединяются методы макетирования CSS3 и динамичный дизайн электронных книг.


Развитый, динамичный макет в EPUB 3

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

Рисунок 3. Страница из книги Abroad Томаса Крейна (общедоступное изображение из Архива Интернета)
Страница из книги 'Abroad' to be adapted into EPUB 3

Подход состоит в том, чтобы ввести текст как XHTML и извлечь из макета оригинала некоторые изображения, чтобы привлечь — но не повторять — его. Так как EPUB 3 предполагает контекст обработки XHTML5/CSS3, можно использовать минимальную семантическую разметку, вместо того, чтобы охватить всю массу устаревших браузеров, как это делается в open web. В листинге 12 показана XHTML-разметка материала.

Листинг 12. Разметка для стихов
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <title>Example of Media Query in EPUB 3</title>
    <link rel="stylesheet" type="text/css" href="childrens-book-style.css" />
  </head>
  <body>
    <div epub:type="chapter">
      <h1>The Swans.</h1>
      <p>
        <span>"Ho! pretty swans,</span>
        <span>Do you know, in our Zoo'</span>
        <span>The swans of old England</span>
        <span>Are just like you?"</span>
      </p>
      <p>
        <span>"Don't tell me!"</span>
        <span>Said a cross old bird;</span>
        <span>"I know better,</span>
        <span>The thing's quite absurd.</span>
      </p>
      <p>
        <span>Their figures, I'm sure,</span>
        <span>Are not worth a glance:</span>
        <span>If you want to see style,</span>
        <span>You <em>must</em> come to France."</span>
      </p>
      <p>
        <span>With a scornful whisk</span>
        <span>The swan turned tail,</span>
        <span>Spread its wings to the breeze</span>
        <span>And was off full-sail.</span>
      </p>
      <p>
        <span>"Ho! pretty swan,</span>
        <span>Do you know, in our Zoo'</span>
        <span>The swans are not half</span>
        <span>So conceited as you?"</span>
      </p>
    </div>
  </body>
</html>

Изображения не указаны. Чтобы обеспечить динамичный дизайн, предоставим изображения в CSS. Хотя многие сторонники динамичной Web-разработки придерживаются стратегии «сначала мобильные», проще, наверное, начать адаптацию печатного издания с рабочего стола или экрана планшетного размера. В примере предполагается, что представление по умолчанию ― это крупноформатный экран. В листинге 13 показана CSS, а на рисунке 4 ― результирующая электронная книга, визуализированная в программе iBooks на устройстве Apple iPad.

Листинг 13. CSS для макета планшетного размера
@namespace epub "http://www.idpf.org/2007/ops";

body {
    font-family: Georgia, serif;
    margin: 0;
    padding: 0;
}

/* Выбор <div epub:type> целиком и применение фоновых изображений */
/* в разных положениях относительно текста. */

div[epub|type="chapter"] {
    background-image: url('childrens-book-swans.jpg'),
                      url('childrens-book-flowers.jpg');
    background-position: 100% 50%, bottom center;
    background-size: 50% auto, auto auto;
    background-repeat: no-repeat, repeat-x;
    background-color: #fdefc2;

    padding: 2em;
}

p {
    font-size: .75em;
    text-align: left;
}

p:last-child {
    padding-bottom: 2em;
}

h1 {
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 200;
}

p > span {
    display: block;
}

/* Применение модуля CSS Selector для форматирования  на основе правил */
/* содержания стихов с генерацией чередующихся строк текста с отступом. */

p > span:nth-child(even) {
    text-indent: 1em;
}

Примером служит использование синтаксиса @namespace из модуля CSS Namespaces. Пространства имен CSS позволяют оформлять элементы и атрибуты с префиксом пространства имён. Хотя в EPUB 3 не обязательно использовать пространства имен CSS, это удобно для присоединения стилей к тем элементам, к которым применяется семантическая флексия EPUB (атрибут @epub:type), вместо создания отдельных классов только ради оформления. HTML-документ обязан использовать расширение .xhtml, чтобы пространства имен CSS правильно обрабатывались большинством браузеров.

Рисунок 4. Страница из книги Abroad, визуализированная на экране планшетного размера
Страница из книги 'Abroad' на XHTML в iBooks для Apple iPad

Благодаря выравниванию изображения по правому краю и крупному декоративному бордюру макет на рисунке 4 хорошо перекликается с исходной страницей. Однако такой макет не подходит для мобильного устройства в портретном режиме, где ширины экрана не хватит для изображения и текста. Для мобильных устройств, ширина которых обычно около 480 пикселей, можно переопределить несколько элементов, как показано в листинге 14. Для CSS, показанной в листинге 14:

  • изображение лебедей сжимается, располагается по центру и предшествует тексту. орнамент внизу сокращается во избежание перекрытия с текстом стихов;
  • заголовок уменьшается и центрируется.
  • Сам текст стихотворения располагается больше по центру, чем выравнивается влево.
Листинг 14. CSS для макета размера телефона книжной ориентации
@media screen and (max-width:480px) { 

    div[epub|type="chapter"] {
        background-position: top center, bottom center;
        background-size: 30% auto, 50% auto;

        padding: 1em;
        margin: auto;
        text-align: center;
    }

    h1 {
        margin: 50% auto 0 0;
        font-size: 1em;
        text-align: center;
    }

    p {
        margin-left: 25%;
    }
}

Приведенная выше директива повторяет предыдущую CSS, так как нужно всего лишь переопределить свойства, значения которых должны измениться в новом макете. На рисунке 5 показан результат, распространенный на две страницы.

Рисунок 5. Страница из книги Abroad, визуализированная на экране телефона
Страница из книги 'Abroad' на XHTML в iBooks для Apple iPhone

Узкие представления хорошо смотрятся на макете книжного формата, но на большинстве страниц альбомного формата столь короткое стихотворение легко бы поместилось целиком. Добавим один заключительный медиазапрос (media query), чтобы устройства альбомного формата отображали стихотворение в нескольких столбцах. Эта функция входит в состав модуля CSS Text и является основной частью поддержки EPUB 3 CSS. CSS для макета телефонного размера с альбомным форматом приведена в листинге 15.

Листинг 15. CSS для макета телефонного размера с альбомным форматом
@media screen and (orientation:landscape and max-width:480px) { 
    div[epub|type="chapter"] {
        background-position: 97% 40%, bottom center;
        background-size: 20% auto, 50% auto;

        /* Теперь в большинстве браузеров мы обязаны использовать версии */
        /* с префиксами поставщика.  */
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;

        -webkit-column-gap: 0;
        -moz-column-count: 0;
        column-gap: 0;

        padding: 2em 4em 5em 4em;
    }
}

Визуализированный результат показан на рисунке 6.

Рисунок 6. Страница из книги Abroad, визуализированная на экране телефона с альбомной ориентацией
Страница из книги 'Abroad' in XHTML on Mobile Safari in landscape orientation

Включение в публикации разметки MathML

В EPUB 2 публикации могли содержать математические формулы лишь виде растровых изображений или SVG. Хотя SVG-математика может выглядеть привлекательно, она непроницаема для чтения с экрана и трудна в написании. Растровые изображения еще хуже; они не обеспечивают ни доступности, ни хорошего масштабирования на другие шрифты и размеры экрана.

EPUB 3 включает в качестве встроенного типа контента MathML. Разметку MathML можно вводить, не прибегая к каким-либо другим типам, таким как растровое изображение. В большинстве случаев устройства EPUB 3 должны поддерживать, по крайней мере, отображаемую разметку MathML.

Хотя MathML ― контент основного типа, в OPF-файле необходимо объявить, какие XHTML-страницы содержат MathML, как показано в листинге 16.

Листинг 16. Декларирование контента MathML в OPF-файле
  <manifest>
    <item href="mathml-style.css" id="css1" media-type="text/css"/>
    <item href="mathml.xhtml" properties="mathml" 
             id="page1" media-type="application/xhtml+xml"/>
    <item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
    <item id="toc" properties="nav" 
             href="toc.xhtml" media-type="application/xhtml+xml"/>
  </manifest>

В листинге 17 приведен пример простого уравнения. Хотя некоторые Web-браузеры теперь поддерживает MathML в контексте HTML5 (без указания пространства имен), EPUB 3 требует объявления контента MathML в правильном пространстве имен http://www.w3.org/1998/Math/MathML.

Листинг 17. MathML в документе содержания EPUB 3
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops" 
      xmlns:m="http://www.w3.org/1998/Math/MathML">
  <head>
    <title>Example of MathML in EPUB 3</title>
    <link rel="stylesheet" type="text/css" href="mathml-style.css" />
  </head>
  <body>

    <m:math display="block">
      <m:mrow>
        <m:mi>x</m:mi>
        <m:mo>=</m:mo>
        <m:mfrac>
          <m:mrow>
            <m:mo form="prefix">-</m:mo>
            <m:mi>b</m:mi>
            <m:mo>В±</m:mo>
            <m:msqrt>
              <m:msup>
                <m:mi>b</m:mi>
                <m:mn>2</m:mn>
              </m:msup>
              <m:mo>-</m:mo>
              <m:mn>4</m:mn>
              <m:mo>вЃў</m:mo>
              <m:mi>a</m:mi>
              <m:mo>вЃў</m:mo>
              <m:mi>c</m:mi>
            </m:msqrt>
          </m:mrow>
          <m:mrow>
            <m:mn>2</m:mn>
            <m:mo>вЃў</m:mo>
            <m:mi>a</m:mi>
          </m:mrow>
        </m:mfrac>
      </m:mrow>
    </m:math>              
  </body>
</html>

На рисунке 7 показан результат в iBooks. Чтобы все типы уравнений воспроизводились корректно, возможно, потребуется внедрить шрифт, содержащий соответствующие математические символы. В разделе Ресурсы указана информация о шрифтах STIX, используемых в научных публикациях.

Рисунок 7. Простые математические уравнения, визуализированные в EPUB 3
Уравнения в EPUB 3

Многие системы, которые выводят MathML, могут использовать именованные объекты, входящие в DTD MathML 1.0, такие как &PlusMinus;. Перед включением в публикацию EPUB 3 их необходимо преобразовать в числовые объекты. Как внешние DTD ― даже для основных типов контента, ― они не должны включаться в архивы EPUB.


Темы для дальнейшего изучения

EPUB 3 содержит множество средств для разработки передовых, истинно цифровых публикаций. Вы можете исследовать следующие темы:

  • использование HTML5 canvas в сочетании с JavaScript для создания интерактивных книг;
  • те, кто интересуется Semantic Web, могут ознакомиться с вариантами семантической флексии в EPUB 3 Structural Semantics Vocabulary;
  • семантика HTML5 и роли Accessible Rich Internet Applications Suite (WAI-ARIA) ― привлекательный метод обогащения материала для устройств-помощников или алгоритмов машинного обучения.

EPUB 3 активно расширяется. Вполне вероятно, что в будущие версии будут включены функции из новых CSS-модулей, таких как CSS Regions.


Загрузка

ОписаниеИмяРазмер
XSLT и примеры файлов для NCX-преобразованияncx-to-end.zip5 КБ
Пример EPUB 3, демонстрирующий сложный макет CSS3childrens-book-epub.zip139 КБ
Пример EPUB 3, демонстрирующий MathMLmathml-epub.zip3 КБ

Ресурсы

Научиться

Получить продукты и технологии

  • EpubCheck: последняя версия валидатора для работы с документами EPUB 2 и EPUB 3.
  • nend: полный набор инструментов XSLT и Python для конвертирования файлов из NCX в END.
  • Шрифты STIX: всеобъемлющий набор шрифтов для научно-технического сообщества.

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


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

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=XML, Open source, Web-архитектура
ArticleID=853315
ArticleTitle=Создание сложных макетов публикаций в EPUB 3 с применением HTML5, CSS3 и MathML
publish-date=12242012