Tạo sách điện tử EPUB 3 với HTML5, CSS3 và MathML

Khám phá chuẩn sách điện tử mở thế hệ mới với kiểu trình bày và bố cục tiên tiến

EPUB 3.0 là phiên bản mới nhất của định dạng sách điện tử (e-book) tiêu chuẩn XML, đã sử dụng các công nghệ web hiện đại như HTML5 và CSS3. Nó vẫn tập trung vào XML bằng cách giữ lại tính năng tuần tự hóa XHTML và bổ sung thêm các phụ trợ, chẳng hạn như MathML và SVG. EPUB 3 cung cấp một loạt các tùy chỉnh để phát triển các ấn phẩm số bản địa, tiên tiến. Trong bài này, hãy tìm hiểu cách tạo ra các trang sách có bố cục trình bày phong phú bằng cách sử dụng các tính năng mới trong EPUB 3.

Liza Daly, Phó chủ tịch kỹ thuật, Safari Books Online

Ảnh của Liza DalyLiza Daly là Phó Chủ tịch về Kỹ thuật tại Safari Books Online và là kỹ sư phần mềm có kinh nghiệm về các ứng dụng web và xuất bản số. Trước đây bà thành lập Threepress Consulting, một công ty phần mềm xuất bản và năm 2010 đã phát hành Ibis Reader, trình đọc sách điện tử di động HTML5 đầu tiên. Bà là thành viên hội đồng quản trị của IDPF (International Digital Publishing Forum - Diễn đàn xuất bản số quốc tế), tổ chức tài trợ và phát triển các đặc tả sách điện tử EPUB.



16 01 2013

Giới thiệu

EPUB là định dạng XML dùng cho các sách và các ấn phẩm số có khả năng tự tương thích.và được chuẩn hóa bởi Diễn đàn xuất bản số quốc tế (IDPF). Năm 2009, EPUB 2 là định dạng sách điện tử phổ biến được hầu hết các nhà bán lẻ và hệ thống sách điện tử lớn sử dụng.

Các tệp lưu trữ ZIP của EPUB đều được đóng gói theo một cấu trúc rõ ràng. Mỗi thành phần có đặc tả riêng của mình, được hợp nhất dưới nhãn EPUB chung:

Đặc tả đóng gói
Định nghĩa phương pháp đóng gói một tài liệu EPUB.
Ấn phẩm EPUB
Bao gồm thông tin về các nội dung của sách điện tử: thông tin của gói package, tiêu đề đơn giản, thông tin tác giả và—đối với EPUB 3— còn hỗ trợ thêm các tính năng nâng cao như JavaScript hay MathML. Thành phần này được gọi là Open Container Format file.
Các tài liệu nội dung của EPUB
Thực ra nội dung của ấn phẩm chính là các file XHTML và CSS. Nó cũng bao gồm các tài nguyên nhị phân như hình ảnh, đa phương tiện và các tài liệu XML.

Các từ viết tắt thông dụng

  • CSS: Cascading stylesheet (Bản định kiểu xếp chồng)
  • DTD: Document Type Definition (Định nghĩa kiểu tài liệu)
  • HTML: Hypertext Markup Language (Ngôn ngữ đánh dấu siêu văn bản)
  • JAR: Java archive (Tệp nén java)
  • OPF: Open Packaging Format (Định dạng đóng gói mở)
  • SVG: Scalable Vector Graphics (Các đồ họa vector có thể mở rộng quy mô)
  • XHTML: Extensible Hypertext Markup Language (Ngôn ngữ đánh dấu siêu văn bản mở rộng)
  • XML: Extensible Markup Language (Ngôn ngữ đánh dấu mở rộng)
  • XSLT: Extensible Stylesheet Language Transformations (Các chuyển đổi Ngôn ngữ bản định kiểu mở rộng)

Bài này tìm hiểu một số tính năng của EPUB 3. Bạn sẽ tìm hiểu cách xác nhận hợp lệ các tài liệu EPUB 3, các chỉ dẫn, phân cấp và các tài liệu hướng dẫn phát triển. Một ví dụ sẽ hướng dẫn bạn chuyển một trang sách trẻ em thành EPUB 3. Ngoài ra, bạn sẽ tìm hiểu cách đưa MathML vào các ấn phẩm.

Tải về các ví dụ được sử dụng trong bài này.

Điều kiện tiên quyết

Các đoạn mã và ví dụ mẫu trong bài này đều xem rằng bạn đã biết qua về EPUB 2 nói riêng và các ấn phẩm dựa trên XML nói chung. Xem phần Tài nguyên để biết thêm chi tiết về EPUB 2.


