Paul Salvette in Bangkok

April 6, 2012

Using CSS to Style Text for eBooks

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: CSS Selectors

Now that you have knowledge of how to use CSS selectors to apply presentation to specific HTML markup and content, you can make some basic typographical adjustments to your eBook to make it visually pleasing for your readers. Typography dates back to the Classical period when specialists would use punches and chisels to make distinctive inscriptions. Luckily, the digital age offers the ability to utilize typography without a lot of training and hard work.

Altering Text into Bold, Italics, Underlined, Strikethrough, and Small Caps

Utilizing bold, italics, underlined, and occasionally strikethrough and small caps text can convey meaning and emphasis for certain words. Certain content, like the titles of movies, is also recommended to be italicized per the Chicago Manual of Style. Don't come off as uneducated to your readers due to a misunderstanding of CSS, because you will get slammed in your reviews. The properties and values in CSS for this type of text are simply as follows:

Bold: font-weight: bold;
Italics: font-style: italic;
Underline: text-decoration: underline;
Strikethrough: text-decoration: line-through;
Small caps: font-variant: small-caps;

All that is required is applying these declarations using CSS selectors. Some example HTML of a passage in our book could be as follows:

<h2 class="mysmcaps">Chapter X</h2>
<p>This paragraph needs some <span class="i">emphasis</span>, as well as some <span class="b">strong emphasis</span>. Being modest is <span class="strk">best</span> the worst, because I can't <span class="u">underline</span> things.</p>

The corresponding CSS to select the HTML would be as follows

h2.mysmcaps {font-variant: small-caps;}
span.b {font-weight: bold;}
span.i {font-style: italic;}
span.u {text-decoration: underline;}
span.strk {text-decoration: line-through;}

Styling Some In-Line Text

This type of CSS presentation you typically want to apply to only a word or two within a paragraph. Therefore, it is usually most appropriate to use an in-line span element within your HTML markup to hook the CSS with a class attribute. However, you could easily style entire paragraphs or even the entire <body> element as bold, italics, underline, or strikethrough.

Tip: The class names in the CSS are completely arbitrary, but you should name them something that is logical and easy to remember so you can repeat throughout the HTML of your eBook.

Leading

Leading is a typography term that originates from when typesetters would jam strips of lead in between rows of type. It defines the spacing in between lines. For the Kindle, you probably do not need to adjust this value, since the default leading on the devices is designed for a good reading experience. However, this is good typographical knowledge to have in case of future changes to the platform.

Paragraphs with short leading have the lines of text very close together, and it is a lousy reading experience, especially for fiction. Therefore, be careful when adjusting the leading. The CSS declaration to modify the leading is simply line-height: value;, where the value is a relative percentage (100% being the value for "single-spaced" paragraphs). 120% leading tends to look nice for both fiction and non-fiction, but you should feel free to experiment. The Kindle Fire and e-ink Kindles have a default of 120% leading. You may be familiar with the term "double-spaced" text, which is a leading value of 200%. It is not recommended that you ever double-space text in an eBook, because it looks incredibly childish and silly.

Some sample HTML and CSS where leading of varying amounts is applied is as follows:

<p class="shortleading">This is a paragraph that has too little leading. It is terrible on the eyes and not recommended unless you hate your readers.</p>
<p class="goodleading">This is a paragraph that has a nice amount of leading. Notice how it is easy to read.</p>
<p class="bigleading">This paragraph has too much leading. Double-spaced paragraphs might be okay for manuscripts and book reports for your 7th-grade English teacher, but it looks extremely unprofessional.</p>

The CSS:

p.shortleading {line-height: 70%;}
p.goodleading {line-height: 120%;}
p.bigleading {line-height: 200%;}

Examples of Paragraphs with Various Leading in Chrome

Leading adjustment with the line-height property does not affect e-ink Kindles or Kindle for iOS apps. On the Kindle Fire, you cannot have leading less than 120%. If you do specify a leading of 70%, as an example, the presentation would simply remain at the default of 120%.

Introducing em

Em is another typographical term that defines the height of the letter "M" block when the printing press was the hottest new invention since the Magna Carta. Why should you care? Frequently, web developers and eBook developers use measurements (e.g. pixels or "px") to define font sizes, indents, and the spacing of margins. In the digital age, the "em" unit has evolved into what is called a relative measurement, which means that the font-size, margin, indent, and other presentation properties will scale based on the reader's pre-defined font settings rather than a specific value assigned by the designer. That's great news for readers, because it allows them to read an eBook with their own preferences. Don't ever mess with a reader's experience.

