EPUB电子书样式

说明

从互联网上下载的大部分 EPUB 电子书排版混乱又难看，为了让自己有一个良好的阅读体验，我写了一些简单的 CSS 样式，这些样式只规定了一些基本的排版，力求简洁易读。

整体样式

这部分样式规定了 EPUB 电子书排版中的所有默认属性，如链接样式、对齐方式、文本间距等。

常规样式

Copy
/* 文本主体统一样式 */
.body {
display: block; /* 显示块级元素 */
text-align: left; /* 文本靠左排列 */
text-align: justify; /* 文本两端对齐 */
padding: 0 0 0 0; /* 内边距 */
margin: 0 5pt 0 5pt; /* 上右下左外边距 */
}
/* 链接样式 */
a {
color: #000000; /* 修改链接颜色蓝色为黑色 */
text-decoration: none; /* 取消链接下划线 */
}

打印样式

Copy
/* 打印文本样式 */
@page {
margin-bottom: 5pt;
margin-top: 5pt;
}
/* 打印封面样式 */
@page {
padding: 0;
margin: 0;
}

目录示例

这部分样式规定了 EPUB 电子书内嵌的目录排版。

Copy
/* 第一层级目录，单级目录亦用此样式 */
.catalog1 {
font-size: 100%; /* 字体大小 */
line-height: 125%; /* 行高 */
margin: 0.5em 0 0.5em 0; /* 上右下左外边距 */
}
/* 第二层级目录 */
.catalog2 {
font-size: 100%;
line-height: 125%;
margin: 0.2em 0 0.2em 2em;
}
/* 第三层级目录 */
.catalog3 {
font-size: 100%;
line-height: 125%;
margin: 0.2em 0 0.2em 4em;
}

Copy
1. 第一章
1.1 第一节
1.1.1 第一讲

标题示例

这部分样式规定了 EPUB 电子书的标题排版。

Copy
/* 标题样式 */
.title {
line-height: 125%; /* 行高 */
font-weight: bold; /* 文本粗体 */
font-size: x-large; /* 字体较大 */
margin-top: 0; /* 上外边距 */
padding: 5px 5px 5px 5px; /* 内边距 */
border-style: none none none solid; /* 元素边框 */
border-width: 0px 0px 0px 10px; /* 边框宽度 */
border-color: #000000; /* 边框颜色 */
}

Copy
1. 第一章
1.1 第一节
1.1.1 第一讲

正文示例

这部分样式规定了 EPUB 电子书的正文排版。

Copy
/* 正文样式 */
.mainbody {
font-size: 100%; /* 字体大小 */
line-height: 120%; /* 行高 */
text-indent: 2em; /* 首行文本缩进 */
margin: 0.3em 0 0.3em 0em; /* 上右下左外边距 */
}

Copy
正文示例01
正文示例02
正文示例03

强调文字

这部分样式规定了 EPUB 电子书的各类强调文字排版，这部分样式可以根据需求改变字体大小、颜色等属性，以达到需要的阅读体验。

Copy
/* 强调字体，颜色可根据需要改变 */
.emphasize {
color: #ff0000; /* 字体颜色 */
font-size: 90%; /* 字体大小 */
font-weight: bold; /* 文本粗体 */
text-indent: 0; /* 取消首行文本缩进 */
}

Copy

强调文字示例

强调文字示例

强调文字示例

强调文字示例



小节序号

有些书籍在大章节中会有很多小节，小节没有标题，单独以数字或其他计数文字来区分，这部分样式就规定了 EPUB 电子书中对这种小节的序号的排版。

Copy
/* 小节序号 */
.sectionnum {
font-size: 125%; /* 字体大小 */
line-height: 125%; /* 行高 */
font-weight: bold; /* 文本粗体 */
text-align: center; /* 文本居中 */
font-style: italic; /* 文本斜体 */
margin: 2.5em 0 0.5em 0; /* 上右下左外边距 */
}

Copy
1
2
3

上标注释

有些书籍拥有很多注释，注释内容通常放在章节末尾，不与正文在一起，而是通过一些数字上标来链接正文内容和注释内容，这部分样式就规定了 EPUB 电子书中对这种数字上标的排版。

Copy
/* 注释序号 */
.annotatenum {
font-size: 75%; /* 字体大小 */
line-height: 125%; /* 行高 */
vertical-align: super; /* 垂直对齐文本的上标 */
}
/* 注释内容 */
.annotate {
font-size: 80%; /* 字体大小 */
line-height: 120%; /* 行高 */
}

Copy
注释序号
［1］


［1］
注释体


分割线

在有注释或其他与正文不同的内容时，通常会用分割线将这些内容与正文相区分，这部分样式就规定了 EPUB 电子书中对分割线的排版。

Copy
/* 分割线 */
.splitline {
height: 2px; /* 线条粗细 */
width: 98%; /* 线条宽度 */
border: none; /* 清除原始线条 */
background: #bcbcbc; /* 线条颜色 */
}