Những thay đổi trong EPUB 3

EPUB 2 cung cấp tất cả các khả năng định dạng và trình bày của HTML4 và CSS2, là quá đủ cho các ấn phẩm nặng về văn bản. Tuy nhiên, các nhà xuất bản và tác giả đã nhận thấy rằng EPUB 2 không thể xử lý nhiều kiểu nội dung trong một số trường hợp như: sách đa phương tiện, sách có bố cục phức tạp, các ấn phẩm toán học và các tài liệu tương tác. Do đó vào tháng 10 năm 2011, cộng đồng IDPF và sách điện tử đã phát hành bản đặc tả cho EPUB 3.

Các hệ thống đọc EPUB 3

Tính đến tháng 12 năm 2011, chưa có hệ thống đọc nào chính thức hỗ trợ EPUB 3. Nhiều hệ thống đọc được viết bằng cách sử dụng các công cụ trình duyệt hỗ trợ HTML5, tuy vậy, chẳng hạn như WebKit, nó hỗ trợ hầu hết đặc tả nội dung EPUB 3. Điều quan trọng là bạn sử dụng một trình duyệt có hỗ trợ HTML mới nhất để kiểm tra và phát triển các tài liệu EPUB 3.

Bài này bao gồm các kỹ thuật để tạo ra các polyfill vô hại (hay còn gọi là các đoạn mã đệm) giúp bạn xuất bản một tài liệu EPUB 3 tương thích ngay cả khi không sử dụng một hệ thống đọc EPUB 3 đầy đủ. (Polyfill là thuật ngữ dùng để chỉ các đoạn mã javascript được dùng để cung cấp một chức năng (hoặc công nghệ) của các trình duyệt hiện đại cho các trình duyệt cũ. Thông qua đó, các trang web sử dụng các công nghệ mới (như HTML5) có thể chạy ổn định trên các trình duyệt cũ chưa hỗ trợ.).

Những thay đổi của EPUB 3 so với EPUB 2:

  • Tài liệu đặc tả schema cho EPUB 3 đã chuyển đổi từ XHTML 1.1 sang phiên bản XHTML của HTML5. Điều này là quan trọng cần thiết để có thể chứa các phần tử đa phương tiện từ HTML5 (như <video>, <audio><canvas>).
  • EPUB 3 đã mở rộng phạm vi cho phép các tài liệu CSS từ một tập hợp con của phiên bản CSS2.1 đến một tập hợp các mô đun hoàn thiện của CSS3 có liên quan đến việc soạn thảo tài liệu.
  • MathML đã được thêm vào XHTML5 và SVG như là một loại nội dung quan trọng hàng đầu.
  • Ngày nay, việc hỗ trợ nhiều phông chữ nhúng là bắt buộc đối với các hệ thống đọc có khả năng hiển thị CSS. Web Open Font Format là định dạng phông chữ mở trên nền Web đã được chấp nhận thêm vào để sử dụng.
  • Hỗ trợ chi tiết các kiểu trình bày hay các bố cục không theo chuẩn phương Tây, chẳng hạn như cách trình bày trang giấy theo chiều dọc hay các kiểu của các nước châu Á khác.
  • Hỗ trợ tùy chọn tương tác JavaScript trung gian bằng cách sử dụng một mô hình bảo mật tùy chỉnh.
  • Các tài liệu xuất bản đã được mở rộng thêm các thông tin metadata (siêu dữ liệu), bao gồm một số hỗ trợ cho RDFa (Resource Description Framework–in–attributes: Khung công tác mô tả tài nguyên-bằng-các thuộc tính).
  • Trung tâm điều hướng mở rộng NCX (Navigational Center eXtended) không tán thành việc tạo mục lục (TOC - table of contents) dự trên XHTML5. Tuy nhiên, NCX vẫn cho phép tương thích ngược.

Validate (xác nhận hợp lệ) các tài liệu EPUB 3

Vì EPUB 3 dựa trên khả năng tuần tự hóa của XML cho hầu hết các kiểu nội dung, nên nó tuân thủ việc validate tự động. EpubCheck là một công cụ kinh điển để kiểm tra tính hợp lệ và sự phù hợp của các tài liệu EPUB. Nó chính là một thư viện Java™ mở (Berkeley Software Distribution-licensed - được cấp phép bởi hệ thống Phân phối phần mềm Berkeley). Trong bài này, chúng ta sẽ sử dụng phiên bản dành cho nhà phát triển để làm việc với các tài liệu EPUB 3. Xem phần Tài nguyên để tìm đường link tải phiên bản mới nhất .