The Kindle and Kindle Fire default font size is 16px. Therefore, using a font-size of 2em is equivalent to 32px (or 200%) as an example. Instead of trying to remember this when you use your stylesheet to adjust the sizes of fonts, you can simply use a value of 1.0em. When a reader changes their font setting to bigger or smaller on the Kindle, it will render the text appropriately regardless of whether the text is specified in an absolute and relative measurement. However, many web browsers and eBook reading devices render the font-size to the absolute measurement regardless of the user's preference. You should endeavor to use relative measurements as a best practice, so that your eBook will be reader-friendly across all devices.

Adjusting Font-Size

Now that you understand the importance of using the relative measurement "em", you can begin altering the size of your text. You probably want headings to be greater than 1em, content text to be 1em, and footnotes and endnotes to be a bit smaller font size than everything else. As an eBook designer, this task may seem trite and not particularly challenging. However, neglecting small details can create an unpleasant reading experience for your reader. One of the most common errors in eBooks is poorly sized text (such as the chapter heading being smaller than the content in the chapter).

To change the size of the text, you simply use the CSS property font-size: value;, where value is in a unit of ems. An example of the HTML would be as follows:

<h2 class="chapheading">Chapter 355</h2>
<p class="content">This is normal content typically seen on the Kindle. It has a 16px font at default settings1. It's important that you pay attention to text size throughout your eBook. CSS makes short work of this task.</p>
<h3 class="appendixheading">Footnotes</h3>
<p class="footnote">1May be adjusted by reader</p>

And the CSS:

h2.chapheading {font-size: 1.5em;}
h3.appendixheading {font-size: 1.25em;}
p.content {font-size: 1.0em;}
p.footnote {font-size: 0.8em;}

eBook of Varying Font Sizes

While the sizes are appropriate, one thing that looks unseemly in this example is the footnote number. Footnotes are typically in superscript at a font-size of about 60% (or 0.6em). To superscript the number, you simply use a span element to wrap around it, and use the declaration vertical-align: super;. You can also use this property to declare any other text that should be superscripted.

Some example HTML and CSS would be as follows:

<p class="content">This is normal content typically seen on the Kindle. It has a 16px font at default settings <span class="footnoteindex">1</span>. That is my 1<span class="footnoteindex">st</span> footnote.</p>

The CSS:

p.content {font-size: 1.0em;}
span.footnoteindex {font-size: 0.6em; vertical-align: super;}

Font Sizes with Superscript Support

Important Note: Keep in mind when designing eBooks for the older e-ink Kindles that they often render slightly different em values at the same exact size (e.g. 1.0em and 0.9em font-sizes both appear as 1.0em). The Kindle Fire does not have this bug. Trial and error using the Kindle Previewer is essential in ensuring the text is correctly sized on the e-ink Kindles.

Bug on e-ink Kindles with Font Sizing

Tracking

Tracking is another typographical term defining a fixed space between letters. While leading is spacing on the vertical axis for a paragraph of text, tracking is spacing on the horizontal axis. The CSS property for tracking is letter-spacing: value;, where value is a relative em value. The default percentage is 0em, so a negative value would bring letters closer together, while a positive value would push them further apart.

Some sample HTML and CSS where tracking of varying amounts is applied is as follows:

<p class="smalltracking">This is a paragraph with some squished tracking.</p>
<p class="widetracking">This is a paragraph with some wide tracking you could drive a truck through.</p>
<p>This is a paragraph with default tracking, which is generally fine.</p>

The CSS:

p.smalltracking {letter-spacing: -0.1em;}
p.widetracking {letter-spacing: 0.1em;}
p {letter-spacing: 0em;}

Varying Levels of Tracking

While you are unlikely to have to adjust the tracking on a regular basis, it may be useful for specialized eBooks such as poetry collections or excerpting content from a newspaper to give that "old-timey" look.

Changing Colors

