Styling Tips for EPUB

Most writers are familiar with word processors such as LibreOffice, Atlantis or Microsoft Word. Each has many settings to make the text of a book look good. If the appearance is good enough, then simply export the file as an EPUB file and you are done.

But, good enough is often not.

That’s when the self-publisher takes a step up and learns about HTML, XHTML, CSS, and RegEx. The Internet has many tutorials for those subjects. Here are some examples:

HTML and XHTML are languages for containing the content of a book:
<p>This is the content of a paragraph.</p>.

CSS describes how the content should look. Here is a declaration:
.mycolor {color:blue;}

Combining HTML and CSS results in:
<p class=”mycolor”>This is the content of a paragraph.</p>
Resulting in:

This is the content of a paragraph.

RegEx or regular expression is a statement to find words within a large volume of text and replacing them if desired:
find: ({color:)blue(;})
replace: \1red\2
resulting in:
{color:red;}
Which replaces the word blue where found with the word red in a CSS expression in the mycolor declaration for the paragraph selector above. (yes, RegEx is complicated but worth the effort for a print designer to learn). Sigil (software to make EPUB files) contains a very capable RegEx find and replace feature.

Here are some very helpful CSS statements for the CSS that can be added to an EPUB:

This is to make sure that 1em remains constant throughout a document.

body {
font-size:100%;
}

This defines the top level heading style (like a chapter title)

h1 {
text-indent: 0em;
font-size: 3em;
font-weight: bold;
margin-top: 3.0em;
margin-bottom: 2em;
text-align: center;
font-family:’Brush Script MT’;
}

Set the basic style for all indented paragraphs.

p {
text-indent: 1.25em;
margin-top: 0em;
margin-bottom: 0em;
margin-left: .5em;
margin-right: .5em;
line-height: 1.15;
font-size:1em;
font-family: ‘Garamond’;
font-weight: normal;
}

Set a paragraph to serve as a quotation block

p.quotation {
text-indent: 0em;
font-size: 1em;
font-weight: normal;
font-style:italic;
margin-bottom: 0em;
margin-left:10%;
margin-right:10%;
text-align: center;
font-family: ‘Arial’;
}

Set a paragraph to small capitals:

p.small {
font-variant: small-caps;
}

This sets a span of letters to be a drop cap.

span.dropcap {
float:left;
font-size:4.8em;
line-height:60%;
background:transparent;
text-decoration:none;
text-indent:0em;
padding:0 .1em 0 0;
}

Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)