亚马逊 Kindle 电子书发布指南（三）特定类型电子书指南

目录

◄ 返回本文主目录

11 制作带有文本弹出窗口的固定版式电子书
11.1 元数据指南
11.2 封面图片指南：为儿童读物加入封底
11.3 文本指南：包括特定字体
11.4 内容要求
11.4.1 要求 1：使用 HTML 文件结构
11.4.2 要求 2：使用局部放大技术（弹出窗口）
11.5 HTML 和 CSS 指南
11.5.1 应用 CSS 重置
11.5.2 固定版式电子书的 CSS 文件
11.5.3 优化全屏显示的内容
11.5.4 在带有文本弹出窗口的固定版式电子书中使用较大的局部放大点按目标
11.5.5 在图片文字中应用 position:absolute 属性
11.5.6 让带有文本弹出窗口的固定版式内容永葆青春
11.6 制作带有文本弹出窗口（包含多页背景图和文本）的固定版式电子书
11.6.1 Orientation-Lock 设置为 Landscape 时，并排放置图片
11.6.2 文本块位置
11.6.3 文字对齐

10 制作带有文本弹出窗口的固定版式电子书

有些电子书不允许调整字体的大小，也不是流式文本，书中的一些要素具有固定的尺寸和文本位置。例如，咖啡桌读物和儿童图画书均包含整页图片，并且文字与背景图的位置进行了精确设置。不过，此格式并非这些类型的书籍所独有。

固定版式的电子书不支持流式文本，只有当一本书非常适合固定版式时，才可以使用固定版式这种格式；电子书不能部分为流式或部分为固定版式。有关使用 Kindle Kid’s Book Creator（Kindle 儿童读物制作软件）制作此类电子书的详细信息，请参阅第 2.2.5 节。

重要说明：固定版式电子书不支持嵌套锚标签。带有嵌套锚标签的固定版式电子书将不能发布。

11.1 元数据指南

OPF 文件列出了固定版式的电子书所必需的元数据。虽然不同类型的固定版式格式大同小异，但仍具有重要的区别。除非明确说明，适用于带有文本弹出窗口的固定版式电子书的指南不得应用于其他格式，比如带有图片弹出窗口或虚拟面板的固定版式电子书。

元数据 1：

可使用以下元数据字段之一对电子书进行排版：

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

<meta name="fixed-layout" content="true"/>

必填。表明电子书是固定版式。rendition:layout 元数据的有效值为 reflowable 或 pre-paginated。默认值为 reflowable。fixed-layout 元数据的有效值为 true 或 false。默认值为 false。

元数据 2：

<meta name="original-resolution" content="1024x600"/>

必填。表明内容的初始设计分辨率（”1024×600″ 只是一个示例）。像素尺寸可以是任何正整数值。这些值必须与原始内容的整体纵横比成比例。

元数据 3：

可使用以下元数据字段之一进行内容显示方向切换：

<meta property="rendition:orientation">landscape</meta>

<meta name="orientation-lock" content="landscape"/>

请注意：此功能目前在 iOS 中不受支持。

可选（不推荐）。rendition:layout 元数据的有效值为 portrait、landscape 或 auto。将电子书的显示方向锁定为纵向或横向。如果该值为 auto，则同时支持纵向和横向模式。默认值为 auto。orientation-lock 元数据的有效值为 portrait、landscape 或 none。将内容的显示方向锁定为纵向或横向。如果该值为 none，则同时支持纵向和横向模式。默认值为 none。

元数据 4：

<meta name="primary-writing-mode" content="horizontal-rl"/>

可选字段。定义页面渲染顺序、阅读模式和读者导航功能（包括 Kindle 文本弹出窗口、Kindle 面板视图和 Kindle 虚拟面板）。有效值为 horizontal-lr、horizontal-rl、vertical-lr 和 vertical-rl。当页面排版方向是从左到右或未指定方向时，默认行为是 horizontal-lr。使用值 horizontal-rl 以将页面方向设置为从右到左。使用值 vertical-rl 以将中文、日语和韩语电子书的页面排版方向设置为从右到左。