Using different colors was pretty much an exercise in futility a few years back, when virtually all eBook reading devices were grayscale. However, with the introduction of the Kindle Fire and the popularity of the iPad (which has the Kindle iOS app), it is now worthwhile to jazz up your eBook by adding some colors to your text. This statement should come with a word of caution. Back in the mid-1990s when the internet primarily consisted of Captain Kirk fanfic, colors were used and abused on websites to create content with seriously tacky presentation (blinking text anyone?). The big publishing houses have kept things simple by designing their eBooks with all-black text. However, don't be afraid to think outside of the box. Adding color to your text may be useful if you are working on designing something like an electronic textbook.

To add color to your CSS, you use the color: value; declaration. The value can either be one of the 143 predefined color names (e.g. navy, pink, black) or a # sign preceding a six-character hexadecimal code, which allows for over 16 million different colors (e.g. #000000 for white). These values can be easily generated on a number of sites online or using open source software.

Some sample HTML and CSS with different colors is as follows:

<p class="content">This is the final sentence in your textbook.</p>
<h2 class="redheading">Exercises for Your Teams</h2>
<ol>
<li>The <span id="blueteam">Blue team</span> should focus on…</li>
<li>The <span id="purpleteam">Purple team</span> should focus on…</li>
</ol>

The CSS:

p.content {color: black;}
h2.redheading {color: red;}
span#blueteam {color: #237DE4;}
span#purpleteam {color: #9123E4;}

Experimenting with Text of Different Colors

Next Post: Understanding the CSS Box Model

March 26, 2012

CSS Selector Tutorial for eBooks

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Introduction to CSS

Cascading Style Sheets allow the eBook designer to assign presentational rules to content within an HTML file. It is possible to assign rules that make the entire text of the eBook bold, italicized, or a different color, but this isn't very useful. You are probably interested in defining presentation that affects only certain paragraphs or words within your eBook. CSS assigns specific declarations based on a system of selectors that explicitly limits the presentation to certain elements within your HTML.

CSS Selectors come in three basic flavors:

Selection of types of HTML elements
Selection of HTML that has been assigned a class with the class attribute
Selection of HTML that has been assigned a unique identifier with the id attribute

The CSS syntax can be broken down into two parts: the selector(s) and the declaration(s). Furthermore, each declaration is divided into a property, which defines what type of presentation the CSS will be altering, and a value, which defines how that type of presentation will behave. As an example, say we wanted to change any content within <p class="myclass"></p> to be bold and blue. The CSS would appear as follows:

Basic CSS Syntax

Important Note: Declarations always have a semi-colon (;) at the end of them. The curly braces ({ and }) enclose one or more declarations immediately following a selector. You can have all of your CSS declarations on one line, but placing them on multiple lines makes the CSS more human-readable.

The dot (.) separates the p and the myclass to form a selector statement looking for any paragraph element in your HTML with the myclass attribute. The HTML markup and content that the CSS would apply presentation to is as follows:

<p class="myclass">I'm a blue and bold paragraph</p>
<p class="myclass">I'm another blue and bold paragraph</p>
<p>I'm just a regular paragraph</p>

Example of CSS Selectors Being Rendered in the Kindle Fire

Using classes as your method of selecting HTML is useful, because these classes can be repeated more than once throughout multiple HTML files. Making changes to the presentation of all of the elements with a class attribute requires you to only alter the CSS in one place (i.e. the stylesheet).

In some circumstances, you may want to alter the presentation of just one element. In this case you would use a unique identifier with an id attribute. Please recall that every identifier must have a unique value within any given HTML file to avoid errors. The CSS selector syntax for unique identifiers uses a # symbol. An example of the CSS to make a unique paragraph italicized is as follows:

p.myclass
{
font-weight: bold;
color: blue;
}
p#unique
{
font-style: italic;
}

The corresponding HTML is as follows:

<p class="myclass">I'm a blue and bold paragraph</p>
<p class="myclass">I'm another blue and bold paragraph</p>
<p>I'm just a regular paragraph</p>
<p id="unique">I'm a very special paragraph. There's only one of me.</p>

Example of CSS Selectors Being Rendered in the Kindle Fire

