「翻译」数字漫画协会 EPUB3 固定布局 规格指南 ver.1.0

Posted on by ココロ

デジタルコミック協議会 EPUB3 固定レイアウト 仕様ガイド ver.1.0 原文 PDF 翻译链接

注：由于 Github 网页端不支持示例代码中的彩色部分，请使用本地 Markdown 阅读器查看或者前往 Releases 页面 下载 PDF 格式查看

本指南是用于漫画电子书制作开发和阅读器（RS）的 EPUB3 固定布局规范的总结。 目前，IDPF（国际数字出版论坛 International Digital Publishing Forum）指定的 EPUB3 规范中允许多样的写法，这导致了各方制作的文件有差别，因阅读器的差异不能顺利显示的情况。希望本指南的使用，能促进数字漫画的制作和出版，使尽可能更多的漫画在尽可能更多的电子书店上架，为读者带来丰富的阅读体验。


1. 基本的目录结构和文件名

root 文件夹
├── mimetype
├── META-INF 文件夹
│   └── container.xml
└── item 文件夹
    ├── standard.opf
    ├── navigation-documents.xhtml
    ├── image 文件夹
    ├── style 文件夹
    └── xhtml 文件夹

  • root 根文件夹的名字由出版社指定

  • 文件和文件夹的名字原则上使用小写字母（META-INF 和（企业）管理代码等有个别规定除外）

  • 资源文件夹的名字与元信息文件(opf)中的 <item> 标签对应，使用 “item”（规范允许任意名字）

    译注：opf文件是记录电子书元信息的文件，暂称“元信息文件(opf)”，下同

  • 所有的资源文件应该放在 item 目录下的指定文件夹里：

    图片文件 ：image 文件夹

    CSS 样式文件 ：style 文件夹

    xhtml 文件 ：xhtml 文件夹

  • 以下文件的文件名不变

    root 目录下的 mimetype

    META-INF 目录下的 container.xml


2. 文件规范

  • 正文文本每次换页时，都分割为新创建的 XHTML 文件

  • 文件的标题基于该作品的标题

    XHTML 文档中 <title> 标签的内容，除非出版商有特别规定的情况，应该填上作品的标题，与元信息文件(opf)中的作品名一致。主副标题和系列名中的空格使用全角空格。合集等包含多个不同作品的情况，使用出版商指定的名字。

  • 只在封面和导航文档中使用 epub:type

    在 EPUB 标准中，可以用 epub:type 的属性来指定页面的作用。但是，目前没有阅读器用到了这一特性，也无法保证使用这一特性的 CSS 文件的可用性。因此，目前仅指定未来阅读器采用可能性较高的两处。

    封面图片页面 <body epub:type="cover" class="p-cover">

    导航文档 <nav epub:type="toc" id="toc">

    epub:type 属性应当写在 class 和 id 的前面


3. 简单的编码规则

  • 字符编码推荐 UTF-8N（无 BOM）
  • 换行符在同一个文件中不可混用
  • 不推荐使用本指南中没有涉及到的 HTML 标签和 CSS 属性
  • 若非因出版社的要求，不插入注释
  • 正文中标签中属性的先后顺序是：epub:type → class → id → src/href → alt
  • 为了避免混乱，<p> 标签尽可能不加 class 属性
  • 正文 XHTML 文档中的 html 标签之后进行换行

对于块级元素（如 <div>），请确保开始标签和结束标签前后要进行换行。但是，对于 <p> 标签和 <h1> – <h6> 标签，请不要在开始标签和结束标签之前进行换行。

<!-- 错误的标签换行 -->
<h1>
文本
</h1>
<div><p>文本</p></div>

<!-- 正确的标签换行 -->
<h1>文本</h1>
<div>
 <p>文本</p>
</div>

对于内联元素（如 <span>），原则上避免换行。对于 <a> 标签的情况，除非 <a> 标签中包含块级元素（包括 <p>）或 <img>，否则不要进行换行。


4. EPUB 的配置文件模板列表

  • 模板和文件的命名规则

