Jovi Wong
主页 文章 标签 分类 友链
Jovi Wong

目录

epub 制作经验记录

Jovi 收录于 epub
   约 3936 字   预计阅读 8 分钟    次阅读  

epub 是一种广泛应用的电子书格式，也有年代了，相当与一个打包的小网站，因其历史和需求不同，也有不同与 html 的规范，我一样是初次制作，记录过程中的一些主要问题，和常用的点。 当然完整的规范还是要完成的查阅文档。

多看电子书规范扩展开放计划 ，如上篇，多看制作了其自有的扩展标签，以优化阅读，不过还是诸多的坑啊，相比其 ibooks 来说确实不友好啊。

还有很多没测试，下一次有时间做个全面点的测试把，导致做 epub 内容小心翼翼，还有各种兼容问题，确实郁闷，对于飞速发展的前端技术， html5 js 来说，相当不友好。

开始正题：

内容制作

多年前，一些专注电子书的机构编写了一些 epub css (reset / css framework / template) 叫啥无所谓，如下，可以自取：

好像第一个比较做的比较好，大致看了下，约等于 web 版的 normalize ，加了一些基本辅助 class。可以参考，不过快10年过去了，还是建议用必要的 reset + 自定的辅助 class。 毕竟那个年代还不流行 bootstrap 这类创新应用的脚手架。

所以，我觉得需要一些辅助类……

自定的辅助类

以前写过一篇博文是 古籍经典的字体选择： 写了epub 的字体应用，不过是对应 web 的，后来应用了有所变更还未及更新，现在更新说明一下。

sass font family 设置：

1
2
3
4

$font-family-serif:	"Source Han Serif", "Source Han Serif TC", "Noto Serif CJK", "Noto Serif TC",STSongti-SC-Regular,SimSun,serif !default;
$font-family-kaiti:	STKaitiSC-Regular,KaiTi,serif !default;
$font-family-monospace:	PingFangSC,"Microsoft Yahei",SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:	$font-family-serif !default;

然后根据需要可以在 class 内 调用。

调整字体说明：

  • -apple-system, BlinkMacSystemFont 可以调用 Mac 系统的默认字体
  • Noto Serif SC Noto Serif TC Google :Noto Serif = Adobe: Source Han Serif（思源黑体） ,大而全的字库，设计精美，关于这套强大字体的介绍见关于思源宋体的问答。如果系统安装了这套字体，当然是希望可以调用的，如果是web的话可以使用 google fonts 添加，epub 的话，是否支持 css 下载字体待研究。
  • Hiragino Minicho ProN 苹果默认字库设计精美但太小，导致内容字体不同（该字库没有的字用其他字体显示），参差不齐。
  • MingLiU PMingLiU 明朝体，多年前流行过，因为是唯一支持超小中文清晰显示的，好像是(9-10px)，字库量可以，但太细，阅读体验差。
1
2
3

.author {
    font-family: $font-family-kaiti; // 使用sass 定义的变量
} // 作者通常试用楷体（目标参考书籍内）
  • 特殊的辅助样式
1
2
3

small {
    font-size: 0.875em; // 基与 rem 16px ， 这里是 14px ，不建议太小，难以阅读。
}
  • 章节结束分隔符
1
2
3
4
5
6

/*.page-start {
    page-break-before: always;
}*/ 尽量不使用，理由见下文内容
.page-end {
    page-break-after: always;
}
  • 模拟pdf 脚注样式，使用 hr 半长分隔线

HTML 4.01 以上，不推荐使用 hr 的 align 属性，用 css 替代

1
2
3
4
5
6
7
8
9

.fn-line{
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    width: 35%; 
    border-top:1px #333 solid;
    text-align:left;
    margin-left:2em;
}
  • 中文格式优化
1
2
3
4
5

p {
    margin-bottom: 0 !important; //中文不使用段间距
    text-indent: 2em; //中文缩进2个全角自符
    line-height: 2em; //优化行距，优化阅读体验；
}
  • 特殊格式的不缩进，添加辅助类
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.no-indent {
    text-indent: 0;
}
.add-indent {
    text-indent: 2em;
}
.no-indent-section { // 方便整段操作，比如偈
    p {
        text-indent: 0;
    }
}
.add-indent-section {
    p {
        text-indent: 2em;
    }
}
  • 辅助间距样式

用习惯了 bootstrap 的布局，感觉设计思想还是很优秀的，我们直接通过源文件拆出来用，删除响应布局，使用 bootstrap 基本 spacing 样式。

具体参考 Spacing

Blitz epub Tricks

虽然项目 github 不维护了，里面的内容还是有参考价值的，节选部分可用的技巧。

  • 防止上下标影响行高 [兼容：ePub2 EPUB3 Kindle]
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

