John's Blog

About Formatting Tips.

This is a very easy formatting type and is similar to doing a drop cap. The big difference is a raised initial the letter is on the base line and is higher than the other letters. Only the first letter of the first paragraph of a chapter should be raised.

Simply wrap the first letter in a span tag referencing the appropriate CSS class like so.

<p><span class="ri">L</span>orem...</p>

The CSS for a raised initial is very easy. Simply make the font size larger than normal and set it to bold.

span.ri {
    font-size: 4em;
    font-weight: bold;
}

The best way to illustrate this concept is with an example. Download ft-raised-initial.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.

Tags: book, calibre, ebook, epub, formatting, FT, print, tips.

About Formatting tips.

Many non-fiction books utilize footnotes or endnotes. Footnotes do not work very well with ebooks because footnotes need to be placed at the bottom of a page. It is possible with EPUB to specify content to be shown at the bottom of a page using the following:

<div style="display: oeb-page-foot">...</div>

I highly recommend against using the oeb-page-foot display style. Many reading devices and software do not support this and just ignore this text. My recommendation is to use endnotes.

All endnotes should be collected into a single page located at the end of the ebook. I recommend using either a * or increasing numbers. If you use numbers the number in the text should correspond and be displayed infront of the endnote. Use the sup tag and link to the end note.

<sup id="ra"><a href="c2.xhtml#enda">*</a></sup>

One thing to keep in mind is not all ebook reading device and software support a back button. So it’s a good idea to include a return link to take the reader back to the exact place in the text the endnote is referenced by. Make the return link subtle but not something the reader will over look. I just make the font smaller.

<sub><a class="return" href="c1.xhtml#ra">return</a></sub>

.return {
    font-size: x-small;  
}

The best way to illustrate this concept is with an example. Download ft-endnotes.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.

Tags: book, ebook, epub, formatting, FT, print, tips.

About Formatting Tips.

When dealing with the EPUB format there are number of ways to deal with sizes. Font size, indent, margin, spacing all allow for a variety of units to define their size. Sizes can be defined using any of the following: %, in, cm, mm, em, ex, pt, pc, px.

With all these choices it might be hard to decide which unit type to use. This decision is actually very easy. Alway use a relative size type. cm and in for instance are fixed size; 1 cm is always 1 cm and 1 in is always 1 in. % and em are relative sizes. An em is equivalent to the the current font size. So 1 em is equivalent to 12 pt if the font size is 12 pt.

It’s very important to use relative sizes because EPUB and EPUB reading software / devices allow for users to change font sizes. Also, there is significant variation in screen sizes. Using relative sizes means that spacing of elements (indents for example) will always appear the same.

I’ll admit using relative sizes is hard. In some of the examples for Formatting Tips I’ve used exact measurements. I apologize for this but this illustrates how difficult it can be to take into account all of the possible rendering issues that can arise from such a diverse reading ecosystem available today.

Be careful when using relative sizes. Each unit is unique. Using a % for the indent will be a % of the screen width. While using a % for a text size it will be relative to the text size of that element. An em is always going to be relative to the current font size. Be sure to check the layout with various text sizes and screen dimensions. You can simulate (it’s not perfect) by opening the book in something like Sigil or calibre’s ebook-viewer and change the zoom and window size.

Tags: book, ebook, epub, formatting, FT, print, tips.

About Formatting Tips.

Up to this point Formatting Tips have been focused on the EPUB format and working directly with the underlying XHTML and CSS. Not everyone wants or needs this level of control over the layout of their book. Often times a book only needs basic formatting such as headings, bold, and italic. There are other easier ways to format an ebook. However, in this case simpler does mean basic.

A very easy way to format an ebook is to start with a plain text file (TXT). Then use either Markdown or Textile to add the formatting. Both Markdown and Textile allow for simple text formatting and they are designed to be converted to HTML.

By using TXT with a formatting syntax you can use pretty much any text editor you want. Markdown and Textile are very simple formats that are much easier to learn than XHTML and CSS. Adding things like *bold* is as easy as putting a * before and after a segment of text.

I recommend looking at both Markdown and Textile. There are differences in what formatting they support but they both support the basics like bold, italic, and headings. I’ve found Markdown to be easier to use but Textile offers more options.

After adding your formatting to the text it’s very easy to turn the TXT file into your desired final format (EPUB or MOBI most likely). calibre supports TXT formatted with either Markdown or Textile. However, the Textile support is more robust. Simply convert to the output format of your choosing.

Tags: book, calibre, ebook, epub, formatting, FT, markdown, print, textile, tips, txt.

About Formatting Tips.

