# epub 制作经验记录 epub 是一种广泛应用的电子书格式，也有年代了，相当与一个打包的小网站，因其历史和需求不同，也有不同与 html 的规范，我一样是初次制作，记录过程中的一些主要问题，和常用的点。 当然完整的规范还是要完成的查阅文档。 [多看电子书规范扩展开放计划](https://jovi.uxlib.cn/2020/09/24/read-more-about-the-ebook-specification-expansion-open-plan.html) ，如上篇，多看制作了其自有的扩展标签，以优化阅读，不过还是诸多的坑啊，相比其 ibooks 来说确实不友好啊。 还有很多没测试，下一次有时间做个全面点的测试把，导致做 epub 内容小心翼翼，还有各种兼容问题，确实郁闷，对于飞速发展的前端技术， html5 js 来说，相当不友好。 开始正题： ## 内容制作 多年前，一些专注电子书的机构编写了一些 epub css (reset / css framework / template) 叫啥无所谓，如下，可以自取： - [BB eBooks – CSS Boilerplate](http://bbebooksthailand.com/bb-CSS-boilerplate.html) - [epub-css-starter-kit](https://github.com/mattharrison/epub-css-starter-kit/blob/master/sass/base.sass) - [A basic CSS template provides a starting point for ePub design](https://wiki.mobileread.com/wiki/CSS_template) 好像第一个比较做的比较好，大致看了下，约等于 web 版的 normalize ，加了一些基本辅助 class。可以参考，不过快10年过去了，还是建议用必要的 reset + 自定的辅助 class。 毕竟那个年代还不流行 bootstrap 这类创新应用的脚手架。 所以，我觉得需要一些辅助类…… ### 自定的辅助类 以前写过一篇博文是 [古籍经典的字体选择](https://jovi.uxlib.cn/2020/09/16/classic-font-selection-of-ancient-books.html)： 写了epub 的字体应用，不过是对应 web 的，后来应用了有所变更还未及更新，现在更新说明一下。 **sass font family 设置**： ```css $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（思源黑体） ,大而全的字库，设计精美，关于这套强大字体的介绍见[关于思源宋体的问答](https://www.thetype.com/2017/04/11961/)。如果系统安装了这套字体，当然是希望可以调用的，如果是web的话可以使用 google fonts 添加，**epub 的话，是否支持 css 下载字体待研究**。 - `Hiragino Minicho ProN` 苹果默认字库设计精美但太小，导致内容字体不同（该字库没有的字用其他字体显示），参差不齐。 - `MingLiU` `PMingLiU` 明朝体，多年前流行过，因为是唯一支持超小中文清晰显示的，好像是(9-10px)，字库量可以，但太细，阅读体验差。 ```css .author { font-family: $font-family-kaiti; // 使用sass 定义的变量 } // 作者通常试用楷体（目标参考书籍内） ``` - 特殊的辅助样式 ```css small { font-size: 0.875em; // 基与 rem 16px ， 这里是 14px ，不建议太小，难以阅读。 } ``` - 章节结束分隔符 ```css /*.page-start { page-break-before: always; }*/ 尽量不使用，理由见下文内容 .page-end { page-break-after: always; } ``` - 模拟pdf 脚注样式，使用 hr 半长分隔线 HTML 4.01 以上，不推荐使用 hr 的 `align` 属性，用 css 替代 ```css .fn-line{ box-sizing: content-box; height: 0; overflow: visible; width: 35%; border-top:1px #333 solid; text-align:left; margin-left:2em; } ``` - 中文格式优化 ```css p { margin-bottom: 0 !important; //中文不使用段间距 text-indent: 2em; //中文缩进2个全角自符 line-height: 2em; //优化行距，优化阅读体验； } ``` - 特殊格式的不缩进，添加辅助类 ```css .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](https://getbootstrap.com/docs/4.5/utilities/spacing/) ### Blitz epub Tricks 虽然项目 github 不维护了，里面的内容还是有参考价值的，节选部分可用的技巧。 - 防止上下标影响行高 [兼容：ePub2 EPUB3 Kindle] ```css 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] ```css article, aside, figure, figcaption, footer, header, main, nav, section { display: block; } ``` - 优先使用后分页符 [兼容：ePub2 EPUB3 Kindle] 多看不支持 ```css element { page-break-after: always; break-after: always; } @supports not ((page-break-after: always) and (break-after: always)) { element { -webkit-column-break-after: always; } } ``` 如果包括分页符以标记章节分节，请在页面末尾使用分页后分页创建分页，而不是在分页前插入分页符之前分页。此修改可以提高目录的性能。 - 使用文字颜色作为变量 ```css element { border: 1px solid currentColor; } svg { fill: currentColor; } ``` 更多技巧见：[BlitzTricks — CSS tricks to improve your eBooks](https://friendsofepub.github.io/eBookTricks/) ### 参考 - [EPUB Content Documents 3.2](https://w3c.github.io/publ-epub-revision/epub32/spec/epub-contentdocs.html#sec-css-prefixed) - [Apple books asset guide 5.2.11](https://help.apple.com/itc/booksassetguide/?lang=en#/) - [EPUB规范3.0.1版之出版物，中文翻译](https://github.com/AnFengDe/epub_standard_chinese/wiki/EPUB%E8%A7%84%E8%8C%833.0.1%E7%89%88%E4%B9%8B%E5%87%BA%E7%89%88%E7%89%A9%EF%BC%8C%E4%B8%AD%E6%96%87%E7%BF%BB%E8%AF%91) - [EPUB规范3.0.1版之内容文件，中文翻译](https://github.com/AnFengDe/epub_standard_chinese/wiki/EPUB%E8%A7%84%E8%8C%833.0.1%E7%89%88%E4%B9%8B%E5%86%85%E5%AE%B9%E6%96%87%E4%BB%B6%EF%BC%8C%E4%B8%AD%E6%96%87%E7%BF%BB%E8%AF%91) ## 注释 ### epub3 注释 实际是兼容 epub2 注释的，下文提到。 使用 `footnote` ,`endnote(s)`使用 `epub:type` 需要先声明命名空间。 如果文档未声明命名空间请添加： `xmlns:epub="http://www.idpf.org/2007/ops"` 到 `html` ```html ``` 更多生明及 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` 将分组注释加到列表 ```html

In that year2 there were 67 mills engaged in the manufacture of cotton goods …

…

``` #### 示例2 —— 在节/末尾使用脚注组 `doc-endnotes` 和 `doc-endnote` roles 分别用在 section 和 list 项目上 `doc-endnotes`不能在 list 上使用。 ```html

End Notes

  1. According to the usual nomenclature, the branch flowing S.W. is called the Chattooga; this unites with the Tallulah to form the Tugaloo, which …
    2. …
``` #### 示例3 —— 使用 CSS 设置脚注上标 ```css a[role~='doc-noteref'] { vertical-align: super; line-height: normal; font-size: smaller; } ``` #### 示例4 —— 脚注的反向链接 可以让读者方便的返回注释来源位置，最好区分样式示可以点击交互。 否则可能导致读者阅读障碍。 ```html