EPUB eBook Style

Description#

Most EPUB eBooks downloaded from the internet have messy and unattractive formatting. To provide myself with a good reading experience, I wrote some simple CSS styles that only specify some basic formatting, aiming for simplicity and readability.

Overall Style#

This part of the style specifies all default properties in the EPUB eBook formatting, such as link styles, alignment, text spacing, etc.

General Style

/* Unified style for the main text */
.body {
	display: block; /* Display as block element */
	text-align: left; /* Text aligned to the left */
	text-align: justify; /* Text justified */
	padding: 0 0 0 0; /* Padding */
	margin: 0 5pt 0 5pt; /* Top right bottom left margin */
}
/* Link style */
a {
	color: #000000; /* Change link color from blue to black */
	text-decoration: none; /* Remove underline from links */
}

Print Style

/* Print text style */
@page {
	margin-bottom: 5pt;
	margin-top: 5pt;
}
/* Print cover style */
@page {
	padding: 0;
	margin: 0;
}

Table of Contents Example#

This part of the style specifies the formatting of the embedded table of contents in the EPUB eBook.

/* First level table of contents, single-level table of contents also uses this style */
.catalog1 {
	font-size: 100%; /* Font size */
	line-height: 125%; /* Line height */
	margin: 0.5em 0 0.5em 0; /* Top right bottom left margin */
}
/* Second level table of contents */
.catalog2 {
	font-size: 100%;
	line-height: 125%;
	margin: 0.2em 0 0.2em 2em;
}
/* Third level table of contents */
.catalog3 {
	font-size: 100%;
	line-height: 125%;
	margin: 0.2em 0 0.2em 4em;
}

<p class="catalog1"><a href="LUOMO01.html#Chapter001">1. Chapter One</a></p>
<p class="catalog2"><a href="LUOMO01.html#Chapter002">1.1 Section One</a></p>
<p class="catalog3"><a href="LUOMO01.html#Chapter003">1.1.1 Lecture One</a></p>

Title Example#

This part of the style specifies the formatting of the titles in the EPUB eBook.

/* Title style */
.title {
	line-height: 125%; /* Line height */
	font-weight: bold; /* Bold text */
	font-size: x-large; /* Larger font size */
	margin-top: 0; /* Top margin */
	padding: 5px 5px 5px 5px; /* Padding */
	border-style: none none none solid; /* Element border */
	border-width: 0px 0px 0px 10px; /* Border width */
	border-color: #000000; /* Border color */
}

<h1 id="Chapter001" class="title">1. Chapter One</h1>
<h1 id="Chapter002" class="title">1.1 Section One</h1>
<h1 id="Chapter003" class="title">1.1.1 Lecture One</h1>

Main Text Example#

This part of the style specifies the formatting of the main text in the EPUB eBook.

/* Main text style */
.mainbody {
	font-size: 100%; /* Font size */
	line-height: 120%; /* Line height */
	text-indent: 2em; /* First line text indent */
	margin: 0.3em 0 0.3em 0em; /* Top right bottom left margin */
}

<p class="mainbody">Main text example 01</p>
<p class="mainbody">Main text example 02</p>
<p class="mainbody">Main text example 03</p>

Emphasized Text#

This part of the style specifies the formatting of various emphasized texts in the EPUB eBook. This part of the style can change font size, color, and other attributes as needed to achieve the desired reading experience.

/* Emphasized font, color can be changed as needed */
.emphasize {
	color: #ff0000; /* Font color */
	font-size: 90%; /* Font size */
	font-weight: bold; /* Bold text */
	text-indent: 0; /* Remove first line text indent */
}

<br/>
<p class="emphasize">Emphasized text example
<br/>
Emphasized text example
<br/>
Emphasized text example
<br/>
Emphasized text example
</p>
<br/>

Section Numbering#

Some books have many subsections within large chapters, and these subsections do not have titles but are distinguished by numbers or other counting text. This part of the style specifies the formatting of such section numbers in the EPUB eBook.

/* Section number */
.sectionnum {
	font-size: 125%; /* Font size */
	line-height: 125%; /* Line height */
	font-weight: bold; /* Bold text */
	text-align: center; /* Centered text */
	font-style: italic; /* Italic text */
	margin: 2.5em 0 0.5em 0; /* Top right bottom left margin */
}

<p class="section">1</p>
<p class="section">2</p>
<p class="section">3</p>

Superscript Annotations#

Some books have many annotations, which are usually placed at the end of chapters, separate from the main text, and linked to the main text content through superscript numbers. This part of the style specifies the formatting of such superscript numbers in the EPUB eBook.

/* Annotation number */
.annotatenum {
	font-size: 75%; /* Font size */
	line-height: 125%; /* Line height */
	vertical-align: super; /* Vertically align text as superscript */
}
/* Annotation content */
.annotate {
	font-size: 80%; /* Font size */
	line-height: 120%; /* Line height */
}

<p>Annotation number
<sup class="annotatenum" id="annotatenum001"><small><a href="annotate001">［1］</a></small></sup>
</p>
<p>
<sup class="annotatenum" id="annotate001"><small><a href="annotatenum001">［1］</a></small></sup>
<span class="annotate">Annotation body</span>
</p>

Divider Line#

When there are annotations or other content different from the main text, a divider line is usually used to separate this content from the main text. This part of the style specifies the formatting of divider lines in the EPUB eBook.