Chúng tôi khuyên bạn nên sử dụng phần mở rộng .xhtml cho tất cả các tài liệu nội dung EPUB. Bởi vì các trình duyệt sẽ không biên dịch nội dung HTML thành application/xhtml+xml nếu thiếu phần mở rộng đó. Việc xử lý XML là bắt buộc khi làm việc với nhiều tính năng được trình bày trong bài này, chẳng hạn như các namespace (vùng tên) CSS.

Thông thường, bạn tương tác với EpubCheck thông qua dòng lệnh sau đây.

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

Epubcheck Version 3.0b3

No errors or warnings detected.

Nếu bạn nhận được lỗi trả về java.lang.NoClassDefFoundError: com/thaiopensource/validate/SchemaReader, bạn hãy chắc chắn rằng thư mục lib/ đang nằm trong cùng thư mục với tệp JAR của EpubCheck.

EpubCheck 3 có thể tiến hành validate từng thành phần con riêng lẻ của gói EPUB, như trong Liệt kê 1. Tính năng hữu ích này được sử dụng trong các ví dụ của bài này, nó:

  • Giúp cô lập các vấn đề.
  • Giảm đi việc phải đóng gói lại gói EPUB thành ZIP thì mới thực hiện validate được.
  • Được tích hợp trong một framework kiểm thử ở mức đơn vị (unit testing famework) dùng cho chuỗi công cụ để xuất ra một kiểu tệp duy nhất.
Liệt kê 1. Chạy EpubCheck 3 dựa vào một kiểu tệp duy nhất
$ 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.

Sự điều hướng và hệ thống phân cấp trong các tài liệu EPUB 3

Mặc dù tệp TOC của NCX trong EPUB 2 đã hỗ trợ nhiều cách đánh dấu để điều hướng phân cấp và ánh xạ tới trang tương ứng, nó được bắt nguồn từ Digital Talking Book (Sách nói số - một đặc tả để tạo phiên bản điện tử cho các quyển sách không được in ra) của DAISY (Digital Accessible Information System - Hệ thống thông tin số có thể truy cập được). Định dạng DAISY đã được đặc tả rõ ràng giúp dễ dàng phát triển các trình đọc sách điện tử và hỗ trợ nhiều khả năng tiếp cận. Từ đó, NCX có thể vận hành một cách trơn tru. Tuy nhiên, đặc tả DTD của NCX là khá lớn bao gồm các tính năng không liên quan đến EPUB 2. Sự nhầm lẫn về việc bắt buộc phải có các thành phần nào của NCX trong EPUB đã dẫn đến sự phân mảnh không mong muốn và tạo ra các phần mở rộng độc quyền của một số nhà bán lẻ và các nhà cung cấp hệ thống đọc sách điện tử.