Copy


代码块

计算机类的书籍通常会有很多代码内容，这部分样式就规定了 EPUB 电子书中对代码块的排版。

Copy
/* 代码块盒子 */
.boxblock {
background-color: #dcdcdc; /* 代码块背景颜色 */
margin: 0.25em 0 0.25em 0; /* 上右下左外边距 */
padding: 0.1em 0 0.1em 0; /* 上右下左内边距 */
border: none; /* 取消代码块边框 */
border-radius: 2px; /* 边框框圆角 */
}
/* 代码块文本 */
.boxtext {
font-size: 60%; /* 字体大小 */
line-height: 120%; /* 行高 */
white-space: pre-wrap; /* 文本正常空格及换行 */
ertical-align: middle; /* 垂直对齐文本中部 */
}

Copy

Code block example 01;
Code block example 02;
Code block example 03;



上下标数字

这部分样式规定了 EPUB 电子书中对上下标数字的排版，上下标数字通常用于数字的次方、化学元素表达式等场合。

Copy
/* 上标数字 */
1035
/* 下标数字 */
1035

图片示例

对于需要有插图插入的书籍，这部分样式就规定了 EPUB 电子书中对正文图片的排版

Copy
/* 正文图片 */
.image {
width: auto; /* 自适应宽度 */
height: auto; /* 自适应高度 */
max-width: 99%; /* 最大宽度 */
display: block; /* 显示块级元素 */
line-height: 1.5; /* 行高 */
margin-left: auto; /* 自适应左外边距 */
margin-right: auto; /* 自适应右外边距 */
/* 图片水平显示位置只需改变 margin-left 或 margin-right 属性值即可
图片居左：margin-left: 0; margin-right: auto;
图片居右：margin-left: auto; margin-right: 0;
图片居中：margin-left: auto; margin-right: auto;
注意使用这两个属性改变水平位置时一定要加上 display: block; 属性
*/
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
/* 文字图片，某些生僻字无法正常打出来，以图片的形式插入正文中用到此样式 */
.imagetext {
line-height: 1.2;
height: 1em; /* 图片设置为一个字高 */
width: auto; /* 自适应宽度 */
max-width: 99%; /* 最大宽度 */
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}

Copy



图片注释

对于需要有插图插入的书籍，这部分样式就规定了 EPUB 电子书中对正文图片的注释内容的排版

Copy
/* 图片注释 */
.imagetitle {
margin: 1em 0; /* 上右下左外边距 */
color: #555555; /* 文本颜色 */
font-size: 0.75em; /* 字体大小 */
text-align: center; /* 文本居中 */
}

Copy
图片注释

封面示例

电子书通常会有自己的封面，这部分样式就规定了 EPUB 电子书中对封面图片的排版

Copy

/* 打印封面样式 */
@page {
padding: 0;
margin: 0;
}
/* 预览封面样式 */
body {
text-align: center;
padding: 0;
margin: 0;
}


Copy




opf 文件之元数据 <metadata>

opf 文件是 EPUB 电子书中不可或缺的一部分，其中的 元数据 <metadata> 属性是重要的内容，它通常包含以下几个部分。

Copy
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<dc:title>标题</dc:title>
<dc:creator>作者</dc:creator>
<dc:format>格式</dc:format>
<dc:description>简介<dc:description>
<dc:date>时间2023-02-10T05:20:00.00+00:00</dc:date>
<dc:identifier id="ebookid">文档ID</dc:identifier>
<dc:language>zh</dc:language>
<dc:publisher>出版社</dc:publisher>
<dc:contributor>贡献者或其它次要责任者</dc:contributor>
<dc:type>类型</dc:type>
<dc:subject>关键词</dc:subject>
<dc:source>来源信息<dc:source/>
<dc:relation>相关资料<dc:relation/>
<dc:coverage>覆盖范围<dc:coverage/>
<dc:rights>权限描述</dc:rights>
</metadata>

说明：

元数据 <metadata> 中 必须包含 title、Identifier 和 Language 三个元素；

如有需要，title、creator、contributor、identifier、type、date、subject 允许设置多行多个数据；

date 元素采用基于 ISO5601 定义的日期格式，同时以可选的 event 属性定义了以下三种不同类型：

Copy
<dc:date opf:event="creation">创作时间</dc:date>
<dc:date opf:event="publication">发行时间</dc:date>
<dc:date opf:event="modification">修改时间</dc:date>

identifier 元素中至少要有一个指定 id 属性，并从 package 元素的 unique-identifier 属性中引用 id，同时还有一个可选的 event 属性定义了不同类型的书号：

Copy
<dc:identifier id="ebookid">文档ID</dc:identifier>
<dc:identifier opf:scheme="ISBN">ISBN书号</dc:identifier>