E-Book Formatting - Location Independent Series

Table of Contents

HTML Templates

I provide a basic template in the book but here I expand on that a bit and offer two different templates tailored for different needs. The only notable difference is how the paragraph styling is handled.

E-Book HTML/CSS Template (Standard)

The first template indents all paragraphs except the first of each chapter (or section). This is standard formatting for most books.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<title>Your Book Title Here</title>
<meta name="author" content="Your Name">
<meta name="cover" content="imagename.jpg">
<style type="text/css">
/* HEADINGS */
h1 { 
	font-family:"Cambria", serif;
	font-size:2em;
	margin-top:2.5em;
	margin-bottom:0.5em;
	color:#366091; text-align:center;
	page-break-before:always;
	page-break-inside:avoid;
}
h2 { 
	font-family:"Cambria", serif;
	font-size:1.6em;
	margin-top:1.25em;
	margin-bottom:0;
	color:#4f81bd;
	text-align:left;
	page-break-inside:avoid;
	page-break-after:avoid;
}
h3 { 
	font-family:"Cambria", serif;
	font-size:1.4em;
	margin-top:1.25em;
	margin-bottom:0;
	color:#4f81bd;
	text-align:left;
	page-break-inside:avoid;
	page-break-after:avoid;
}
h4 { 
	font-family:"Cambria", serif;
	font-size:1.3em;
	margin-top:1.25em;
	margin-bottom:0;
	color:#4f81bd;
	text-align:left;
	page-break-inside:avoid;
	page-break-after:avoid;
}
h5 { 
	font-family:"Cambria", serif;
	font-size:1.2em;
	margin-top:1.25em;
	margin-bottom:0;
	color:#243f61;
	text-align:left;
	page-break-inside:avoid;
	page-break-after:avoid;
}
h6 { 
	font-family:"Cambria", serif;
	font-size:1.1em;
	margin-top:1.25em;
	margin-bottom:0;
	color:#243f61;
	text-align:left;
	page-break-inside:avoid;
	page-break-after:avoid;
}

/* PARAGRAPHS (STANDARD) */
p {
	text-indent:0em;
	margin-top:0em;
	margin-bottom:0em;
	line-height:2.0em; 
}
p+p {
	text-indent:1.2em;
}
.indent {
	text-indent:1.3em;
}
.left {
	text-align:left;
} 
.no_indent {
	text-indent:0em;
}

/* LIST ITEMS */
ul { 
	margin:0px; 
	padding-left:30px; 
}
ol { 
	margin:0px; 
	padding-left:30px; 
}
ul li, ol li { 
	margin-left:0; 
	padding-left:0; 
}
li { 
	text-align:left; 
	text-indent:0; 
	margin: 0.5em 0; 
}
li p { 
	text-indent:0 
}

/* IMAGES */
img {
	float:none !important;
	max-width:100%;
	height:auto;
	max-height:100%;
	margin-top:0.5em;
	margin-bottom:0.5em;
}
.centered-image {
	width:90%;
	margin:1em 5%;
}
.centered-image img {
	width:100%;
	object-fit:contain;
}
.fullwidth-image { 
	width:100%; 
	margin:1em 0 
}
.fullwidth-image img { 
	width:100%; object-fit:contain; 
}
.title_img_outer {
	text-indent:0%;
	text-align:center;
	width:40%;
	margin:1em 30%;
}
.title_img {
	object-fit:contain;
	width:100%;
	height:185;
}

/* TABLES */
table {
	margin:1em 0;
	border:1px solid #999;
	background-color:#efefef;
	width:100%;
	vertical-align:text-top;
	border-collapse:collapse;
}
tr {
	vertical-align:top;
}
td, th, table pre { 
	padding:0.5em 0.5em; 
	vertical-align:top }
}
td p, th p {
	margin:0.5em;
	page-break-inside:avoid;
	page-break-after:avoid;
	text-indent:0;
	text-indent:0;
}
td ul {
	margin-top:0;
	margin-bottom:0;
}
td ol {
	margin-top:0;
	margin-bottom:0;
}
td li p {
	margin-left:0.25em;
}
td.quote {
	padding:0.5em;
}
.evenrow {
	background-color:#e5e5e5;
}
.oddrow {
	background-color:#efefef;
}
.toprow {
	background-color:#d4d4d4;
	font-weight:bold;
	border-bottom:1px solid #999;
}
.toprow_green {
	background-color:#d0e0e3;
	font-weight:bold;
	border-bottom:1px solid #999;
}
tr.toprow td {
	border-bottom:1px solid #999;
}