元数据 5：

<meta name="book-type" content="children"/>

儿童读物为可选。删除可能与某些电子书（例如，儿童电子书）并不相关的读者功能（例如，分享）。有效值为 children 或 comic。

11.2 封面图片指南：为儿童读物加入封底

虽然采用流式电子书格式的 Kindle 电子书不使用封底，但封底可为儿童读物的故事叙述提供一种结束感。最好在儿童读物设计中包括封底。（使用此格式的非儿童读物无需提供封底。）请从封底图片中删除条形码、价格列表及宣传内容。封底中的故事文本必须使用文本弹出窗口，其他封底文本则可选择使用。

11.3 文本指南：包括特定字体

固定版式电子书不允许用户选择和改变字体。使用 CSS @font-face 和书内打包字体可确保电子书的设计外观和感觉在所有设备和屏幕上保持一致。这不仅可确保固定版式电子书原封不动地沿用源内容字体，同时还能在切换页面视图和“局部放大”视图时更流畅地呈现 HTML 文本。

示例：

@font-face {
    font-family: "Arial"; /* 指定要使用的字体的名称 */
    src: url(../fonts/arial.otf); /* 包含正确字体的文件 */
}

无障碍功能提示：细字体读起来比较困难，并且可能会影响文本与背景的对比程度。亚马逊建议避免在手稿正文中使用细字体。

11.4 内容要求

11.4.1 要求 1：使用 HTML 文件结构

对于固定版式的电子书，显示在 Kindle 设备上的每一页都必须对应一个单独的 HTML 文件。要实现此目的，可在 HTML 文件中使用一张图片或使用 HTML 文件将两张图片拼接到一起，以便在屏幕方向锁定设置为横向时保持一个页面。

纵向锁定：

1 个打印页 = 1 个 HTML 文件

示例：

横向锁定：

2 个打印页（1 张跨页图片）= 1 个 HTML 文件

示例：

11.4.2 要求 2：使用局部放大技术（弹出窗口）

固定版式的电子书不允许用户更换字体大小；因为调整字体大小可能会导致与故事相关的文本内容变得混乱。Kindle 采用局部放大技术（弹出窗口）来放大固定版式的文本，而不更改原始版式。有关局部放大功能的示例，请参阅本节末尾的图片。

用户双击触屏设备的“活动区域”，激活局部放大功能。（若为非触屏设备，则单击五向控制器的向上箭头，选择要放大的区域，再单击中心按钮激活 Kindle 文本弹出窗口或 Kindle 面板视图。）在局部放大期间，活动区域（源元素）是隐藏的，显示的是放大区域（目标元素）。当电子书设置为支持局部放大时，KindleGen 将自动检测局部放大代码并将 OPF 文件中的局部放大元数据值设置为 “true“。

为了支持局部放大，必须执行下列步骤：

1. 在要放大的文本周围创建定义明确的 HTML 锚（<a>）元素，以设置活动区域。锚必须指定 appamzn-magnify 类。该锚还应具有存储在 JSON 对象（http://www.w3schools.com/json/json_syntax.asp）中作为 data-app-amzn-magnify 值一部分的下列属性：
   1. "targetId":"<string:elementId>" = 放大区域的唯一元素 ID（位置和字体大小在 CSS 文件中设置）
   2. "sourceId":"<string:elementId>" = 将放大的源的唯一元素 ID
   3. "ordinal":<integer:reading order> = 放大区域的阅读顺序（作为阅读流一部分的面板显示顺序）。这是使用局部放大技术的所有文本所必需的。
