如何优雅地制作精排 ePub —— 个人电子书制作规范及基本样式表

随着大数据时代的到来,多种移动阅读终端方兴未艾 ——Amazon Kindle不再小众、各互联网巨头纷纷推出旗下的电子书阅读软件。有了阅读的软件/硬件支持,必不可少的就是阅读什么的问题了。ePub格式一直占据着广大电子书市场,多看、百度阅读等电子书市场所使用的格式都是它,人们也渐渐不满足于单纯的TXT文本阅读和质量低劣的扫描版PDF格式了。下面是我自己对 ePub 电子书制作的理念和规范。

  P.S.说什么规范其实也谈不上,也就是一些制作的风格与技巧。

封面

  这是个看颜的时代。

  封面图最好要是高清的,所谓高清,就是一定不能低于普通电子设备的分辨率(1024x768)。

  获取方法:

  Kindle 默认是图片全屏的→→,多看需要在 content.opf 的 <spine toc="ncx"> 加上

  1. properties="duokan-page-fullscreen"  

基本样式

基本样式包括字体调用、全局页面设置,这里参考了精益制作组制作的《21世纪资本论》:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
@page{
 margin-bottom:5pt;
 margin-top:5pt
}
 @font-face {
 font-family:"zw";
 src:
 local("宋体"),local("明体"),local("明朝"),
 local("Songti"),local("Songti SC"),local("Songti TC"),
 local("Song S"),local("Song T"),local("STBShusong"),local("TBMincho"),local("HYMyeongJo"),
 local("DK-SONGTI"),
 url(../Fonts/zw.ttf),
 url(res:///../../media/mmcblk0p1/fonts/zw.ttf),
 url(../../../../../zw.ttf),
 url(res:///fonts/normal/st),
 url(res:///fonts/normal/SongTi);
}
 @font-face {
 font-family:"zw-himalaya";
 src:
 local("Himalaya"),
 local("DK-SONGTI"),
 url(../Fonts/zw-himalaya.ttf),
 url(res:///../../media/mmcblk0p1/fonts/zw-himalaya.ttf),
 url(../../../../../zw-himalaya.ttf),
 url(res:///fonts/normal/zw-himalaya);
}
 @font-face {
 font-family:"fs";
 src:
 local("仿宋"),local("仿宋_GB2312"),
 local("Yuanti"),local("Yuanti SC"),local("Yuanti TC"),
 local("DK-FANGSONG"),
 url(../Fonts/fs.ttf),
 url(res:///../../media/mmcblk0p1/fonts/fs.ttf),
 url(../../../../../fs.ttf),
 url(res:///fonts/normal/fs),
 url(res:///fonts/normal/FangSong);
}
 @font-face {
 font-family:"kt";
 src:
 local("楷体"),local("楷体_GB2312"),
 local("Kaiti"),local("Kaiti SC"),local("Kaiti TC"),
 local("MKai PRC"),local("MKaiGB18030C-Medium"),local("MKaiGB18030C-Bold"),
 local("DK-KAITI"),
 url(../Fonts/kt.ttf),
 url(res:///../../media/mmcblk0p1/fonts/kt.ttf),
 url(../../../../../kt.ttf),
 url(res:///fonts/normal/kt),
 url(res:///fonts/normal/KaiTi);
}
 @font-face {
 font-family:"ktpy";
 src:
 local("方正楷体拼音字库01"),
 local("Kaitipinyin"),local("Kaiti"),local("Kaiti SC"),local("Kaiti TC"),
 local("MKai PRC"),local("MKaiGB18030C-Medium"),local("MKaiGB18030C-Bold"),
 local("DK-KAITI"),
 url(../Fonts/ktpy.ttf),
 url(res:///../../media/mmcblk0p1/fonts/ktpy.ttf),
 url(../../../../../ktpy.ttf),
 url(res:///fonts/normal/ktpy),
 url(res:///fonts/normal/kaitipinyin),
 url(res:///fonts/normal/KaiTiPinYin);
}
 @font-face {
 font-family:"ht";
 src:
 local("微软雅黑"),local("黑体"),
 local("Heiti"),local("Heiti SC"),local("Heiti TC"),
 local("MYing Hei S"),local("MYing Hei T"),local("TBGothic"),
 local("DK-HEITI"),
 url(../Fonts/ht.ttf),
 url(res:///../../media/mmcblk0p1/fonts/ht.ttf),
 url(../../../../../ht.ttf),
 url(res:///fonts/normal/ht),
 url(res:///fonts/normal/HeiTi);
}
 @font-face {
 font-family:"h1";
 src:
 local("方正兰亭特黑长_GBK"),local("方正兰亭特黑长简体"),local("方正兰亭特黑长繁体"),
 local("LantingTeheichang"),
 local("Yuanti"),local("Yuanti SC"),local("Yuanti TC"),
 local("MYing Hei S"),local("MYing Hei T"),local("TBGothic"),
 local("DK-HEITI"),
 url(../Fonts/h1.ttf),
 url(res:///Data/FONT/h1.ttf),
 url(res:///fonts/ttf/h1.ttf),
 url(res:///../../media/mmcblk0p1/fonts/h1.ttf),
 url(res:///../fonts/h1.ttf),
 url(../../../../../h1.ttf),
 url(res:///fonts/h1.ttf),
 url('res:///fonts/normal/h1 TeHeiChang');
}
 @font-face {
 font-family:"h2";
 src:
 local("方正大标宋_GBK"),local("方正大标宋简体"),local("方正大标宋繁体"),
 local("Dabiaosong"),
 local("DK-XIAOBIAOSONG"),
 url(../Fonts/h2.ttf),
 url(res:///Data/FONT/h2.ttf),
 url(res:///fonts/ttf/h2.ttf),
 url(res:///../../media/mmcblk0p1/fonts/h2.ttf),
 url(res:///../fonts/h2.ttf),
 url(../../../../../h2.ttf),
 url(res:///fonts/h2.ttf),
 url('res:///fonts/normal/h2 DaBiaoSong');
}
 @font-face {
 font-family:"h3";
 src:
 local("方正华隶_GBK"),local("方正行黑简体"),local("方正行黑繁体"),
 local("Yuanti"),local("Yuanti SC"),local("Yuanti TC"),
 local("MYing Hei S"),local("MYing Hei T"),local("TBGothic"),
 local("DK-FANGSONG"),
 url(../Fonts/h3.ttf),
 url(res:///Data/FONT/h3.ttf),
 url(res:///fonts/ttf/h3.ttf),
 url(res:///../../media/mmcblk0p1/fonts/h3.ttf),
 url(res:///../fonts/h3.ttf),
 url(../../../../../h3.ttf),
 url(res:///fonts/h3.ttf),
 url('res:///fonts/normal/h3 HuaLi');
}
 @font-face {
 font-family:"lanting";
 src:
 local("方正兰亭刊黑_GBK"),local("方正兰亭黑"),
 local("fangzheng"),local("Yuanti SC"),local("Yuanti TC"),
 local("MYing Hei S"),local("MYing Hei T"),local("TBGothic"),
 url(res:///sdcard/DuoKan/Resource/Font/方正兰亭刊黑_gbk.ttf);
}
 @font-face {
 font-family:"biaosong";
 src:
 local("方正小标宋_GBK"),local("方正小标宋"),
 url(res:///sdcard/DuoKan/Resource/Font/方正小标宋_gbk.ttf);
}
 @font-face {
 font-family:"cnepub";
 src:
 local("方正小标宋_GBK"),local("方正小标宋"),
 url(res:///sdcard/DuoKan/Resource/Font/方正小标宋_gbk.ttf);
}

标题与正文

  就通常而言,标题的呈现方式主要有三种,一种是图片(图1.1),第二种是文字(图1.2),第三种是图片与文字(图1.3)
 图1.1
 
 图1.2
 
 图1.3
  诚然,第一种方式(图片)似乎是最好的,不必拘泥于字体和版式,一张图片搞定。但是这种方式对于像《冰与火之歌》这样很多章节的大部头来说一张一张图片的制作不可谓不麻烦。于是就出现了第三种方式(图片+文字),只需要一张底图,具体标题用文字表达,既达到了审美也方便了制作。至于第二种方式(文字)则更适合网络小说、正文短而章节多的书籍。试想,如果一本800+章的电子书每章不过1000+字每翻几页就跳出来一张章节图……
  下面是一些标题的样式,可自行选择是单放还是图文。(P.S.由于是 Sigil 显示,可能和实际显示即阅读软件或电纸书显示有出入,一般来说阅读软件/电纸书显示效果更好)
 
标题一:导读资料
代码:
  1. .bt1{  
  2.  font-family:"ht";  
  3.  font-size:1.2em;  
  4.  color:#fff;  
  5.  border-radius:0.2em;  
  6.  background-color:#e0c98c;  
  7.  3em;  
  8.  padding:0.2em;  
  9.  margin-left:auto;  
  10.  margin-right:auto;  
  11.  text-align:center;  
  12. }  

标题二:

代码:
  1. .bt2 {  
  2. /*color:pink;*/  
  3.  margin-bottom:1.8em;  
  4.  line-height:130%;  
  5.  text-align: left;  
  6.  padding:190px15px15px66px;  
  7.  page-break-before:always;  
  8.  font-weight:bold;  
  9.  font-size:27px;  
  10.  color: #000000;  
  11.  text-shadow:1px2px3.5px#000;  
  12.  font-family:"微软雅黑","黑体","h2","方正大标宋_GBK","方正大标宋简体","方正大标宋繁体","黑体",sans-serif;  
  13. /*text-outline: 2px 2px #ff0000;*/  
  14. }  

标题三:

代码:
  1. .bt1{  
  2. font-family:"ht";  
  3. font-size:1.2em;  
  4. color:#fff;  
  5. border-radius:0.2em;  
  6. background-color:#e0c98c;  
  7. 3em;  
  8. padding:0.2em;  
  9. margin-left:auto;  
  10. margin-right:auto;  
  11. text-align:center;  
  12. }  

标题四: 第一章 大难不死的男孩

代码:
  1. .bt4 {  
  2. font-family:"方正黑体_GBK";  
  3. text-align: left;  
  4. margin:5em05em0;  
  5. padding:0;  
  6. font-size:1.3em;  
  7. border:0;  
  8. color:#49bbbb;  
  9. }  
  而对正文的要求,我没有 Oxen(老老老牛)那么严格(老牛认为首行缩进应该是手打两个全角空格而不是 text-indent: 2em )。除却基本标点规范,也无非是首行缩进、段尾空行,最多加个首字下沉/上升罢了。P.S.首字下沉/上升代码取自老牛样式。
 
正文一:
1
2
3
4
5
6
p1 {
/* 段落 */
displayblock;
text-intend:2em;
margin:0.7em0;
}
 
首字上升:
1
2
3
4
5
.initialraise {
colorgray;
font-size:2em;
font-weight:bold;
}
 
首字下沉:
1
2
3
4
5
6
7
.initialsinking {
font-size:1.618em;
float:left;
margin:5px;
padding:3px;
text-indent:0em!important;
}
调用:
  1.  <spanclass="initialsinking ">听</span>说城里很热闹,笨狼就想去看看。

脚注

  在电子书,尤其是文言文和译本中会对段落中的文字加以说明,这里就要引入脚注了。脚注有同样有三种方式,一是单纯文本调用(图2.1)、二是跳转注释(图2.2)、三是弹窗注释(图2.3)。
 图2.1
 图2.2
 图2.3
  图2.1显示的注释想必是大家都不愿意看到的,尤其是在移动端阅读方面还要翻好几面才能看到注释然后再默默翻页回去。图2.2显示的跳转注释极大地简化了上述情况,只需点一下超链接便能跳转到注释位置。那么更高端的弹窗注释就不用我解释了吧。
 
脚注支持:
 
 /** 多看 **/
sup img {
line-height:1.2;
1em;
height:1em;
margin:0;
padding:0em;
vertical-align: text-top;
}
li.duokan-footnote-item {
font-family:"ht","微软雅黑","黑体","zw",sans-serif;
text-align: left;
font-size: small;
line-height:1.2;
padding:0px;
}
/** 原生 **/
.footnote {
text-align: justify;
text-indent:0em;
line-height:110%;
font-size:0.85em;
font-family:"zw","宋体","明体","明朝",serif;
}
 
跳转注释(Kindle原生系统可弹窗注释):
  1.  <aid="ref_footnotebookmark_start_1_1"></a><spanstyle=" font-size:0.75em; vertical-align:super;"><ahref="#ref_footnotebookmark_end_1_1">注释编号</a></span>
  1. <pclass="P_Footnote"id="ref_footnotebookmark_end_9_1"><spanstyle=" font-size:0.75em; vertical-align:super;"><ahref="#ref_footnotebookmark_start_9_1">①</a></span>注释的内容</p>
弹窗注释(多看):
  1. <sup><a class="duokan-footnote" href="#ref_footnotebookmark_end_1_1" id="ref_footnotebookmark_start_1_1"><img alt="" src="../Images/note.png" /></a></sup>
    1 <ol class="duokan-footnote-content">
         2 <li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_1">
         3 <p class="f"><a href="#ref_footnotebookmark_start_1_1">这里是注释</a>​​​​​​​​​</p>
         4 </li>
         5 </ol>
弹窗注释(支持多看/原生):
<sup><a class="duokan-footnote" href="#ref_footnotebookmark_end_1_1" id="ref_footnotebookmark_start_1_1"><img alt="" src="../Images/note.png" /></a></sup>
<ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_1">
<p class="f"><a href="#ref_footnotebookmark_start_1_1">这里是注释</a>​​​​​​​​​</p>
</li>
</ol>

最后

  对于 ePub 的阅读,个人是非常非常推荐多看的,其原因就是多看的规范支持很多 ePub 的“特效”,这点可以参考 http://www.miui.com/thread-1960799-1-1.html (多看电子书制作规范)

  几个参考/技巧:
  最后告诫大家 —— 不要因为制作电子书而忘了初衷 —— 看书。
原文地址:https://www.cnblogs.com/Alex80/p/5291243.html