EPUB 3 không sử dụng NCX mà thay thế nó bằng END (EPUB Navigational Document – Tài liệu điều hướng của EPUB). Liệt kê 2 cho thấy một ví dụ. END sử dụng XHTML5 chứ không phải là một DTD tùy biến, do đó làm giảm số lượng các định dạng XML để thực thi và validate. Các thuộc tính EPUB tùy biến được cung cấp thông qua EPUB namespace (http://www.idpf.org/2007/ops).

Liệt kê 2. Một END tối thiểu
<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>

Phần tử <nav> của HTML5 là bắt buộc (cũng như giá trị toc của epub:type).

Khai báo END

Đặt END vào một ấn phẩm bằng cách khai báo item trong bảng kê khai manifest với giá trị nav cho thuộc tính properties, như trong Liệt kê 3.

Liệt kê 3. Đưa một END vào một OPF (EPUB Package Document - Tài liệu đóng gói EPUB)
  <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>

Việc đưa vào một tệp END là bắt buộc trong EPUB 3. Bạn cũng có thể thêm vào một tệp NCX để tận dụng tính tương thích ngược, nhưng các bộ vi xử lý EPUB 3 sẽ phải sử dụng END và bỏ qua NCX.

Tính trực quan của END

Không giống như NCX, bạn có thể đưa END vào thẳng nội dung của sách. Trong EPUB 2, nếu bạn muốn hiển thị một mục lục tùy biến cho người sử dụng (không phải mục lục có sẵn trong các chương trình eReader – Trình đọc sách điện tử), thì bạn phải tạo ra hai bản sao của cùng một nội dung—một bản theo NCX và một bản tài liệu nội dung HTML. END loại bỏ sự trùng lặp này và cho phép linh hoạt hơn nhiều trong việc trình bày một vài hay tất cả mục lục trong luồng nội dung.

Để thêm END vào luồng nội dung, chỉ cần đặt nó vào thẻ spine của OPF, xem Liệt kê 4.

Liệt kê 4. Đưa END vào luồng nội dung
  <spine>
    <itemref idref="toc" />
    <itemref idref="chapter_001" />
    ...
  </spine>

Trong các tài liệu có hệ phân cấp sâu, chẳng hạn như tài liệu hướng dẫn kỹ thuật, bạn có thể muốn đưa tất cả các cấp sâu hơn vào mục lục, nhưng chỉ muốn hiển thị các đầu mục ở cấp đầu tiên hoặc cấp thứ hai cho người dùng. Để làm được điều này, bạn có thể sử dụng thuộc tính hidden của HTML5, như trong Liệt kê 5, trên bất kỳ cấp nào mà bạn muốn dấu đi và không hiển thị cho người dùng.

Liệt kê 5. Dấu đi các cấp con khỏi mục lục
...
<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>
            ...

Có thể bạn đang thắc mắc là vì sao không thể làm được điều này bằng cách sử dụng thuộc tính display: none của CSS. Do EPUB được sử dụng trong nhiều hệ thống đọc, bao gồm cả các trình đọc màn hình không trực quan hoặc các thiết bị Braille, mà không phải tất cả các trình đọc đều hỗ trợ CSS. Nhưng hầu hết các trình duyệt web hiện đại lại hỗ trợ thuộc tính hidden. Có một cách là thêm một tệp CSS để chứa các thiết lập cho thuộc tính hiển thị của những phần tử này, như trong Liệt kê 6. Vì tệp END chỉ là một tệp HTML, nên bạn có thể thêm CSS vào thẻ head, giống như với bất kỳ bản định kiểu khác.

Liệt kê 6. Thiết lập đặc tính hiển thị
/* Never display elements with the hidden attribute */
*[hidden] {
  display: none;
}

Trên các hệ thống đọc hoặc các trình duyệt không tương thích, việc không thiết lập thuộc tính hidden sẽ khiến tất cả các phần con được hiển thị, như trong Hình 1.

Hình 1. Mục lục END không có thuộc tính hidden hay CSS
Ảnh chụp màn hình về cách bố trí tệp END không có thuộc tính ảo nào, cho thấy tất cả các phần con

Trên các trình duyệt có hỗ trợ thuộc tính hidden hoặc sau khi bạn cung cấp một đoạn mã đệm CSS, kết quả đầu ra sẽ khác hoàn toàn, như trong Hình 2.

Hình 2. Mục lục END có áp dụng thuộc tính hidden
Ảnh chụp màn hình về cách bố trí tệp END có thuộc tính ảo, cho thấy không có các phần con nào

Theo mặc định, danh sách theo thứ tự HTML sẽ được đánh số. Tuy nhiên, đặc tả END viết rằng, " . . . kiểu hiển thị mặc định của các mục danh sách phải tương ứng với CSS list-style: none." Để trình bày được theo kiểu này, hãy thêm một thông số vào đoạn mã đệm CSS của EPUB 3, như trong Liệt kê 7.

Liệt kê 7. Thiết lập kiểu của các mục danh sách
/* In a declared TOC list, never show list numbering */
nav#toc ol {
  list-style-type: none;
}

Chuyển đổi từ NCX sang END thông qua XSLT

Mặc dù END của EPUB 3 cung cấp nhiều tùy chọn hơn để bố cục và kiểm soát, nếu bạn đang muốn chuyển từ EPUB 2 sang EPUB 3 thì hãy bắt đầu xem xét chuyển đổi từ các tài liệu NCX hiện có. Vì cả hai tài liệu vào và ra đều là XML, nên đây là một ứng dụng hoàn hảo cho XSLT.

Liệt kê 8 cung cấp framework cơ bản để tạo ra tài liệu HTML có chứa mục lục.

Liệt kê 8. Khai báo các namespace (vùng tên) cần thiết cho NCX và 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>