Calibre’s robust conversion engine can be leveraged to help with formatting tasks. Converting with calibre helps when you are dealing with a format you cannot easily edit, or a format you aren’t very familiar. It’s also helpful in situations where the insides of the file is such as mess it’s hard to understand.

Many of these tasks are geared toward people who already have an ebook in an existing format that they need to clean up. A common case is a book from Project Gutenberg. Ebooks from Project Gutenberg are in no way poor quality. However, a TXT file is not going to have any formatting because the format doesn’t support it. There is a large number of people who want to add fancy formatting to classic titles. Another reason for conversion first is HTML documents produced by Microsoft Word. While Word is a great text editor its HTML output is atrocious. There is often lots of extra formatting information that is unnecessary and unused. Conversion can reduce the amount of time they need to spend adding formatting by using calibre as a first step.

Some common ebook formats MOBI (used by Amazon) and eReader PDB are compiled. They are not easily edited and one of the easiest ways to make changes is to convert to a format that has robust editing tools.

There have been many ebook formats over the decades that ebooks have been around. I’m not going to go into why there are so many ebook formats but know that many of them are not widely used any more. It’s easier to take a format like an ebook in the Plucker format from Project Gutenberg and convert it to an easy to edit format than working in the Plucker format.

Now that the whys are out of the way let’s move on to the hows.

When converting from any format there are a few output formats I recommend. EPUB is of course easy to edit using Sigil. If you want to use HTML as your base format I would commend looking into calibre’s HTMLZ output. HTMLZ is really a ZIP file with a single HTML file inside of it. One major advantage of HTMLZ over EPUB is HTMLZ output has some options that can be used to clean up the output. For instance HTMLZ can condense CSS styling to a basic set and produce a CSS HTML file inside of the archive.

Another option for conversion is TXT output. TXT by itself will remove all formatting. If the file is so poorly formatted it could be easier to start from scratch and add all formatting back yourself. TXT output also has the advantage of being able to produce Markdown or Textile formatted output. Both of these give basic formatting while removing extraneous formatting information.

Finally, when converting with calibre look at the Heuristic formatting options. They are disabled by default and should be used with care (Except with non-Markdown and non-Textile TXT input). There are heuristics for many common formatting needs such as detecting and formatting chapters and chapter subtitles. There are heuristics for italicizing common cases, removing unnecessary hyphens, and fixing broken lines. There are more options than these and it’s a good idea to go though them all and enable the ones that apply to the ebook your working on.

My recommendation is if you’re starting with a poorly formatted starting point use conversion to do some of the basic work for you. Conversion is an automated process and can take care of some tedious tasks for you but it’s not a replacement for human editing.

Tags: book, calibre, ebook, epub, formatting, FT, print, tips.

About Formatting Tips.

Poetry is one of the hardest elements to get right when formatting an ebook. The biggest issue is poems visually use a fixed width. Each line needs to be easily distinguishable. If they run together the rhyming and meter can easily be thrown off. Ebooks typically allow for reflowable text. This is where the text on screen changes to accommodate the users selected font, font size, and the screen size. This is exactly what happens on a web page how each line changes length when the browser window is resized.

When dealing with a poem do not put it in a pre tag. Do not use a single p tag and separate each line with a br tag. Do use an ul tag and hide the bullet. All of these methods will end up looking terrible.

When dealing with a poem there are two parts: the poem’s text and the attribution. Each of these parts will be in p tags. Lets start by setting a base p style with CSS. We want to remove the empty space between paragraphs.

p {
    margin-bottom: 0;
    margin-top: 0;
}

There are a few special things we want to do with the poem’s text. First, we want it pushed to the right so it is clear to the reader that they have entered a poem. One way to do this is to put the entire poem in a blockquote tag. I don’t like this because this affect can be achieved with CSS. Second, the text should be smaller than the regular text. Third, we want each line to not be indented. However we do want each line to be distinguishable even if the text is wrapped. The trick is to indent the portion of the line that wraps. Think of this like a reverse paragraph indent. We can make this happen by using a negative value for the text indent. Here is the CSS block to make all this happen.

.poem-text {
    margin-left: 3em;
    font-size: small;
    text-indent: -1em;
}

With many poems there are often breaks ever few lines. Handles these by putting in an almost empty paragraph. It’s necessary to put a non-breaking space in the empty paragraph because completely empty paragraphs are often ignored by devices and reading software.

<p>&nbsp;</p>

For the title we want to have it appear italicized. We also want to force a little space between the poem’s text and the title. The author we want to force some blank space after it so it doesn’t run into a paragraph below. Both the title and author need to be right justified. Finally, I like to use small caps with the title and author. However, there is one major issue with small caps. Many reading devices and software (one’s using Adobe’s software) do not support small caps. Sometimes you can get away with using a CSS transformation to uppercase. Check your targeted reading platform / device to make sure this will come through. If it doesn’t you will need to make the title and author uppercase in the text itself.