sub {
  font-size: 0.675em;
  line-height: 1.2;
  vertical-align: sub;
  vertical-align: -20%;
}

sup {
  font-size: 0.675em;
  line-height: 1.2;
  vertical-align: super;
  vertical-align: 35%;
}
  • 使 HTML5 tags 行为符合旧版预期 [兼容：ePub2 EPUB3 Kindle]
1
2
3
4

article, aside, figure, figcaption, 
footer, header, main, nav, section {
  display: block;
}
  • 优先使用后分页符 [兼容：ePub2 EPUB3 Kindle] 多看不支持
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

element {
  page-break-after: always;
  break-after: always;
}

@supports not ((page-break-after: always) and (break-after: always)) {
  element {
    -webkit-column-break-after: always;
  }
}

如果包括分页符以标记章节分节，请在页面末尾使用分页后分页创建分页，而不是在分页前插入分页符之前分页。此修改可以提高目录的性能。

  • 使用文字颜色作为变量
1
2
3
4
5
6
7

element {
  border: 1px solid currentColor;
}

svg {
  fill: currentColor;
}

更多技巧见：BlitzTricks — CSS tricks to improve your eBooks

参考

注释

epub3 注释

实际是兼容 epub2 注释的，下文提到。 使用 footnote ,endnote(s)使用 epub:type 需要先声明命名空间。

如果文档未声明命名空间请添加：

xmlns:epub="http://www.idpf.org/2007/ops" 到 html

1

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">

更多生明及 URI 如下：

Naminspace prefix mappings

命名空间的前缀映射为方便，整个规范都使用下面的命名空间的前缀映射XMLNS

prefix namespace URI
epub http://www.idpf.org/2007/ops
m http://www.w3.org/1998/Math/MathML
pls http://www.w3.org/2005/01/pronunciation-lexicon
ssml http://www.w3.org/2001/10/synthesis
svg http://www.w3.org/2000/svg

示例 1 —— 正文中的脚注

注意，doc-footnote role 不能用于列表，会破坏列表。 doc-endnote 将分组注释加到列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<p>
   In that
   year<a href="#ft2f" role="doc-noteref" epub:type="noteref">2</a>
   there were 67 mills engaged in the manufacture of
   cotton goods …
</p>

<aside id="ft2f" role="doc-footnote" epub:type="footnote">
   <p>
     2 The manufacturing statistics for 1900 which
     follow are not those given in the Twelfth
     Census, but are taken from the 
     <em>Census of Manufactures</em> …
   </p>
</aside>

<p>…</p>

示例2 —— 在节/末尾使用脚注组

doc-endnotes 和 doc-endnote roles 分别用在 section 和 list 项目上 doc-endnotes不能在 list 上使用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<section epub:type="endnotes" role="doc-endnotes"> 
   <h2>End Notes</h2>
   <ol>
     <li role="doc-endnote">
       According to the usual nomenclature, the
       branch flowing S.W. is called the Chattooga;
       this unites with the Tallulah to form the 
       Tugaloo, which …
     </li>
     …
   </ol>   
</section>

示例3 —— 使用 CSS 设置脚注上标

1
2
3
4
5

a[role~='doc-noteref'] {
   vertical-align: super;
   line-height: normal;
   font-size: smaller;
}

示例4 —— 脚注的反向链接

可以让读者方便的返回注释来源位置，最好区分样式示可以点击交互。 否则可能导致读者阅读障碍。

1
2
3

<aside role="doc-footnote">
   <p><a href="#ref" role="doc-backlink" title="Go to note reference">1.</a> According to the usual nomenclature, the …</p>
</li>

示例5 —— 尾注的反向链接

反向链接放到自己的元素中，避免与标号列表产生冲突。

1
2
3
4

<li role="doc-endnote">
   <p>According to the usual nomenclature, the …</p>
   <p><a href="#ref" role="doc-backlink">Go to note reference</a></p>
</li>

说明

  • 放在正文中的注释应使用 aside 元素标记，（示例1）这种用法确保即时无法识别其语义的情况下，HTML5也会将其视为辅助内容。
  • 放在小节末尾的注视组不需要标记为 aside 而应使用适当的脚注或尾注语义进行分组（见示例2）
  • 注意注释使用 HTML5 的 a 元素
  • 不要使用 sup 元素来处理上标，因为他是多余的表示性标记，可以使用 css 的 vertival-align 将 a 元素设置为上标。 （见示例3）
  • 使用反向链接优化阅读体验，可以让读者快速找到注释处的文本位置。（见示例4）