除非另有说明，否则请使用以下模板和文件名规定。 如需要除此处列出的模板或文件名规定之外的模板或文件名规定的情况，请遵循各出版商的规定。

  • 源码的格式化

关于源码的格式，例如的换行符和缩进，以及元素中的标签属性顺序，按照出版商的规定执行。 除非另有说明，否则请根据以下模板进行整理规范进行格式化。

  • 关于模板中的颜色表示

灰色：所有作品共有的部分（原则上不更改）

蓝色：在所有作品共有的部分中，每个作品需要单独更改的部分

红色：使用此模板的作品特有的、应该注意的部分（原则上不更改）

黑色：不固定的部分（因作品和出版商而异）

4-1: mimetype

application/epub+zip

4-2: container.xml

  • 放在 META-INF 文件夹中

<?xml version=”1.0″?>

<container

  version=”1.0″

  xmlns=”urn:oasis:names:tc:opendocument:xmlns:container” >

<rootfiles>

<rootfile

  full-path=”item/standard.opf”

  media-type=”application/oebps-package+xml” />

</rootfiles>

</container>

4-3: standard.opf

  • 如果阅读器具有显示 <dc:title> 信息的功能，所有内容一定会被阅读系统显示在屏幕上的某处。

  • 如果阅读器具有显示 <dc:creator> 信息的功能，并且可能有多个 <dc:creator> 的情况 ，所有内容一定会被阅读系统显示在屏幕的某处。（用于连接多个作者姓名的符号，和（各参与者）职责的表示，会由阅读器自行决定。）

  • 是逐个划分多个作者姓名到多个 <dc:creator> ，还是将它们全部列在同一个 <dc:creator> 中，请遵循出版商的说明。 在分多个标签的情况下，应由出版商指定各个作者的“role”属性和显示顺序。

  • 由 file-as 指定的排列用假名不会显示在读者的阅读器上。

  • 文件ID（unique-identifier）的编码方案没有确定的制度，由出版商决定。没有特别规定的情况，可使用 uuid。

  • 更新日期在没有特别规定的情况下，考虑到之后文件管理的便利，请使用预定交付的日期。

  • 更新日期不会显示给读者。

  • 封面图象的文件名在没有特别规定的情况下，为了阅读器显示缩略度的速度，请全部使用统一名称(cover.jpg)。

  • 对于从左向右阅读的作品，<spine> 的 page-progression-direction 由 rtl 改为 ltr。

  • 为了避免 <spine> 的 <itemref> 中 idref 属性重复的文件不被显示（如 Readium），及页面死循环（如Firefox 的 EPUBReader），同一张图片多次出现的场合，以防万一建议准备一个单独的 XHTML 文件来调用图像（例如，white2.xhtml 为第二次出现的图像）

  • （本指南）与电书协的 Reflow 型EPUB3指南的不同之处有以下几点：

    ◇ <package> 标签增加 prefix 属性

    ◇ <!-- Fixed-Layout Documents指定 --> 部分增加两个 <meta> 标签

    ◇ 样式表只有 fixed-layout-jp.css

    ◇ 采用内置svg。SVG 直接嵌入 XHTML 文档中。考虑到一些不支持 svg 的阅读系统，在 <item> 的 XHTML 文件中的添加相应的图片作为备选

    ◇ 在封面页的 <spine> 中的 <itemref>标签内增加 properties ="rendition: page-spread-center"

<?xml version=”1.0″ encoding=”UTF-8″?>

<package

  xmlns=”http://www.idpf.org/2007/opf”

  version=”3.0″

  xml:lang=”ja”

  unique-identifier=”unique-id“

  prefix=”rendition: http://www.idpf.org/vocab/rendition/#ebpaj: http://www.ebpaj.jp/”

>

<metadata xmlns:dc=”http://purl.org/dc/elements/1.1/”>

<!– 作品名 –>

<dc:title id=”title”>作品名1</dc:title>

<meta refines=”#title” property=”file-as”>セイレツヨウサクヒンメイカナ01</meta>

