Part 1 • About eBooks
Chapter 3 • Editing ePubs
Richard Adams
Editing ePubs enables authors and publishers familiar with HTML and CSS to make changes and create special effects outside of the originating program.
Opening an ePub
The .epub file type is a compressed archive containing the pages in XHTML, style specifications in CSS, and accompanying images, fonts, audio, video, JavaScript, and other files (if any). Opening and editing an .epub file generally requires a third-party app that can read XHTML, such as Sigil (Figure 3.1) or Oxygen XML Editor. Opening the ePub gives access to the XHTML and styles.
XHTML is similar to HTML. The X for “extensible” means that users can write their own tags, provided that they explain them. M stands for markup, meaning the text and objects are indicated or pointed to with tags, which are enclosed in less-than and greater-than signs. An example of a tag is <p> for paragraph. A paragraph needs an opening <p> at the beginning and a closing </p> tag at the end. Some tags are self-closing, including <img/> for image, <br/> for break (carriage return), and <hr/> for horizontal rule (line). With these tags the closing “/” is included at the end of the tag.
HTML and CSS for ePub
Some of the most common tags used in ePubs are the paragraph, heading, and image tags (Table 3.1).
| <p> | paragraph |
| <h1>…<h6> | heading 1 (largest) to heading 6 (smallest) |
| <span> | span, region of text to be selected and styled |
| <img/> | image, e.g., <img src=”imagename.jpg” /> |
| <figure> | Unites an <img> tag and its caption (<figcaption>) |
| <figcaption> | caption for an <img> tag |
| <br/> | break, or carriage return (self-closing), can be replaced with styles “padding” or “margin” |
| <hr/> | horizontal rule, or line; there are no vertical rules, but they can be made with a border-left or border-right style on an object. |
To style a given tag with CSS, the tag must first be selected. This can be done by siting the tag itself, such as “p” for paragraph. However the specified style will be applied to all paragraphs. To select one specific paragraph, it’s helpful to identify that paragraph with an ID (e.g., <p id=”first-para”>). The ID should be an alphanumeric name with no spaces. An ID can only be applied to one tag on a page. To select multiple tags, use a class. The format is similar: <img class=”body-fig”>. To cite an ID in CSS, use the # symbol. A period (.) indicates a class.
| Identifier | Example in HTML | Selector in CSS |
| tag, e.g., <p> | <p> | p |
| ID | <p id=”first-para”> | #first-para |
| class | <img class=”body-fig”> | .body-fig |
Table 3.3 shows some styles that can be applied to text.
| text | image |
| font-family: font-size: font-style: font-weight: line-height: color: |
width: height: float: margin: |
Creative Effects with ePubs
Some special effects that enhance ePubs include drop-caps, drop shadows on text and images, and borders on images.
Decorative fonts. Royalty-free fonts available from Google Fonts and other sources can be used in web-based and ePub eBooks. Fonts can either be linked to their internet sources as style sheets or included on the web server or in the eBook. Technically an ePub should be readable without being connected to the internet, therefore it’s best to download the font and include it in the ePub. When editing an ePub in Sigil, include the font file in the Fonts folder and specify it in the style sheet (Figure 3.2).
Drop-caps. Drop-caps can be created by making the first letter of the first paragraph larger than the surrounding text. In the example (Figure 3.3), the first letter in the paragraph, “C,” is selected using the ::first-letter selector, which is built in to the latest version of HTML. The letter “C” has the surrounding text wrapped around it using the “float” left style. the letter “C” is set to 4.4 times the size of the other text using the “em” measurement. (One em is the size of the text in points, so for 14-pt. text like that shown, one em would be a square 14 pt. on each side.) The “C” is set to wrap the surrounding letters using the “float: left” style. Margins are set for the top, right, bottom, and left positions to move the text further away to the right of the “C” and bring it closer to the bottom. The letter has a drop-shadow created with the text-shadow style, which has four specifications—right offset, vertical offset, blend distance, and colour.
Images. Images, like the one shown in Figure 3.3, can have borders applied using the “border” style, with specifications for width, line type, and colour. A drop-shadow can also be applied using the “box-shadow” style, which is similar to text-shadow described above. (Not all platforms, eReader apps, and eReaders may support the drop-shadow style.)
Small caps. These are smaller uppercase letters at the beginning of a chapter or section (Figure 3.4), often following a drop-cap. Small caps can be created by selecting the desired region of text with opening and closing <span> tags, then setting the “font-variant: small-caps” style.
Sidebars. Sidebars are boxes with ancillary information relating to the current chapter or section (Figure 3.5). Sidebars can be created by inserting one styled <p> tag, or if more than one paragraph, a <div> or division tag. The sidebar can then be styled with the “border” and “background” styles.
Pull quotes. These are one or more sentences or phrases taken from the text that are set in much larger type in order to add interest to the text (Figure 3.6). A pull quote can be created by especially styling a <p> paragraph tag, or using a <div> division. The text can be set to a larger font and with quote marks if appropriate.