Lưu ý việc sử dụng namespace http://www.idpf.org/2007/ops là bắt buộc, thường được gắn với tiếp đầu ngữ epub. Thêm vào namespace này chính là để hỗ trợ ngữ nghĩa của EPUB (ý nghĩa bổ sung cho một mục đích cụ thể mà một phần tử có trong một tài liệu EPUB). Nếu sử dụng EPUB 3, bạn được khuyến khích sử dụng các ngữ nghĩa có sẵn trong Structural Semantics Vocabulary (Bảng từ vựng ngữ nghĩa) để cung cấp bối cảnh cho phần mềm truy cập cũng như việc xử lý của máy tính. Xem phần Tài nguyên để biết thông tin về các giá trị có trong bảng từ vựng đó.

Để xem một ví dụ hoàn chỉnh về hiển thị sự chuyển đổi các kiểu bản đồ trang khác nhau, hãy xem ứng dụng nguồn mở nend được liệt kê trong phần Tài nguyên.

Với nét những thông tin cơ bản sẵn có, hãy bắt đầu xem qua mục lục phân cấp trong NCX và cung cấp các phần tử XHTML tương ứng. Mặc dù NCX cho phép áp dụng các kiểu khác nhau vào danh sách trang, nhưng các sách EPUB thường chỉ bao gồm ncx:navMap. Template được trích dẫn trong Liệt kê 9 cho thấy làm thế nào để xuất ra một tập hợp các node (nút) từ ncx:navMap.

Liệt kê 9. Xuất ra 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>
...

Liệt kê 10 là ví dụ về một NCX phân cấp.

Liệt kê 10. Ví dụ về một NCX có tổ chức phân cấp
<?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>
   ...

Việc chuyển đổi tệp trong Liệt kê 10 khi sử dụng XSLT dẫn đến kết quả như Liệt kê 11 dưới đây. Bạn có thể tải về các tệp ví dụ.

Liệt kê 11. Kết quả của việc chuyển đổi từ NCX sang 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>
...

Vì các giá trị @id được lưu giữ từ tệp ban đầu, nên bạn có thể sẽ viết các công cụ validate để bảo đảm rằng tất cả các node gốc đều đã được nắm giữ. Các tùy chọn khác cho việc chuyển đổi thêm bao gồm:

  • Cập nhật siêu dữ liệu trong tệp OPF từ lược đồ Dublin Core cũ đến siêu lược đồ @property, như được định nghĩa trong đặc tả Publications 3.0 (xem phần Tài nguyên).
  • Chuyển đổi nội dung guide bị phản đối của OPF sang tính năng landmarks trong END.
  • Loại bỏ thông tin trong OPF spine cho tệp NCX (trừ khi bạn đang tạo ra một tài liệu mang tính tương thích ngược).

Thông thường, không cần thiết sửa đổi nội dung XHTML 1.1 để tạo ra các tài liệu tương thích EPUB 3. Tuy nhiên, ở nơi có sẵn thông tin ngữ nghĩa, chẳng hạn như việc kéo từ một hệ thống quản lý nội dung hoặc kho lưu trữ tài liệu khác, hãy xem xét áp dụng biến tố ngữ nghĩa cho kết quả đầu ra. Đặc tả EPUB 3 có thông tin thêm về biến tố ngữ nghĩa (xem phần Tài nguyên).


Các hướng dẫn phát triển EPUB 3

Chỉ đến khi nào các hệ thống sẵn sàng hỗ trợ đọc EPUB 3, còn bây giờ vẫn còn là quá sớm để đưa ra các hướng dẫn thực hành cụ thể cho định dạng này. Tuy nhiên, EPUB 3 dựa trên việc hoàn thiện nhanh chóng các công nghệ web. Đã có đủ thông tin khuyến cáo về cách sử dụng các công nghệ cơ bản và thời điểm sử dụng các hướng dẫn thực hành tốt nhất để tạo ra cách đánh dấu có khả năng truy cập, ngữ nghĩa, chắc chắn.

Thời điểm tạo ra EPUB 3

Bạn nên sử dụng EPUB 2 hay EPUB 3 để tạo ra sách điện tử? Thật may mắn là tính tương thích ngược đã trở thành một mục tiêu thiết kế của EPUB 3. Bạn sẽ nhận được lợi ích từ những cải tiến ngữ nghĩa và siêu dữ liệu phong phú trong EPUB 3 trong khi vẫn có thể đọc được trên các Trình đọc sách điện tử (eReader) cũ. Trong thực tế, có khả năng là bạn không thể bán những nội dung như vậy trong một số chợ sách điện tử; chúng có thể không chấp nhận EPUB 3 vì các quy định kinh doanh. Tuy nhiên, có thể hy vọng "việc nhận" (sideloading) nội dung như vậy sẽ làm việc với hầu hết các hệ thống đọc EPUB 2 phù hợp. EPUB 3 cũng đã được thiết kế để tiến tới tương thích về mặt hỗ trợ hệ thống đọc—một hệ thống đọc EPUB 3 phải hỗ trợ các tài liệu EPUB 2 hợp lệ.