<!– 著者名 –>

<dc:creator id=”creator01“>著作者名1</dc:creator>

<meta refines=”#creator01” property=”role” scheme=”marc:relators”>aut</meta>

<meta refines=”#creator01” property=”file-as”> セ イ レ ツ ヨ ウ チ ョ サ ク シ ャ メ イ カ ナ 01</meta>

<meta refines=”#creator01” property=”display-seq”>1</meta>

<dc:creator id=”creator02“>著作者名2</dc:creator>

<meta refines=”#creator02” property=”role” scheme=”marc:relators”>aut</meta>

<meta refines=”#creator02” property=”file-as”> セ イ レ ツ ヨ ウ チ ョ サ ク シ ャ メ イ カ ナ 02</meta>

<meta refines=”#creator02” property=”display-seq”>2</meta>

<!– 出版社名 –>

<dc:publisher id=”publisher”>出版社名</dc:publisher>

<meta refines=”#publisher” property=”file-as”>セイレツヨウシュッパンシャメイカナ </meta>

<!– 言語 –>

<dc:language>ja</dc:language>

<!– ファイルid –>

<dc:identifier id=”unique-id“>urn:uuid:860ddf31-55a4-449a-8cc9-3c1837657a15</dc:identifier>

<!– 更新日 –>

<meta property=”dcterms:modified”>2012-01-01T00:00:00Z</meta>

<!– Fixed-Layout Documents指定 –>

<meta property=”rendition:layout”>pre-paginated</meta>

<meta property=”rendition:spread”>landscape</meta>

<!– etc. –>

<meta property=”ebpaj:guide-version”>1.1</meta>

</metadata>

<manifest>

<!– navigation –>

<item media-type=”application/xhtml+xml” id=”toc” href=”navigation-documents.xhtml” properties=”nav”/>

<!– style –>

<item media-type=”text/css” id=”fixed-layout-jp” href=”style/fixed-layout-jp.css“/>

<!– image –>

<item media-type=”image/jpeg” id=”cover” href=”image/cover.jpg“ properties=”cover-image”/>

<item media-type=”image/jpeg” id=”i-white” href=”image/i-white.jpg”/>

<item media-type=”image/jpeg” id=”i-001″ href=”image/i-001.jpg”/>

<item media-type=”image/jpeg” id=”i-002″ href=”image/i-002.jpg”/>

<item media-type=”image/jpeg” id=”i-003″ href=”image/i-003.jpg”/>

<item media-type=”image/jpeg” id=”i-004″ href=”image/i-004.jpg”/>

<item media-type=”image/jpeg” id=”i-005″ href=”image/i-005.jpg”/>

<item media-type=”image/jpeg” id=”i-colophon” href=”image/i-colophon.jpg”/>

<!– xhtml –>

<item media-type=”application/xhtml+xml” id=”p-cover” href=”image/cover.jpg” properties=”svg” fallback=”cover”/>

<item media-type=”application/xhtml+xml” id=”p-white” href=”xhtml/p-white.xhtml” properties=”svg” fallback=”i-white”/>

<item media-type=”application/xhtml+xml” id=”p-001″ href=”xhtml/p-001.xhtml” properties=”svg” fallback=”i-001″/>

<item media-type=”application/xhtml+xml” id=”p-002″ href=”xhtml/p-002.xhtml” properties=”svg” fallback=”i-002″/>

<item media-type=”application/xhtml+xml” id=”p-003″ href=”xhtml/p-003.xhtml” properties=”svg” fallback=”i-003″/>

<item media-type=”application/xhtml+xml” id=”p-004″ href=”xhtml/p-004.xhtml” properties=”svg” fallback=”i-004″/>

<item media-type=”application/xhtml+xml” id=”p-005″ href=”xhtml/p-005.xhtml” properties=”svg” fallback=”i-005″/>

<item media-type=”application/xhtml+xml” id=”p-colophon” href=”xhtml/p-colophon.xhtml” properties=”svg” fallback=”i-colophon”/>

