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

Chia sẻ: Nhung Nhung | Ngày: | Loại File: PDF | Số trang:21

Thêm vào BST

Báo xấu

115
lượt xem 11
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

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

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ư , và ).  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 (http://www.idpf.org/2007/ops). Liệt kê 2. Một END tối thiểu Example Contents Chapter 1
Phần tử 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) ... 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
... 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 ... Chapter 1 Chapter 1 subsection Chapter 1 subsection 1 ... 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 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 ...
Table of Contents ... 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
Middlemarch Prelude I: Miss Brooke Chapter 1 Chapter 2 ... 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 Middlemarch
Table of Contents Prelude I: Miss Brooke Chapter 1 Chapter 2 ... 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 Example of Media Query in EPUB 3 The Swans. "Ho! pretty swans, Do you know, in our Zoo'
The swans of old England Are just like you?" "Don't tell me!" Said a cross old bird; "I know better, The thing's quite absurd. Their figures, I'm sure, Are not worth a glance: If you want to see style, You must come to France." With a scornful whisk The swan turned tail, Spread its wings to the breeze And was off full-sail. "Ho! pretty swan, Do you know, in our Zoo' The swans are not half So conceited as you?" Đ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 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 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 Example of MathML in EPUB 3 x
= - b ± b 2 - 4 a c 2 a 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