jovi 注释

  • ARIA 的意思是 Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能，比如windows的放大镜，语音朗读，高对比度主题等。详见 Dpub ARIA 1.0
    ARIA roles 该属性的主要目的是向AT（Assistive Technologies 辅助系统）公开信息。所以，role 推荐使用，不过也按需要和精力安排吧。 毕竟 Accessible 是有些成本的，各种平台都是，不过能为有障碍人士提供良好的体验也功德无量啊。EPUB Type to ARIA Role Authoring Guide
  • 另网上的资料关于尾注有两种写法 endnote(s) 和rearnote(s) 猜测应该是 idpf 和 w3c 的历史过程中产生的,查到 github有相关 Dpud-ARIA 和 EPUB vocabulary 的差别问题，在 stackoverflow 也有提及 reanote 兼容性比 endnote 更好的言论，后在EPUB 3 Structural Semantics Vocabulary 查询到，其实 reanote(s) 已经不推荐使用了，使用 endnote(s) 替代，或许这也印证了 rearnote(s)兼容性好的原因。

注释的 aside 标签

​ 上面提到了 aside 的应用，和其原理。 apple ibooks guidelines 里如下描述。

When adding pop-up footnotes in EPUB 3 books, you can replace the <aside> element with a <div> or <p> element. Use the <aside> element when you want to hide the footnote; use a <div> or <p> element when you want the footnote to appear in the normal reading view. If you use <div> or <p> and a user clicks the footnote link, the content appears in a popup, but the footnote is also visible as part of the text on the page.

在EPUB 3图书中添加弹出式脚注时，可以将<aside>元素替换为<div>或<p>元素。要隐藏脚注时，请使用<aside>元素。如果希望脚注出现在常规阅读视图中，请使用<div>或<p>元素。如果使用<div>或<p>并且用户单击脚注链接，则内容将显示在弹出窗口中，但脚注也将作为页面文本的一部分而可见。

所以：

可以使用 endnote在 epub 中，epub2: 体验与锚点脚注一样。 epub3: 可以不用锚点跳转使用弹窗脚注，当然还有尾注。在内容脚注密集的页面推荐使用 endnotes。

当然也可以使用 footnote 配合 aside 支持的自然可以弹窗脚注（并隐藏里面的内容，或者也可以替换成 div p,默认显示出来），不支持的在 aside位置不能解析(不能识别隐藏效果)也会显示出来供查阅，像普通脚注一样。

参考 脚注和尾注的样式 ：Footnotes, References, and Indexes 常见与文本编辑，或写作软件。

  • ¶ 段落标记开头
  • ↩ 附加 backlink
  • 脚注使用文字 1
  • 尾注使用中括号[1]

如果比较正式的内容，可以参考国标或论文规范等，这里附加：《论文参考文献及注释规范【国际标准】》的相关规范。

……

　　一、参考文献格式

　　参考文献按在正文中出现的先后次序列于文末，以“参考文献：”(左顶格，黑体字)作为标识。参考文献的序号左顶格，并用数字加方括号表示，如[1]、[2]……。每一条参考文献条目的最后均以小圆点“.”结束。

　　二、注释格式

　　注释不同于参考文献。参考文献是作者写作论著时所参考的文献书目，集中列于文末。而注释则是作者对正文中某一内容作进一步解释或补充说明的文字，不要列入文末的参考文献，而要作为注释放在页下，用①②……标识序号。注释中提到的论著保持通常格式。不与前页的引文连续编号，每页重新排序，序号后空一格(全角)。

……

带圈字体不够用

前面规则已说明，包括书籍脚注也跨页不连续编码，所以说一般 20个数字够用了，但是也有字体只支持10个带圈文字，比如多看的默认字体……。 实际上大字库一般可以支持 50 个，比如 noto。

但是，问题是，带圈字体不是中文字库，很大。 毕竟需要的字符不多，到100 够了把？ 跟英文字体体量相当（26字母+符号），所以，关于带圈字体的问题，不要独立为他考虑大字库，虽然我们本身会选用大字库，增强兼容性的话，可以直接添加带圈文字字体（有现成的）。

超过10就使用自定义字体，点这里下载 endylau 支持11-100的带圈文字，如果单页10个真的不够用的话。

实际上真有点麻烦，单页是对于纸妹或打印文件，epub 并不是，是电子书格式，还支持各种字体间距，大小的自定义，所以“页”的概念很模糊，所以，一个章节重编码一次，到是都省事了。所以，可以下载字体嵌入，用在网页里。

既然字体都找了，顺便转换一套 webfonts 把，可以直接 引用 css ，下载 endylau-webfonts。

参考

其他

更新于 2020-09-24
阅读原始文档
 epub, 电子书
返回 | 主页