<item media-type=”application/xhtml+xml” id=”p-white2″ href=”xhtml/p-white2.xhtml” properties=”svg” fallback=”i-white”/>

</manifest>

<spine page-progression-direction=”rtl“>

<itemref linear=”yes” idref=”p-cover” properties=”rendition:page-spread-center“/>

<itemref linear=”yes” idref=”p-white” properties=”page-spread-right”/>

<itemref linear=”yes” idref=”p-001″ properties=”page-spread-left”/>

<itemref linear=”yes” idref=”p-002″ properties=”page-spread-right”/>

<itemref linear=”yes” idref=”p-003″ properties=”page-spread-left”/>

<itemref linear=”yes” idref=”p-004″ properties=”page-spread-right”/>

<itemref linear=”yes” idref=”p-005″ properties=”page-spread-left”/>

<itemref linear=”yes” idref=”p-colophon” properties=”page-spread-right”/>

<itemref linear=”yes” idref=”p-white2″ properties=”page-spread-left”/>

</spine>

</package>

<参考信息>

为了适配屏幕大小并快速显示页面，建议在描述 OPF 文件中的标准大小时进行如下描述：

  • 为 <package> 标签增加固定布局用的前缀
  • 为 <metadata> 增加页面图片的标准大小
  • 使所有的页面长宽相同，在下文中蓝色的部分中以 px 为单位统一记录

<?xml version=”1.0″ encoding=”UTF-8″?>

<package

  xmlns=”http://www.idpf.org/2007/opf”

  version=”3.0″

  xml:lang=”ja”

  unique-identifier=”unique-id”

  prefix=”rendition: http://www.idpf.org/vocab/rendition/#

     ebpaj: http://www.ebpaj.jp/

       fixed-layout-jp: http://www.digital-comic.jp/”

>

 

<metadata xmlns:dc=”http://purl.org/dc/elements/1.1/”>

 

(※中略)

 

<!– Fixed-Layout Documents指定 –>

<meta property=”rendition:layout”>pre-paginated</meta>

<meta property=”rendition:spread”>landscape</meta>

 

<!– 基準サイズ –>

<meta property=”fixed-layout-jp:viewport”>width=848, height=1200</meta>

 

<!– etc. –>

<meta property=”ebpaj:guide-version”>1.1</meta>

</metadata>

 

(※後略)

4-4: navigation-documents.xhtml

  • 链接项和列表的层次结构根据作品内容而变化
  • 除非出版商另有指示，请只写入封面、目录和版权页面的链接
  • 本规范不支持在导航文档中包含非链接项目
  • 导航目录的实现样式由阅读器决定
  • 即使是将导航文档作为正文目录使用的情况，也应参考下文中正文页面的例子，进行样式表等的引入
  • 如果文件名是序号类型的，请作相应调整（在下面的示例中，目录为 p-001.xhtml）

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE html>

<html

  xmlns=”http://www.w3.org/1999/xhtml”

  xmlns:epub=”http://www.idpf.org/2007/ops”

  xml:lang=”ja”

>

<head>

<meta charset=”UTF-8″/>

<title>Navigation</title>

</head>

<body>

<nav epub:type=”toc” id=”toc”> <h1>Navigation</h1>

<ol>

<li><a href=”xhtml/p-cover.xhtml”>表紙</a></li>

<li><a href=”xhtml/p-001.xhtml”>目次</a></li>

<li><a href=”xhtml/p-colophon.xhtml”>奥付</a></li>

</ol>

</nav>

</body>

</html>

4-5: XHTML 文档文件

  • 封面页面 [cover.xhtml]

    以下三个位置以蓝色列出页面的原始大小

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE html>

<html

  xmlns=”http://www.w3.org/1999/xhtml”

  xmlns:epub=”http://www.idpf.org/2007/ops”

  xml:lang=”ja”

>

<head>

<meta charset=”UTF-8″/>

<title>作品名</title>

<link rel=”stylesheet” type=”text/css” href=”../style/fixed-layout-jp.css“/>