.poem-title {
    font-style: italic;
    text-align: right;
    margin-top: 2em;
    /* Pick one or neither */
    font-variant: small-caps;
    text-transform: uppercase;
}
 
.poem-author {
    margin-bottom: 2em;
    text-align: right;
    /* Pick one or neither */
    font-variant: small-caps;
    text-transform: uppercase;
}

The best way to illustrate this concept is with an example. Download ft-poetry.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.

Tags: book, ebook, epub, formatting, FT, print, tips.

About Formatting Tips.

There are two types of scene breaks: hard and soft. Hard scene breaks are denoted by a visual separator between paragraphs. Typical identifiers are lines and stars. Soft scene breaks are created by putting white space between paragraphs. They both serve the same purpose but some authors prefer one style over the other.

Lets start by setting a style to create print formatted paragraphs. This makes seeing the distinction in the scene breaks easier.

p {
    margin-bottom: 0;
    margin-top: 0;
    text-indent: 5%;
}

There are two ways to create hard scene breaks I’m going to cover but they are very similar. Using a hr tag with a width set to 25% will create a nice line between paragraphs. We also want to set the top and bottom margins to 2em to give some space around the line so it’s easily visible. Another method is, instead of an hr tag, we can put three *’s in a p tag. In this case we don’t touch the width; we set the text alignment to center. This gives the centered three dots many books use for scene breaks. I use a CSS class .hb for the * method.

hr {
    margin-top: 2em;
    margin-bottom: 2em;
    width: 25%;
}
 
.hb {
    margin-top: 2em;
    margin-bottom: 2em;
    text-align: center
}

As with hard scene breaks I’m going to cover two methods for soft scene breaks. The easiest way to create a soft scene break is to use three empty paragraphs.

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

Another method for soft scene breaks is to use a single empty paragraph or an existing paragraph and set the top margin to 3em. Following is an example CSS style. To have a scene break before a paragraph set it to use this style.

.sb {
    margin-top: 3em;
}

One consideration with scene breaks is converting to another format. Using the above scene break methods the scene breaks will convert from one format to another if you convert using calibre. It is difficult for a conversion tool to understand intent such as a blank paragraph representing a scene break. However, calibre understands and looks for scene breaks using the above method. So, if you plan to convert form EPUB to another format using calibre you shouldn’t have any problems if you create scene breaks using these methods.

The best way to illustrate this concept is with an example. Download ft-scene-breaks.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.

Tags: book, ebook, epub, formatting, FT, print, tips.

About Formatting Tips.

A common embellishment used in print books is to have the first letter of the first paragraph in a chapter appear much larger then the others. In addition to the letter being larger than the rest it also falls below the baseline. The rest of the paragraph will wrap around this first letter.

To achieve this we will use a little bit of CSS and a span tag. Surround the letter with a span tag and set it to use the class “bfl”.

<p><span class="bfl">L</span>orem...</p>

Add the following class to your CSS file linked by the document.

span.bfl {
    font-size: 450%;
    font-weight: bold;
    float: left;
    margin-top: -10px;
    margin-bottom: -15px;
}

The best way to illustrate this concept is with an example. Download ft-big-first-letter.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.

Tags: book, ebook, epub, formatting, FT, print, tips.

About Formatting Tips.

When creating an ebook using EPUB paragraphs default to looking like they do on a web page. Each paragraph is separated by a blank line and there is tab indent. It’s relatively easy to format your ebook to look like a printed book. The first paragraph of a chapter should not have an indent but all subsequent ones should. Also, there should be no blank space between paragraphs. Paragraphs are broken up visually using the indent.

All of the paragraph formatting can be achieved using CSS. The first thing we want to worry about is the indent.

p {
    text-indent: 15px;
}

The above css sets the text indent for all p tags to 15 pixels. The first line of every paragraph will have an indent with that property set.

Next we want to remove the spacing between the paragraphs. Add the following to the p style block:

    margin-top: 0px;
    margin-bottom: 0px;

Now we need to worry about the first paragraph in every chapter. What we need to do is create a class that is applied to p tags and set it to leave the indentation alone on these paragraphs. The CSS block will look like this.

p.ni {
    text-indent: 0px;
}

Any p tags in the XHTML with the “ni” class set will have the indentation removed. You will need to change the opening p tag of the first paragraph of each chapter to the following:

<p class="ni">

The best way to illustrate this concept is with an example. Download ft-print-style-paragraphs.epub. Opening the file with Sigil you will see the example chapters and the external CSS that is referenced by each XHTML file.

Tags: book, ebook, epub, formatting, FT, print, tips.