Nhiều hệ thống đọc đã hỗ trợ một loại "EPUB 2.5", cho phép hiển thị HTML5 (đặc biệt là liên quan đến các phần tử video, audiocanvas). Bạn nên hy vọng các nền tảng đọc sách điện tử (eReading) có các công cụ trình duyệt web, chẳng hạn như Apple iBooks, để trình diễn thành công nhiều phần tử được phép trong các tài liệu nội dung EPUB 3. Cũng giống như với bất kỳ nội dung web hàng đầu nào, hãy kiểm tra nội dung trong các trình đọc càng nhiều càng tốt trước khi phát hành.

Responsive eBook design (Thiết kế sách điện tử mang tính đáp ứng)

Mô đun CSS3 Media Query (Truy vấn phương tiện CSS3) là một thành phần mới thú vị của EPUB 3. Media Query cho phép các tác giả quy định một tập hợp các quy tắc và các đặc tính chỉ áp dụng cho một điều kiện đọc sách cụ thể, thường dựa trên kích cỡ của khung nhìn. Bạn cũng có thể sử dụng Media Query để thiết lập tỷ lệ chiều cao và chiều rộng cụ thể, chẳng hạn như hướng thẳng đứng so với hướng nằm ngang.

Những tính năng này vẫn đang sử dụng trên một số trang web để cung cấp những trải nghiệm người dùng được cải thiện trên các thiết bị di động. Tóm lại, những nguyên tắc này được gọi là Responsive Web Design (thiết kế web mang tính đáp ứng). Các kỹ thuật này đã được chứng minh là có hiệu quả trên nền web và chúng cũng thích hợp trong việc thiết kế sách. Các nhà thiết kế sách đã rút ra từ nhiều thập kỷ nghiên cứu và thử nghiệm về cách trình bày hiệu quả thông tin hình ảnh theo nhiều kích cỡ và hướng hiển thị khác nhau. (Xem phần Tài nguyên để biết thêm về Responsive Web Design).

Hầu hết sách điện tử chủ yếu là văn bản. Tuy nhiên, nhiều ấn phẩm yêu cầu bố cục phải phong phú hơn vì các lý do tiếp thị hoặc vì để phù hợp với nội dung. Các sách tập trung vào bố cục đã được xem là những ứng cử viên nghèo nàn về chuyển đổi sách điện tử, nhưng EPUB 3 với việc sử dụng HTML5 và CSS3 cho phép các thiết kế tiên tiến hơn. Mặc dù quyền lực càng lớn, trách nhiệm càng cao. Bạn không thể bỏ mặc những người dùng các thiết bị di động, những người muốn đọc nội dung một cách dễ dàng với các bố cục hấp dẫn. Đây là nơi các kỹ thuật kết hợp về bố cục CSS3 và Responsive eBook Design gặp nhau.


Bố cục tiên tiến, mang tính đáp ứng trong EPUB 3

Những quyển sách có nhiều minh họa, sách dạy nấu ăn, sách giáo khoa và sách thi ca đã rất khó để chuyển đổi sang nội dung mang tính thích ứng được. Trong phần này, hãy xem làm thế nào để cải biên một trang từ cuốn sách thơ ca dành cho trẻ em, trong Hình 3, thành EPUB 3. Từ cải biên đã được sử dụng thay cho chuyển đổi, vì quá trình này có tính nghệ thuật y như tính kỹ thuật

Hình 3. Một trang từ Abroad của Thomas Crane (hình ảnh được lấy từ Kho lưu trữ công cộng trên Internet)
Ảnh chụp màn hình từ cuốn sách 'Abroad' để được thích ứng trong EPUB 3

Cách tiếp cận này là nắm giữ nội dung văn bản như XHTML rồi trích ra một số hình ảnh để gợi lên—nhưng không tạo lại—bố cục ban đầu. Do EPUB 3 giả định một bối cảnh xử lý XHTML5/CSS3, nên bạn có thể sử dụng cách đánh dấu ngữ nghĩa tối thiểu thay vì cung cấp nhiều trình duyệt cũ, như bạn thường làm trên trang web mở. Liệt kê 12 cho thấy cách đánh dấu XHTML cho nội dung.

Liệt kê 12. Cách đánh dấu thi ca
<?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>

