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 will deal with the syntax of CSS, which styles work with Kindle and, more importantly, which do not. (I will link those posts here when they are published.)
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:
/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 am devoting an entire post to how to style small capitals (it will be linked here).
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
tinyURL for this post: http://ift.tt/1iPreiQ
Source:
http://ift.tt/1iPreiU