New Aladore Markup

With the user testing and guidelines in mind, the next step is to dive into the XHTML text.  To allow for beautiful and meaningful CSS styling, I need to create more detailed markup than the simple <p> and <h2> of the draft Aladore EPUB. First, I thought carefully about what elements will need to be targeted by the CSS and how the markup relates to semantic structure of the text.  Then I added appropriate attributes, such as classes or ids, to existing elements and added a few new ones.  Here are the details:

  • Sections of the text: Rather than endless div tags, EPUB3 encourages the use of standardized HTML5 semantic inflection with special epub:type attributes. This enables better access for assistive technology, as well as more reusable and meaningful markup. For example, IDPF suggests marking the main units of the content with section tags and EPUB 3 Structural Semantics Vocabulary. The text of a single chapter would be inclosed in the element <section epub:type=”chapter”>. Unfortunately, this can not be used in a valid EPUB2, which doesn’t include the section tag or epub:type declaration. Thus, Sigil will “fix” these tags if added, since it currently uses EPUB Flight Check and Tiddy at every save (EPUB3 support is planned in future releases). I decided to add div tags as place holders for the sections, so that they could be easily updated for EPUB3 later, for example <div class=”chapter”> or <div class=”epigraph”>.
  • Chapter headings: each chapter has a chapter number and a descriptive title. In the print edition they are styled differently. However, I wanted them to be in the same h2 tag, because the headings are used to generate table of contents in EPUB. If they are in separate tags, there will be double listings for everything. I decided to put the chapter number in a span tag and the break in the middle. For example, <h2 class=”chapterHeading”><span class=”chapterNumber”> CHAPTER I.</span><br />OF THE HALL OF SULNEY AND HOW SIR YWAIN LEFT IT.</h2>.

first page of chapter 1

  • Paragraphs: the first paragraph of each chapter is not indented, so I identified it with <p class=”firstParagraph>. Similarly, the first word of the chapter is in small capitals, which the OCR captured as all caps. It would be nice to put a span around the first letter and first word, however, most of the reader fonts do not actually have small caps. Another option is to use a CSS pseudo class, however, there is little support.
Note first paragraph with no indent versus the second paragraph with small indent.

Note first paragraph with no indent versus the second paragraph with small indent.

  • Poetry: there is three sections of poetry in the text, an epigraph and two songs. Other ebooks often use blockquotes or pre tags. Blockquotes give little control and the pre tags can lead to all kinds of unexpected results. I decided to create a stanza <div class=”stanza”>, plus three poetry line p classes to style these features.
  • Illustrations: the print editions of Aladore have fifteen illustrations inserted into the text on separate unnumbered pages. The draft epub had only the file name as the alt text. I decided to replace this with the image’s title as given in the print book’s list of illustrations. I also added an id so that the images could be targeted to create a list of illustrations for the ebook. I decided to enclose them in a <div class=”illustration”> to add styles since sometimes this helps with the variable devices. For example, check out what Liz Castro says about “Resizing images in EPUB.” At this point I also added a new cover image, taken from the 1915 print edition for simplicity.
  • File size: one way to optimize rendering time on less powerful devices is to break up the file size. Rather than have one or two large files, I broke the XHTML into units following the semantic structure of the text. The title page, epigraph, and each chapter are separate files.
  • File names: I noticed that in most of the ebooks I inspected, file names were unidentifiable. Adding meaningful names is an easy way to give future users more information about the contents.  Thus, I renamed each XHTML file, for example: cover.xhtml, title_page.xhtml, epigraph.xhtml, chapter01.xhtml, etc.
  • Table of Contents: After the markup and files are in place, Sigil can automatically generate a TOC for the epub. This creates a specialized file toc.ncx that older reading devices rely on to provide navigation (EPUB3 drops this feature, and replaces it with a HMTL based navigation file, nav.xhtml). However, it is best practice to add a clickable TOC to the beginning of the book for accessibility. The original print edition had a full TOC and list of illustrations, so I decided to add these features to the beginning of the ebook, after the title page.

One comment

  1. Pingback: Take a Peek at the Markup! | Digital Aladore

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s