<meta name=”viewport” content=”width=848, height=1200“/>

</head>

<body epub:type=”cover”>

<div class=”main”>

 

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″

  xmlns:xlink=”http://www.w3.org/1999/xlink”

  width=”100%” height=”100%” viewBox=”0 0 848 1200“>

<image width=”848” height=”1200” xlink:href=”../image/cover.jpg“/>

</svg>

 

</div>

</body>

</html>

  • 正文页面 [p-***.xhtml] ※例如「p-002.xhtml」

    与封面相同，但没有 epub:type ="cover"

    作品内各页面大小统一

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE html>

<html

  xmlns=”http://www.w3.org/1999/xhtml”

  xmlns:epub=”http://www.idpf.org/2007/ops”

  xml:lang=”ja”

>

<head>

<meta charset=”UTF-8″/>

<title>作品名</title>

<link rel=”stylesheet” type=”text/css” href=”../style/fixed-layout-jp.css“/>

<meta name=”viewport” content=”width=848, height=1200“/>

</head>

<body>

<div class=”main”>

 

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″

  xmlns:xlink=”http://www.w3.org/1999/xlink”

  width=”100%” height=”100%” viewBox=”0 0 848 1200“>

<image width=”848” height=”1200” xlink:href=”../image/i-002.jpg“/>

</svg>

 

</div>

</body>

</html>

<参考>

在文本中指定图像映射（可点击图片）时，请进行以下操作：

  • 在 <a> 标签的 xlink:href 属性中输入目标链接的文件名
  • <rect> 标签的 x 和 y 属性指定点击范围的起始位置（左上角）的坐标
  • <rect> 标签的 width 和 height 属性指定点击范围的大小

<?xml version=”1.0″ encoding=”UTF-8″?>

<!DOCTYPE html>

<html

  xmlns=”http://www.w3.org/1999/xhtml”

  xmlns:epub=”http://www.idpf.org/2007/ops”

  xml:lang=”ja”

>

<head>

<meta charset=”UTF-8″/>

<title>作品名</title>

<link rel=”stylesheet” type=”text/css” href=”../style/fixed-layout-jp.css“/>

<meta name=”viewport” content=”width=848, height=1200“/>

</head>

<body>

<div class=”main”>

<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″

  xmlns:xlink=”http://www.w3.org/1999/xlink”

  width=”100%” height=”100%” viewBox=”0 0 848 1200“>

<image width=”848” height=”1200” xlink:href=”../image/i-001.jpg“/>

<a xlink:href=”p-002.xhtml” target=”_top”><rect fill-opacity=”0.0″ x=”476″ y=”1000″ width=”300″ height=”60″/></a>

<a xlink:href=”p-colophon.xhtml” target=”_top”><rect fill-opacity=”0.0″ x=”476″ y=”1075″ width=”300″ height=”60″/></a>

</svg>

 

</div>

</body>

</html>

关于默认的 CSS 文件

样式表的组成

fixed-layout-jp.css ······ 从 XHTML 文件中调用的文件

固定样式不支持 @import，请勿使用其他样式

CSS文件的使用规则

  • 原则上不修改默认 CSS

    原则上，请不要修改本指南在示例中提供的 CSS 文件。 此 CSS 文件未考虑需要复杂规范的布局。 更改像以下 CSS 内容时要注意：

    ​ 改变 class 的名字

    ​ 给 class 添加属性

    ​ 移动 class 的位置以改变优先级

    ​ 重命名与其他 class 相关联的 class

    ​ 增加新的 class

    ​ 增加出版商的样式设定

  • 避免重复的 id

    原本 id 只要求对于每个页面（XHTML文件）是唯一的，但是考虑到由多个文件组成的 EPUB 数据的配置，请保证id在作品（所有文件）中的单一性

创建自己的 CSS 文件

采用 CSS 基本规则，建议保存为 UTF-8（无 BOM）编码格式，并始终在文件开头插入 @charset "UTF-8";。

发表评论

您的电子邮箱地址不会被公开。