/* TABLE OF CONTENTS */
.toc a {
	text-decoration:none !important;
}
.toc li {
	list-style-type:none;
}
.toc_level1 {
	padding-left:0;
}
.toc_level2 {
	padding-left:1.2em;
}
.toc_level3 {
	padding-left:2.4em;
}
.toc_level4 {
	padding-left:3.6em;
}
.toc_title {
	margin-top:0;
	color:#333333;
	text-align:left;
}

/* TEXT */
.centered_text {
	text-align:center;
}
/* This fixes the bug where the text-align property of block-level elements is not recognized on iBooks */
/* example: html markup would look like <p class="centered"><span class="centered_text">Centered Content</span></p> */
/* REF: https://gist.github.com/ZhiguoLong/ec9d86ebd0540b8a8631 */
span.centered_text {
	text-indent:0em;
	text-align:center;
}
.author {
	font-family:Cambria, Roboto, "League Gothic", Garamond, serif;
	font-size:1.25em !important;
	font-weight:normal;
	color:#333333;
	text-align:center;
	margin-top:4em;
}
.drop-cap {
	float:left;
	font-size:2.3em;
	line-height:0.9em;
	height:0.9em;
	margin-top:0.1em;
	margin-left:0em;
	margin-right:0.05em;
	padding-left:3px;
}
.footnote {
	vertical-align: super;
	font-size: 0.75em;
	text-decoration: none;
}
.highlight {
	border-top:1px solid #999;
	border-bottom:1px solid #999;
	background-color:#efefef !important;
	padding:0.5em 1em;
}
.small {
	font-size:0.8em;
}
.small-caps {
	font-variant-caps:small-caps;
} 
.subtitle {
	font-family:Cambria, Roboto, "League Gothic", Garamond, serif;
	font-size:1.25em !important;
	color:#333333;
	text-align:center;
	margin-top:1em;
}
.title {
	font-family:Cambria, Roboto, "League Gothic", Garamond, serif;
	font-size:3.0em !important;
	margin-top:1em;
	text-align:center;
}

/* OTHER STYLES */
blockquote {
	background-color:#efefef; 
	border-left:10px solid #999;
	padding:1em;
}
div.pullquote {
	margin: 2em 2em 0 2em;
	text-align: left;
}
div.pullquote p {
	font-weight: bold;
	font-style: italic;
	margin: 0.5em 0;
}
div.pullquote hr {
	width: 100%;
	margin: 0.25em 0;
	height: 2px;
	color: #999;
	background-color: #999;
	border: 0;
}
.pagebreak_avoid {
	page-break-inside:avoid;
	page-break-after:avoid;
}
</style>
<body>

<!-- put your content HTML code here -->

</body>
</html>

E-Book HTML/CSS Template (Block Paragraphs)

The second template has no paragraph indentations and adds top and bottom margins for each paragraph to aid readability. This is suitable for certain types of nonfiction books.

Rather than reproduce the entire code, just use the code above but replace the following:

/* PARAGRAPHS (STANDARD) */
p {
	text-indent:0;
	margin-top:0em;
	margin-bottom:0em;
	line-height:2.0em; 
}
p+p {
	text-indent:1.2em;
}

with:

/* PARAGRAPHS (BLOCK) */
p { 
	text-indent:0; 
	margin-top:1.25em; 
	margin-bottom:1.25em; 
	line-height:2.0em; 
}
p+p { 
	text-indent:0; 
}

List of Links Found in the Book

Note: all links open in a new tab