Web programming TipsBy Sergey Skudaev
Find Sigil on Google, download it, and install it. It can be used on Windows PC or Mac.
Open your epub file using Sigil. You will see the epub file structure tree on the left and the book XHTML code on the right.The Text folder contains xhtml text files, the images folder contains image files and the style folder contains css files. See Figure 1.
Figure 1. The epub structure.
You see the find and replace fields at the bottom of the window.
Make sure that "All HTML Files is selected from the drop-down list under the Replace
field. To find a paragraph that you want to fix or change, type a piece of text
from that paragraph and click find.
As an example, I will show you how to change a chapter title style. First, I
type the title in the search box and find it. See Figure 2.
Figure 2. The title I want to modify is found.
Now, look at the HTML code. '<p> and </p>' tags are used for a paragraph. You see class="block_9". This class defines how the text inside the paragraph is displayed. Open the styles folder and select the second file: stylesheet.css.
Scroll down and find the block_9 class. A class in a CSS file has a dot in front of its name. See Figure 3.
Figure 3. The stylesheet.css file with the block_9 class.
Add two lines of code to the block_9 class. Each line must have a semicolon at the end.
The first line: color: red;
The second line: font-style: italic;
See Figure 4.
Figure 4. Two lines are added to the stylesheet.css file.
Now, your title becomes red and italicized. See Figure 5.
Figure 5. The title color is red and style is italic.
How to create a drop cap for the first letter of the chapter? See Figure 6.
Figure 6. The first character of the title is displayed as a drop cap.
Place the first character of the title inside the span tags: <span> with the dropcap class. See Figure 7.
Figure 7. The first character of the title inside the span tags: <span> .
Now open the stylesheet.css file and add the dropcap class. See Figure 8.
Figure 8. The dropcap class definition in CSS.
The first line of code is obvious. It defines text color as
red. The second line of code, "float: left," means that the span with the letter
inside will be moved to the left of the paragraph.
The next line, "font-family: Georgia," defines what font family you want to
use.
The next line, "font-size:75px," defines the size of the letter inside the
span.
The next line, "line-height:60px, " defines the vertical distance between the lines
of a text.
The padding-top, padding-left, padding-right, and padding-bottom define the letter distance from the parent paragraph"s top, left, right, and bottom edges.
It is hard to know in advance which values you must use for all these attributes. You must experiment with the different values and see the result.
Figure 9. The first character of the title is displayed as a drop cap..