Đoạn mã trên không chứa hình ảnh nào. Để cho thuận tiện, các hình ảnh sẽ được cung cấp theo CSS. Mặc dù nhiều người ủng hộ phát triển Responsive Web tán thành cách tạo ra phiên bản dành cho di động trước tiên, sau đó mới cải biên để hiển thị trên máy tính hay tablet (máy tính bảng). Ví dụ, người ta giả định rằng khung nhìn mặc định là một màn hình dạng lớn. Liệt kê 13 cho thấy CSS và Hình 4 cho thấy sách điện tử kết quả khi được hiển thị trong iBooks trên iPad của Apple.

Liệt kê 13. CSS cho một bố cục màn hình có kích cỡ máy tính bảng
@namespace epub "http://www.idpf.org/2007/ops";

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

/* Select the entire <div epub:type> and apply the background 
   images at various positions relative to the text. */

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;
}

/* Use the CSS Selector module to apply rule-based formatting to the 
   poetry content, generating alternating rows of indented text. */

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

Ví dụ này đang sử dụng cú pháp @namespace từ các mô đun CSS Namespaces. Các CSS Namespaces cho phép định kiểu các phần tử và các thuộc tính có các tiền tố là namespace đó. Mặc dù không nhất thiết phải sử dụng các CSS namespaces trong EPUB 3, nhưng thật thuận tiện để đính kèm các kiểu dáng cho những phần tử đó với biến tố ngữ nghĩa của EPUB (thuộc tính @epub:type) chứ không phải tạo ra các lớp riêng biệt chỉ để định kiểu. Tài liệu HTML phải sử dụng một phần mở rộng .xhtml phù hợp với hầu hết các trình duyệt để xử lý đúng các vùng tên CSS.

Hình 4. Trang của cuốn sách Abroad được hiển thị trên một màn hình có kích cỡ máy tính bảng
Ảnh chụp màn hình một trang của cuốn sách 'Abroad' bằng XHTML trong iBooks trên iPad

Với hình ảnh canh lề phải và biên giới trang trí lớn, người ta có thể cho rằng bố cục trong Hình 4 gợi lên trang gốc. Tuy nhiên, việc trình bày này không thích hợp với một thiết bị di động trong chế độ hiển thị thẳng đứng, ở đó chiều rộng sẽ không đủ cho cả hình ảnh lẫn văn bản. Đối với các thiết bị di động, thường có độ rộng khoảng 480 pixel, bạn có thể ghi đè lên một số phần tử, như trong Liệt kê 14. Với CSS trong Liệt kê 14:

  • Hình ảnh của những con thiên nga sẽ co lại, trở thành trung tâm và xuất hiện trước văn bản. Hình ảnh trang trí ở phía dưới cùng sẽ co lại để tránh lấn át nội dung của bài thơ.
  • Tiêu đề sẽ trở nên nhỏ hơn và được canh ở giữa.
  • Bản thân văn bản bài thơ sẽ ở giữa nhiều hơn chứ không phải được canh lệch hẳn sang lề trái.
Liệt kê 14. CSS cho bố cục thẳng đứng của màn hình có kích cỡ điện thoại
@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%;
    }
}

Chỉ dẫn ở trên làm theo CSS trước đó, vì vậy nó chỉ cần ghi đè lên các đặc tính có giá trị đã thay đổi theo bố cục mới. Hình 5 cho thấy kết quả, trải rộng trên hai trang.

Hình 5. Trang từ cuốn sách Abroad được hiển thị trên màn hình có kích cỡ điện thoại
Ảnh chụp màn hình một trang của cuốn sách 'Abroad' bằng XHTML trong iBooks trên Apple iPhone

Sự trình bày hẹp về chiều rộng hoạt động tốt trong một bố cục thẳng đứng, nhưng một bài thơ ngắn như vậy có thể dễ dàng ăn khớp, hoàn toàn được trình bày trên hầu hết các trang nằm ngang. Bạn có thể thêm một truy vấn phương tiện cuối cùng để cho phép các thiết bị định hướng nằm ngang trình bày các bài thơ theo nhiều cột. Tính năng này là một phần của mô đun Text của CSS và là một phần cốt lõi trong việc hỗ trợ CSS 3 của EPUB. CSS với bố cục hiển thị nằm ngang của màn hình có kích cỡ điện thoại trong Liệt kê 15.

Liệt kê 15. CSS cho bố cục nằm ngang của màn hình có kích cỡ điện thoại
@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;

        /* For now we are required to use the vendor-prefixed versions in most browsers */
        -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;
    }
}

Hình 6 cho thấy kết quả được hiển thị.

