Can Everton Jones find out how his father stole Emperor Bokassa’s diamonds and, more importantly, where he hid them; before the world and his brother get there first?
Click on the picture link in the sidebar to read an extract of my first novel, which was published by Paradise Press in August 2012.

Thursday, 15 May 2014

How to replace the markup with CSS styles in your ebook using Sigil

Once you have your ebook text imported into your epub as a single chapter of unformatted text containing the markup codes you created, the next step is to replace this markup with the necessary CSS styling. This post deals with the mechanics of replacing the markup. Future posts deal with the syntax of CSS and also which styles work with Kindle and, more importantly, which do not.

Let’s first consider how to apply the styling for a chapter heading. The paragraph in the original MS Word file would have been marked up* by inserting ‘/ch/’ (or something like that) at the beginning of the line (*see my post on this):

/ch/Chapter Heading

Once the file has been converted to unformatted text and imported into your epub file using Sigil, the chapter heading will look like this:

<p>/ch/My Chapter Heading</p>

You need to use Find and Replace to change: ‘<p>/ch/’ to: ‘<p class="chapterHeading">’ throughout the ebook file. The outcome should be:



<p class="chapterHeading">My Chapter Heading</p>

Repeat this process for EACH markup code in the document.

The code: class="chapterHeading" in the <p> tag specifies that the line:

.chapterHeading { }

in the CSS stylesheet will be used to define the formatting for that paragraph.

For the record, and only as an example (you might want to style YOUR chapter heading differently), the style is defined in the CSS stylesheet like this:

First the default style for all paragraphs is defined by this code:

p {text-align: justify; text-indent: 1em; margin: 0;}

And then the additional formatting for the chapter heading is defined in the CSS stylesheet thus:

.chapterHeading {text-indent: 0; text-align: center; font-size: 2.5em; font-style: italic; margin-bottom: 1em;}

This informs the name, Cascading Style Sheet: the default paragraph style is applied first and THEN that in the style for the chapter heading is applied on top. Note that because the chapter heading should be centred on the page the default paragraph style’s text-indent: 1em; has been overridden by the chapter heading style’s text-indent: 0; definition. This ensures that the chapter heading is centred on the full width of the page.

We now come to the styles which apply within paragraphs, such as italic, small capitals, etc.

A paragraph in the marked-up book text might be something like:

<p class="space">This line has a word in /i/italic/ii/ and is followed by a space</p>

In this example, the CSS styling for the paragraph has already been applied by following the steps above. The italics will then be applied by using a ‘span’ tag. First replace all instances of ‘/ii/’ with ‘</span>’.

The example line above would now look like this:

<p class="space">This line has a word in /i/italic</span> and is followed by a space</p>

Now replace all instances of ‘/i/’ with ‘<span class="italicText">

The paragraph in the chapter will now look like this:

<p class="space">This line has a word in <span class="italicText">italic</span> and is followed by a space</p>

The style is declared in the CSS stylesheet thus:

.italicText {font-style: italic;}

Note that you could have replaced ‘/i/’ with ‘<i>’ and ‘/ii/’ with ‘</i>’, so that the line in the ebook would instead become:

<p class="space">This line has a word in <i>italic</i> and is followed by a space</p>

HOWEVER Sigil tends to pick up the <i> tags and defines a custom CSS style for you in the header of the chapter, so I prefer to define a named style in the CSS stylesheet and apply it using a <span>.

Other styles which need applying within a paragraph should be applied in a similar way using the markup you have placed in the file. Small Capitals are a particularly difficult case and I have devoted an entire post to how to style small capitals.

The <span> tag just identifies a chunk of text so that styling can be applied to it, it does nothing else.

This post has covered HOW to replace the mark-up codes with CSS styles in your e-book. The design of your e-book and so the actual CSS styles you will use is, of course, up to you. However the Kindle only has a very limited range of CSS styles available to it and your design will have to take account of this. The next post will cover in detail which CSS styles work with Kindle and how to define styles using these. It is advisable to use the same range of styles in your e-pub as well, so that you can convert that into the Kindle version safe in the knowledge that your styles will work properly and also so that both versions of your e-book will look the same to the user.


Index to ‘how to …’ posts:

How to ‘unpack’ an epub file to edit the contents and see what’s inside.
How to understand what is inside an epub
How to link the html table of Contents in a Kindle e-book
How to restructure the html table of contents for a Kindle
How to delete the html cover for a Kindle ebook
How to link the cover IMAGE in a Kindle e-book
How to clean up your MS Word file before your get started
How to markup an MS Word file to identify the formats before importing it into an epub
How to create a new blank e-pub using Sigil
How to import your marked-up MS Word file into your ebook using Sigil
How to create and link a CSS stylesheet in an e-book using Sigil
How to replace the markup with CSS styles in your ebook using Sigil
How to style an e-book so it works with the limited CSS styling available to Kindle e-readers
How to understand the syntax of CSS
How to style Small Caps in an e-book
How to split your ebook up into chapters using Sigil
How to sequence your e-book
How to phrase the copyright declarations etc. in an e-book
How to generate the logical table of contents using Sigil
How to understand toc.ncx in an e-book
How to generate the html table of contents in an e-pub
How to style the html table of contents using CSS
How to create an html cover for your epub using Sigil
How to present references and notes in a book
How to use Mark Up to link notes in your e-book
How to present a bibliography in a book
How to use markup to link entries in a bibliography with the notes section
How to index an e-book
How to use the tools in MS Word to create an index

tinyURL for this post: http://tinyurl.com/o2dfoum

No comments:

Post a Comment

 
Twitter Bird Gadget