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

Tạo sách điện tử EPUB 3 với HTML5, CSS3 và MathML
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.
Về đầu trang
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> và <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.
Về đầu trang
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.


Về đầu trang
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
(

Liệt kê 2. Một END tối thiểu

<html xmlns="
xmlns:epub="
<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=" 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

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

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="
xmlns:ncx="
xmlns:epub="
xmlns:xsl="

<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 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"
"

<ncx xmlns=" 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="
xmlns:epub="
<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).
Về đầu trang
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, audio và canvas). 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.
Về đầu trang
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)

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="
xmlns:epub="
<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 "

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

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

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

Về đầu trang
Đư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à

Liệt kê 17. MathML trong tài liệu nội dung EPUB 3

<?xml version="1.0"?>
<html xmlns="
xmlns:epub="
xmlns:m="
<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

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.