2. 激活放大时，源文件不再显示。创建一个目标 <div> 元素，该元素经过对齐调整，可以完全覆盖需要放大和定位的文本，从而尽可能小地覆盖页面的背景图。这样确保在用户激活局部放大时，源文本不会从页面视图中消失。请勿在直接靠近右侧或底部边缘处设置弹出窗口，这一点同样重要。如果弹出窗口离这些边缘过近，机型的差异可能会导致内容溢出错误。在发布前，请尽可能多地在不同机型上测试文本内容。
3. 局部放大 <div> 中的文本字体大小应设置为页面上正常字体大小的 150%。但是在下列情况时可以例外：
   1. 一个例外是当页面上的文字太大时，将其放大到 150% 后不但不会提高可读性，反而更难以阅读。对于 7 英寸设备上文本高度至少为 4 毫米的儿童读物和文本高度至少为 2 毫米的非儿童读物，无需使用局部放大功能。
   2. 另一个例外是页面上的文字需要放大 150% 以上才能提高局部放大 <div> 中的可读性。例如，如果页面上文本的字体大小是 45%，则局部放大 <div> 中文本的字体大小可能需要放大到 225% 才能正常阅读。

固定版式示例页：

已激活局部放大的相同示例页：

示例：

<div id="fs3-1-org" class="txt fs3-txt1">
    <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"fs3-txt1-magTarget", "sourceId":"fs3-1-txt", "ordinal":2}'>
        <p id="fs3-1-txt">Lorem Ipsum dolor sit amet.</p>
    </a>
</div>
…
<div id="fs3-txt1-magTarget" class="target-mag fs3-txt1"></div>

11.5 HTML 和 CSS 指南

11.5.1 应用 CSS 重置

在固定版式电子书中应用 CSS 重置。CSS 重置将删除浏览器自动应用的不一致样式，例如字体大小和边距等等。添加 CSS 重置（例如，YUI 重置，http://yuilibrary.com/yui/docs/cssreset）将删除这些不一致的样式，从而允许设计者根据可靠的样式模板进行创建。

11.5.2 固定版式电子书的 CSS 文件

要提升固定版式电子书的翻页性能，您可以分割 CSS 文件，使得每组 HTML 页面具有自己的 CSS 文件。CSS 文件应只包括相关 HTML 文件所直接引用的信息。

11.5.3 优化全屏显示的内容

读者通过各种设备（例如，Fire 平板电脑以及其他制造商生产的智能手机和平板电脑）和各种尺寸的屏幕阅读 Kindle 电子书。2013 Kindle Fire HD 8.9″ 的分辨率为 1920 x 1200 像素。出版商在设计电子书时应该尽可能地保持纵横比不变。

为提供最佳用户体验，亚马逊建议出版商设计固定版式内容，以便最大程度地利用可用的屏幕空间。如果纵横比或尺寸不同，Kindle 设备和阅读软件将内容自动缩放到合适的屏幕尺寸，四周保留白边并居中显示。

读者更习惯于通过 Kindle 面板视图或大屏幕设备来放大阅读固定版式或者有大量图片的电子书。最佳做法是使用尽可能高分辨率的图片。亚马逊建议提交支持至少 2 倍缩放的优质图片。例如，如果计划通过 2013 Kindle Fire HD 8.9″ 阅读，图片像素尺寸至少应为 3840 x 2400（这个数目与纵横比匹配，也支持 2 倍缩放）。请务必通过 Kindle Previewer（Kindle 预览器）验证内容的质量。

11.5.4 在带有文本弹出窗口的固定版式电子书中使用较大的局部放大点按目标

局部放大功能的主要目的是帮助读者更好地阅读感兴趣的内容。当点击目标区域大于要放大的区域时，局部放大的效果更佳。要启用放大区域，请考虑在 app-amzn-magnify 锚元素中添加一个 20 至 40 像素之间的填充，但不要重叠点按目标。

11.5.5 在图片文字中应用 position:absolute 属性

对于图片上需要精确放置的文本，请使用 position:absolute 属性。该属性仅适用于需要固定版式的电子书，例如，文本位置与背景图片元素相对固定的儿童图画书。

11.5.6 让带有文本弹出窗口的固定版式内容永葆青春

顾名思义，固定版式是针对单一屏幕尺寸设计的。为了保证您的内容永不过时，亚马逊建议您对文本大小和文本块位置采用像素单位。以百分比指定字体大小或文本位置会产生非整像素值，不同设备可能会对其进行不同的解读。

