Take a Peek at the Markup!

A few posts ago I outlined the improvements to the underlying markup of the text, moving us beyond the draft ebook.  Lets take a concrete look at what this means.

Here is what Chapter 3 of the draft Aladore EPUB looked like:

<h2 id="sigil_toc_id_3" style="text-align: center;">CHAPTER III.<br />
HOW IT FORTUNED TO YWAIN TO FIND A STAFF IN THE PLACE OF HIS SWORD.</h2>

<p>THEN Ywain turned his face towards the village, and went down the hill: and he went with a good heart, for though the boy had left him, yet he hoped not to be long without him, and even now when he looked straight forward it seemed that he had the joy of his company and his laughter. But when he turned and looked beside him, there was but his own shadow; black it lay and long, and about the edges of it a brightness was shining. Then he remembered that the sun was low and night rising among the hollows, and he bethought him of his supper and sleep.</p>

<p>So he went quickly to the village, and passed through it and came to the farmer's house that lay beside the great wood: and the farmwife gave him welcome, as one that knew not who he was, but could well pitch her guess within a mile or so. And she whispered to her husband, but he was hard of hearing and full of slumber from the fields. So when Ywain had supped, they showed him where he should lie. And when he was come there he laid him down, and the day went from him in a moment and he knew no more whether he were alive or dead.</p>

The new version of the markup looks like this:

<div class="chapter">
<h2 class="chapterHeading"><span class="chapterNumber">CHAPTER III.</span><br />HOW IT FORTUNED TO YWAIN TO FIND A STAFF IN THE PLACE OF HIS SWORD.</h2>

<p class="firstParagraph">THEN Ywain turned his face towards the village, and went down the hill: and he went with a good heart, for though the boy had left him, yet he hoped not to be long without him, and even now when he looked straight forward it seemed that he had the joy of his company and his laughter. But when he turned and looked beside him, there was but his own shadow; black it lay and long, and about the edges of it a brightness was shining. Then he remembered that the sun was low and night rising among the hollows, and he bethought him of his supper and sleep.</p>

<p>So he went quickly to the village, and passed through it and came to the farmer's house that lay beside the great wood: and the farmwife gave him welcome, as one that knew not who he was, but could well pitch her guess within a mile or so. And she whispered to her husband, but he was hard of hearing and full of slumber from the fields. So when Ywain had supped, they showed him where he should lie. And when he was come there he laid him down, and the day went from him in a moment and he knew no more whether he were alive or dead.</p>

Note the div class chapter, chapter heading class, chapter number span, and first paragraph class.  Here is the new CSS relevant to this selection:

body {
font-family: Georgia, serif;
margin-left: 1.1em;
margin-right: 1.1em;
}

h2.chapterHeading {
font-family: Georgia, serif;
font-size: 1.15em;
line-height: 1.6;
text-align: center;
margin-top: 5em;
margin-left: 3em;
margin-right: 3em;
}

span.chapterNumber {
font-size: 1.35em;
letter-spacing: 0.1em;
line-height: 2.5;
}

p {
text-indent: 1.2em;
line-height: 1.5;
margin-top: 0em;
margin-bottom: 0em;
}

p.firstParagraph {
text-indent: 0;
margin-top: 0.5em;
}

Which should get us to something that looks like this:

Chapter 3 rendered by the Readium app.

Chapter 3 rendered by the Readium app.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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