Important Note: For the CSS selector syntax for classes (.) and for unique identifiers (#), make sure there are no spaces between the element selector and the name of the class or identifier.

Until now CSS selectors have only been applied to paragraph elements. However, CSS can be applied to any valid HTML markup. It is also possible to select the elements that are nested within another element. For example, you have the following HTML markup and content:

<div class="someboldstuff">
<p>I'm a child of the "someboldstuff" div</p>
<p>I'm the second child, but I'm not ignored by my div parent</p>
<p>I'm the last and cutest child</p>
</div>
<p>I have no parent so to speak</p>

There are three paragraph elements nested with the div element. The paragraph elements are known as the children and the div element is the parent. To select the paragraph elements that are children of the div element with the class attribute of someboldstuff, the CSS would be as follows:

div.someboldstuff p
{font-weight: bold;}

CSS Selecting Descendants

Important Note: Ensure there is a space between the div and p selectors to instruct the CSS that it should select the children.

CSS and HTML are useful for eBooks when you have sections that include multiple paragraphs of passages that need to be indented differently, lengthy citations from another source, and other blocks of text that need to be styled differently from the regular eBook content.

If you wanted to apply a CSS declaration to more than one selector, that is possible by using a comma (,) between two or more selectors. An example of the HTML is as follows:

<div class="someboldstuff">
<p>I'm a child of the "someboldstuff" div</p>
<p>I'm the second child, but I'm not ignored by my div parent</p>
<p>I'm the last and cutest child</p>
</div>
<p>I have one bold <span class="someboldstuff">word</span> in my paragraph.</p>

The CSS:

div.someboldstuff p, span.someboldstuff
{font-weight: bold;}

You need to exercise some caution when utilizing the CSS selector system. Occasionally you will run into problems when declarations are in conflict with one another for elements that are selected in multiple parts of the CSS file. As an example, say you had the following HTML:

<p>I'm just a regular paragraph. The CSS made us bold</p>
<div class="different">
<p>I'm a different paragraph where the CSS made us normal.</p>
<p class="verydifferent">I'm blue.</p>
<p class="verydifferent" id="unique">I'm a very unique case, even though a bunch of other selectors are grabbing me.</p>
</div>

And the CSS:

p
{font-weight: bold; color: black;}
div.different p
{font-weight: normal;}
p.verydifferent
{color: blue;}
#unique
{font-weight: normal; color: red;}

CSS Specificity in Action

This is rather complex, so let's try to get our arms around it. You may think that all paragraphs should be bold because of the first line in the CSS. However, when CSS encounters declarations that are in conflict with each other, there is a specificity hierarchy whereby the CSS presentation will be applied from the selector most specific. This can be confusing, but the specificity hierarchy is basically as follows:

Selectors that select with the id attribute (most specific)
Selectors that select with the class attribute
Selectors that select by general elements (least specific)

Therefore the font-weight: normal; declaration in the id selector takes precedence over the font-weight: bold; declaration for all paragraph elements. As in all areas of eBook development, trial and error with careful attention to detail is the best method to isolate and correct any anomalies in your CSS presentation.

Next Post: Using CSS to Style Text in eBooks

March 16, 2012

Introduction to CSS for the Kindle Fire and Applying a Stylesheet

Introduction to CSS for the Kindle Fire

Up until now in the guide, you have learned about using HTML markup to add content into your eBook. While nothing is more important than the actual written word, fixing it up with typographical best practices is a way to show your readers that your eBook is professional. Cascading Style Sheets (or CSS) is a way to add presentation to your eBook's content. This is accomplished by applying different rules, which are called declarations, to elements within your HTML that alter how the marked-up content appears to the reader.

As an example, here is an image of three different paragraphs that each has its own presentation or style:

Three Paragraphs Styled Differently

You will notice that the first paragraph is indented on the first line, the second has a different font, and the third is fully justified (aligned on both sides) rather than left-justified (aligned on the left side only). While the differences may be somewhat trivial, utilizing different styles can aid the reader in focusing their attention on certain portions of content and giving your eBook a professional look.

During the early years of web development, it became a fundamental axiom to separate content (HTML) and presentation (CSS) from each other. This is because many elements of content on a given website have the exact same type of styling, and it is much easier to change the code in a single CSS file than alter every single element of the HTML.

As an eBook designer, it is even more important to separate presentation and content. What if you had dozens of paragraphs indented the same way in a lengthy novel, and you wanted to make a small modification to each of those indents? If your presentation was coded into the HTML, you would have to go through each paragraph tag and make the necessary changes. If you're like the author, you would probably make one or two mistakes along the way resulting in some goofy indents on those paragraphs. For CSS you only have to make one change to alter the indents on all of these paragraphs. Do yourself a favor and save a vast amount of time by learning CSS.

In regards to the Kindle format, CSS can be used to apply styles specifically for the older e-ink Kindles or the Kindle Fire without changing the HTML. This is handy, because the Kindle Fire can support more advanced CSS (such as floating images and drop caps) that would create problems on the older Kindles. You can even completely hide content on the e-ink Kindles that would appear on the Kindle Fire, and vice versa. The new CSS3 specification is powerful and supports a variety of complex features such as box shadows, rounded corners, and even animation. It is recommended that you learn the easier ways to style CSS (such as changing the font size) and then work your way onto the complexities.

Applying a Stylesheet

There are three basic ways to apply CSS presentation to your HTML, and only one is recommended--using an external stylesheet with a .css file extension. However, you should be aware of the other two methods.
As an example, we would like to apply the following CSS, which makes any content in a <p> element be left-justified:

p {text-align: left;}

The first approach is to include it within the head portion of the HTML. The CSS will be enclosed within the <style> element as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Your Title Here</title>
<style type="text/css">
p {text-align: left;}
</style>
</head>
<body>
<p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>
<p>My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>
</body>
</html>

The second approach, and the one that is not recommended at all, is to add the CSS style directly into the HTML as an attribute. This is accomplished by using style="some css" within the tag of an HTML element (be sure not to use the curly braces). To style the two paragraphs, the HTML would look as follows:

<p style="text-align: left;">My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>
<p style="text-align: left;">My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>

This method is not recommended, since the major benefit of utilizing CSS is to not have to rewrite dozens of lines of code. Using the style attribute requires you to make changes within every HTML element you want to change.

The final approach and the one recommended by this guide is using an external stylesheet. Simply create a new file in your text editor called anyname.css. The content of the CSS file would simply be one line of text in this case:

CSS File Example with Color-Coded Syntax

If you are using a good text editor like Notepad++, the syntax formatting and coloring will appear different than the HTML file. This is extremely useful for troubleshooting.

To reference the CSS file for a particular HTML file, you simply add a link element into the head section of the HTML. An example is as follows:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Your Title Here</title>
<link type="text/css" rel="stylesheet" href="mystylesheet.css" />
</head>
<body>
<p>My first paragraph that is aligned to the left. Hopefully my CSS will work.</p>
<p>My second paragraph that is left-justified. There is some debate over whether left-justified or fully-justified text is better in eBooks. It's hard to say. To each their own.</p>
</body>
</html>

This method of using an external stylesheet is recommended, because you can use the same stylesheet for numerous HTML files and the syntax is color-coded differently for advanced text editors.

Tip: You can keep the CSS file in a different directory and reference it in the link element using a relative path to the HTML file. This is considered a good practice. For example linking to a directory called cssfiles that is in the same directory as the HTML file would have the href="cssfiles/mystylesheet.css" attribute. Linking to the CSS file in the parent directory of the HTML file would have the href="../mystylesheet.css" attribute.

Next Post: Selectors and Declarations

February 23, 2012

Adding Hyperlinks to Your Kindle Fire eBook

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Lists

Everyone likes functionality in their eBooks and being able to visit other sites on the web with the tap of a finger. By adding an element of interactivity, hyperlinks give eBooks a serious edge over their dead tree cousins. A hyperlink consists of two parts: the hyperlinked content that is clicked to access the hyperlink and the target. For example, by clicking this hyperlinked content, you will go to the author's blog at http://paulsalvette.com. Hyperlinks can also redirect the reader to sections inside the actual eBook—a necessity for building a proper Table of Contents.

External Hyperlinks

For hyperlinks outside of the eBook, you can designate targets as either websites (http://website.com) or email addresses (mailto:name@domain.com). Be sure to add the http:// or mailto: before your hyperlinks, or else your HTML markup will fail EPUB validation. The HTML markup to add a hyperlink is an in-line element with the following syntax: <a href="http://website.com">hyperlinked text</a>.

Getting back to the elf story, suppose you want to hyperlink the phrase “Joe Selfpubber” with an email address that opens the eReading device's email application and "Drop him a line" with a hyperlink that goes to the author's website. The HTML markup would be as follows:

<p><a href="mailto:joeselfpubber@gmail.com">Joe Selfpubber</a> is trying to make it big by selling his eBooks on the Kindle Fire so that he can quit his lousy day job. <a href="http://joeselfpubber.com">Drop him a line sometime</a>.</p>

Adding Hyperlinks with HTML

By default, most web browsers and eReading devices will render hyperlinked text blue and underlined. You can alter this presentation using CSS. By clicking on “Drop him a line sometime”, you will be taken to http:// joeselfpubber.com, and by clicking “Joe Selfpubber”, it will pull up the eReading device's or computer's email client with “joeselfpubber@gmail.com” in the TO: block.

Tip: Hyperlinks offer the opportunity to link to content outside of the eBook that may be of interest to your readers, as well as a chance to content market your own goods and services. Do not pass up the occasion to utilize hyperlinks extensively.

Important Note: Some websites use ampersands within the URLs for certain links. In order for your markup to be valid, you need to convert the ampersands into HTML entities (i.e. &) or use percent encoding (i.e. & should be changed to %26).

Internal Hyperlinks

Internal hyperlinks target specific content within the eBook itself, permitting the reader to jump from section to section. To define where the hyperlink should target, you must establish anchors within your eBook. This is accomplished using the id="anchorname" attribute, which can be placed inside almost any HTML tag (e.g. <p>, <div>, <span>, <a>, etc.). The id attribute is also important in styling your content with CSS.

Establishing the hyperlink to target the anchor is done in a similar fashion as hyperlinking to external content. The anchorname defined in the id attribute gets targeted by using the # key. For example, <a href="myebook.html#anchorname">hyperlinked text</a> would target the content with the id="anchorname" attribute inside the myebook.html file. You should use a relative path for the .html file.

Here is an example of adding anchors and internal hyperlinks to your HTML markup in a file called myebook.html:

<p id="section1">This is the 1st paragraph.</p>
<p>By clicking on this <a href="myebook.html#section1">link</a>, you'll go back to the 1st paragraph.</p>

By clicking on the hyperlinked text, the web browser or eReading device will go back to the first paragraph. You will notice that the value of the id attribute is completely transparent to the reader.

Internal Hyperlink Example in Google Chrome

Important Note: The value of the id attribute must be labeled uniquely throughout the HTML document. Also, it must not start with a number or special character (e.g. 1anchorname, $anchorname, etc.)

Internal Hyperlink Bug in Kindle

There is a bug in the way the KF8/MOBI format is compiled that provides such a poor reading experience a section must be devoted to its awareness. Technically, you can specify an anchor with in-line HTML markup like <a id="anchor1" /> or <span id="anchor1">some text</span>. However, when the reader clicks on a hyperlink to this anchor in the older e-ink Kindles or the Kindle apps, it will completely mangle the formatting of the target text that is designed using CSS. Sadly, this problem was not corrected by Amazon in their most recent release of the KindleGen software.

This is problematic because you often want your internal hyperlinks to target specific chapter headings. For example, the design of this sample novella has CSS to style it, and there is an in-line HTML anchor within the HTML markup for the heading:

<p class="chapheading"><a id="chap3" />Chapter 3<br />Las Vegas</p>

If a hyperlink to #chap3 is clicked on within any Kindle device, except the Kindle Fire, the following bug occurs where the formatting is completely blown out:

Bug with Internal Hyperlinks Example on the Kindle for iPhone

To avoid this only use the id attribute within block elements. To be safe you can wrap <div>…</div> tags around the entire heading and insert the id attribute to define the anchor. The HTML markup for this particular case would look as follows:

<div id="chap3"><p class="chapheading">Chapter 3<br />Las Vegas</p></div>

This method of including the id attribute in a separate <div> element will avoid the Kindle bug.

Tip: In addition to defining anchors within the <div> element, be sure to label your anchors in a logical fashion to help yourself in the design process and workflow.

Next Post: Basic CSS

Pages

April 6, 2012

Using CSS to Style Text for eBooks

Altering Text into Bold, Italics, Underlined, Strikethrough, and Small Caps

Leading

Introducing em

Adjusting Font-Size

Tracking

Changing Colors

March 26, 2012

CSS Selector Tutorial for eBooks

March 16, 2012

Introduction to CSS for the Kindle Fire and Applying a Stylesheet

Introduction to CSS for the Kindle Fire

Applying a Stylesheet

February 23, 2012

Adding Hyperlinks to Your Kindle Fire eBook

External Hyperlinks

Internal Hyperlinks

Internal Hyperlink Bug in Kindle