11.6 制作带有文本弹出窗口（包含多页背景图和文本）的固定版式电子书

本节阐述如何正确制作包含单一背景图片和重要文字的页面。具体的方法可能有很多，亚马逊的目标是用区区几步来保证标记的高度可移植性。提供的模板要求更新 CSS 规则，进而实现标记的移植。所有模板都是通用的，不会改变 HTML 代码。

11.6.1 Orientation-Lock 设置为 Landscape 时，并排放置图片

许多电子书都包含由一张图片组成的横向跨页。还有一些电子书的横向跨页是由两张并排拼接的图片组成。

下述示例中有一个 1024 x 600 像素（这是第 1 代 Kindle Fire 的全屏分辨率）的横向跨页。每一页的图片尺寸应该刚好是全屏宽度的一半：512 x 600 像素。各元素的独特之处在于使用 CSS ID 进行标记；常见部分使用 CSS 类。左边的页面显示左侧图片。右边图片通过定义 margin-left 样式，设置为左边图片的宽度而移到页面右边。

最终可以将两个页面拼接到一起，从而生成可在横向模式中查看的单张图片。这与综合跨页不同，使用综合跨页时，在纵向模式中只显示一个页面，横向模式则会显示两个并排页面，此格式是漫画类型电子书所独有。第 12.4.1 节中包含了有关综合跨页的指南。

HTML：

<div class="fs">
    <div id="fs9-img" class="lPage"></div>
    <div id="fs10-img" class="rPage"></div>
</div>

CSS：

/* 两页大小的区域 */

#fs9-img {
    background-image: url("../images/005a.jpg");
    background-size: 100% 100%;
}

#fs10-img {
    background-image: url("../images/005b.jpg");
    background-size: 100% 100%;
}

div.fs {
    height: 600px;
    width: 1024px; /* 2 倍页宽 */
    position: relative;
}

div.lPage {
    position: absolute;
    background-repeat: no-repeat;
    height: 600px;
    width: 512px; /* 1 倍屏幕宽度 */
}

div.rPage {
    position: absolute;
    background-repeat: no-repeat;
    height: 600px;
    width: 512px; /* 1 倍屏幕宽度 /
    margin-left: 512px; /* 该值等于左侧图片宽度的值 */
}

11.6.2 文本块位置

使用百分比指定正确的位置和字体大小。这样的话文本块就可以在不同的分辨率下成比例地缩放，从而确保能够兼容多种设备和屏幕大小。应将每个段落都集中在同一个 <div> 元素中，并使用 <br /> 元素来实现多个断行。如果需要自定义行距，则通过 CSS 样式声明而不是添加额外的标记（如多个 <div> 容器）或额外的换行符标签来分配行距。

第 11.4.2 节“要求 2：使用局部放大技术（弹出窗口）”中的示例扩展了跨页图片示例，说明了如何让文字浮在背景图片上面：将文字放入固定的跨页块中，使用百分比形式的边距属性，再通过 CSS 对齐和隔开。文本弹出窗口需放置在对应的背景文本之上。

11.6.3 文字对齐

默认情况下，文字会以左上角对齐的方式呈现在 HTML 元素容器中。许多电子书可能具有右对齐、底部对齐或两端对齐的文字。要确定对齐，最简单的办法是设想沿着文字块画一圈，看看段落的哪些边与边距有关（顶部、左边、右边和底部）。

请勿将不间断空格（ ）字符用于文字对齐。而是使用 CSS 的“顶部”、“右边”、“底部”和“左边”对齐来定位包含绝对定位文字的 <div> 元素。使用两个相邻的边来定位每个 <div> 元素。例如，“顶部和左边”而非“顶部、左边和底部”。CSS text-indent 和 line-height 可用于在 HTML 块元素中对齐文字。

※ 本文有分页： 1 ｜ 2 ｜ 3 ｜ 4 ｜ 5 ｜ 6

© 「书伴」原创文章，转载请注明出处及原文链接：https://bookfere.com/post/610.html