Hình 6. Trang từ cuốn sách Abroad được hiển thị trên một màn hình có kích cỡ điện thoại theo hướng nằm ngang
Ảnh chụp màn hình một trang của cuốn sách 'Abroad' trong XHTML trên Mobile Safari theo hướng thẳng đứng

Đưa MathML vào các ấn phẩm

Trong EPUB 2, các ấn phẩm có thể đưa vào nội dung toán học chỉ bằng cách sử dụng hình ảnh hoặc SVG. Mặc dù toán học SVG có thể tạo ra kết quả đầu ra hấp dẫn, nhưng nó cản trở không cho các trình đọc nhìn thấy và khó viết. Các hình ảnh thì còn tồi tệ hơn vì chúng không cung cấp khả năng truy cập cũng như không thay đổi phông chữ phù hợp và các kích cỡ hiển thị khác nhau.

EPUB 3 có MathML như một kiểu nội dung EPUB nguyên gốc. Có thể cung cấp việc đánh dấu MathML mà không cần bất kỳ sự dự phòng nào khác, ví dụ như một hình ảnh. Các trình đọc của EPUB 3 là cần thiết để ít nhất hỗ trợ MathML hiển thị trong hầu hết các trường hợp.

Mặc dù MathML là một kiểu nội dung cốt lõi, điều cần thiết là bạn khai báo các trang XHTML nào có MathML trong tệp OPF, như trong Liệt kê 16.

Liệt kê 16. Khai báo nội dung MathML trong tệp 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>

Liệt kê 17 cho thấy một phương trình đơn giản. Mặc dù hiện nay một số trình duyệt web hỗ trợ MathML trong bối cảnh HTML5 (không cần tạo namespace), nhưng EPUB 3 vẫn yêu cầu khai báo nội dung MathML trong namespace đúng là http://www.w3.org/1998/Math/MathML.

Liệt kê 17. MathML trong tài liệu nội dung 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>

Hình 7 cho thấy kết quả hiển thị trong iBooks. Bạn có thể cần nhúng một phông chữ gồm có các ký hiệu toán học phù hợp cho tất cả các kiểu phương trình để hiển thị đúng. Xem phần Tài nguyên để biết thông tin về các Fonts của STIX để sử dụng trong các ấn phẩm khoa học.

Hình 7. Các phương trình toán học đơn giản được hiển thị trong EPUB 3
Ảnh chụp màn hình một phương trình trong một cuốn sách EPUB 3

Nhiều hệ thống, cung cấp MathML, có thể sử dụng các thực thể có tên là một phần của DTD của MathML 1.0, chẳng hạn như &PlusMinus;. Bạn cần chuyển đổi những thực thể này thành các thực thể số trước khi đưa vào một ấn phẩm EPUB3. Như các DTD bên ngoài, ngay cả đối với các kiểu nội dung cốt lõi, chúng không nên được đưa vào kho lưu trữ của EPUB.


Các chủ đề cần nghiên cứu thêm

EPUB 3 cung cấp nhiều tùy chọn cho việc phát triển các ấn phẩm nguyên gốc số, tiên tiến. Bạn có thể khám phá các chủ đề sau.

  • Sử dụng canvas của HTML5 kết hợp với JavaScript cho các sách tương tác.
  • Nếu bạn quan tâm đến Semantic Web, hãy tự mình làm quen với các tùy chọn biến tố ngữ nghĩa trong Structural Semantics Vocabulary của EPUB 3.
  • Các vai trò ngữ nghĩa học HTML5 và WAI-ARIA (Accessible Rich Internet Applications Suite - Bộ dụng cụ các ứng dụng Internet phong phú có khả năng truy cập) đưa ra một phương pháp hấp dẫn để làm phong phú thêm nội dung dành cho người dùng phù hợp với các thiết bị hỗ trợ hoặc các thuật toán trong máy.

EPUB 3 vẫn đang được mở rộng. Có thể các tính năng từ các mô đun CSS mới, như CSS Regions (Các vùng CSS) sẽ được tích hợp trong các bản sửa đổi trong tương lai.


Các tải về

Mô tảTênKích thước
XSLT and sample files for NCX transformationncx-to-end.zip5KB
A sample EPUB 3 demonstrating advanced CSS3 layoutchildrens-book-epub.zip139KB
A sample EPUB 3 demonstrating MathMLmathml-epub.zip3KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=855193
ArticleTitle=Tạo sách điện tử EPUB 3 với HTML5, CSS3 và MathML
publish-date=01162013