/* Divider line */
.splitline {
	height: 2px; /* Line thickness */
	width: 98%; /* Line width */
	border: none; /* Remove original line */
	background: #bcbcbc; /* Line color */
}

<hr class="splitline"/>

Code Blocks#

Computer-related books often contain a lot of code content. This part of the style specifies the formatting of code blocks in the EPUB eBook.

/* Code block box */
.boxblock {
	background-color: #dcdcdc; /* Code block background color */
	margin: 0.25em 0 0.25em 0; /* Top right bottom left margin */
	padding: 0.1em 0 0.1em 0; /* Top right bottom left padding */
	border: none; /* Remove code block border */
	border-radius: 2px; /* Border radius */
}
/* Code block text */
.boxtext {
	font-size: 60%; /* Font size */
	line-height: 120%; /* Line height */
	white-space: pre-wrap; /* Normal spaces and line breaks */
	vertical-align: middle; /* Vertically align text in the middle */
}

<div class="boxblock">
<pre class="boxtext">    Code block example 01;
    Code block example 02;
    Code block example 03;
</pre>
</div>

Superscript and Subscript Numbers#

This part of the style specifies the formatting of superscript and subscript numbers in the EPUB eBook, which are typically used for powers of numbers, chemical element expressions, etc.

/* Superscript number */
<p>10<sup><small>35</small></sup></p>
/* Subscript number */
<p>10<sub><small>35</small></sub></p>

Image Example#

For books that require illustrations, this part of the style specifies the formatting of images in the main text of the EPUB eBook.

/* Main text image */
.image {
	width: auto; /* Adaptive width */
	height: auto; /* Adaptive height */
	max-width: 99%; /* Maximum width */
	display: block; /* Display as block element */
	line-height: 1.5; /* Line height */
	margin-left: auto; /* Adaptive left margin */
	margin-right: auto; /* Adaptive right margin */
	/* To change the horizontal display position of the image, only change the margin-left or margin-right property value
	   Align left: margin-left: 0; margin-right: auto;
	   Align right: margin-left: auto; margin-right: 0;
	   Center: margin-left: auto; margin-right: auto;
	   Note: When using these two properties to change the horizontal position, be sure to add display: block; property
	*/
	text-align: center; /* Centered horizontally */
	vertical-align: middle; /* Centered vertically */
}
/* Text image, used for certain rare characters that cannot be displayed normally, inserted in the main text as an image */
.imagetext {
	line-height: 1.2;
	height: 1em; /* Set image height to one character height */
	width: auto; /* Adaptive width */
	max-width: 99%; /* Maximum width */
	text-align: center; /* Centered horizontally */
	vertical-align: middle; /* Centered vertically */
}

<img class="image" src="Images/image01.jpg"/>
<img class="imagetext" src="Images/image01.jpg"/>

Image Caption#

For books that require illustrations, this part of the style specifies the formatting of captions for images in the main text of the EPUB eBook.

/* Image caption */
.imagetitle {
	margin: 1em 0; /* Top right bottom left margin */
	color: #555555; /* Text color */
	font-size: 0.75em; /* Font size */
	text-align: center; /* Centered text */
}

<p class="imagetitle">Image Caption</p>

Cover Example#

eBooks usually have their own covers. This part of the style specifies the formatting of cover images in the EPUB eBook.

<style type="text/CSS">
/* Print cover style */
@page {
	padding: 0;
	margin: 0;
}
/* Preview cover style */
body {
	text-align: center;
	padding: 0;
	margin: 0;
}
</style>

<div>
<img width="100%" src="Images/cover.jpg"/>
</div>

OPF File Metadata #

The OPF file is an essential part of the EPUB eBook, and the metadata attribute is important content that typically includes the following sections.

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
	<dc:title>Title</dc:title>
	<dc:creator>Author</dc:creator>
    <dc:format>Format</dc:format>
	<dc:description>Description<dc:description>
    <dc:date>Date 2023-02-10T05:20:00.00+00:00</dc:date>
    <dc:identifier id="ebookid">Document ID</dc:identifier>
    <dc:language>en</dc:language>
	<dc:publisher>Publisher</dc:publisher>
	<dc:contributor>Contributor or other secondary responsible person</dc:contributor>
    <dc:type>Type</dc:type>
	<dc:subject>Keywords</dc:subject>
	<dc:source>Source information<dc:source/>
	<dc:relation>Related materials<dc:relation/>
	<dc:coverage>Coverage<dc:coverage/>
	<dc:rights>Rights description</dc:rights>
</metadata>

Note:

The metadata must contain the three elements: title, identifier, and language;
If needed, title, creator, contributor, identifier, type, date, and subject can be set with multiple lines of data;
The date element uses the date format defined by ISO5601, and the optional event attribute defines the following three different types:

<dc:date opf:event="creation">Creation time</dc:date>
<dc:date opf:event="publication">Publication time</dc:date>
<dc:date opf:event="modification">Modification time</dc:date>

The identifier element must have at least one specified id attribute, which is referenced from the unique-identifier attribute of the package element, and also has an optional event attribute defining different types of book numbers:

<dc:identifier id="ebookid">Document ID</dc:identifier>
<dc:identifier opf:scheme="ISBN">ISBN number</dc:identifier>