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-endnotesdoc-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-aligna 元素设置为上标。 (见示例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

参考

其他