Using Styles When Formatting eBooks

When is it the right time to make use of styles?

Editor's note: The piece below by Jon Noring -- written in response to recent United PDA EBook Users Group postings on how to insert page breaks into an OEBPS -- examines different ways you can add page breaks to your eBook and how, through the use of styles, you can maintain and update documents much more easily. It's just taking the step ...

By Jon Noring
January 25, 2002

My first comment to this is general and directed to everybody, and does not reflect anything personal. But this comment reminds me of something said to me many years ago: "If you do not have the time to do it right the first time, when are you ever going to have the time?" Another phrase that comes to mind is "Tyranny of the Urgent".

Unfortunately, independent eBook publishers have difficulty avoiding this situation, because they must wear so many hats, so I do understand the "Tyranny of the Urgent", and doing things expediently rather than doing them right.

Anyway...

I encourage you to download the various free Microsoft Reader "manuals" for LIT authoring -- the markup manual, for example, closely follows OEBPS. They are quite informative. The OEBPS specification is itself a little more daunting, especially for those who don't have any HTML/XHTML hand-authoring experience, and if one has no idea what XML is, even more daunting. (We in OEBPS have been seriously thinking about issuing a "Primer" to tutor document authors in using OEBPS to author high quality OEBPS publications.)

Nevertheless, if one is hand editing HTML, it is a given to me that they jump to XHTML as soon as possible (preferably XHTML 1.1, but if you've got to have your <font> and <center> and other deprecated, not recommended, styling tags and the like, conform your documents to at least XHTML 1.0 Transitional which supports those elements.) Once you know how to conform HTML to XHTML (which is actually quite easy -- anybody who has hand-coded whole HTML documents will say "this is super-easy, why was I apprehensive!"), then the jump to conforming your XHTML to OEBPS is miniscule.

Now, regarding your immediate need for a page break for LIT (based on OEBPS) you must use the CSS property 'page-break-before' ('page-break-after' is not yet supported in OEBPS 1.0.1 -- don't use it!). There are three values you can select for this property: 'always', 'left', and 'right', which mean:

  • 'always': always put a page break here -- it's assumed to be a simple page break.
  • 'left': always force one or two page breaks so that the following content begins on a left-hand page
  • 'right': always force one or two page breaks so that the following content begins on a right-hand page

[On (typical) one page display systems, such as PDA's, 'left' and 'right' default to 'always', so go ahead and use them where you think you'd like the added control over page-break page placement on two page eBook reading systems. May as well plan for the future!... "Doing it right the first time"...]

Now, there are three ways to apply this CSS page break instruction to your HTML document:

  1. inline using the XHTML 1.1 deprecated 'style' attribute,
  2. using the <style> tag in the header, or
  3. using an external CSS stylesheet

Since I assume you are not using external CSS stylesheets (which in the long run can be a time saver since you can reuse stylesheets for a large number of documents), then you must use either option 1 or 2:

Option 1 works as follows:

Find the element in your document before which you wish to have a forced page break, such as <p>, <h1>, etc., etc. and put the 'style' attribute and its value into it. Three specific examples:

<h1 style="page-break-before:right">Title -- Page Break Above</h1>

<p style="page-break-before:right">New paragraph, page break above.</p>

<div class="newchapter" style="page-break-before:right"> ... (your marked up content for this new chapter) </div>

[Using a generic block-level <div> with a class identifier is, imho, the best practice from a long-term reusability perspective, but that requires thinking structurally, something most HTML authors don't bother to do, unfortunately, since the HTML vocabulary lacks adequate pre-defined structural tags. Books are very structural animals, much more so than web pages (with volumes, books, parts, sections, subsections, chapters, front-matter, end-matter, etc., etc. etc.), and adding structure actually aids in human comprehension as well as robust styling and future conversion possibilities. But I digress...]

Option 2

Now for option 2, which is much preferred over option 1 (at least do this, it's almost as easy to implement as option 1)... do the following:

Find the element in your document before which you wish to have a hard page break, such as <p>, <h1>, etc., etc., and put the 'class' attribute with some sort of semantic identifier into it -- semantic essentially means "what is this?", such as for flagging a structural component. Same three examples:

<h1 class="newchapter">Title -- Page Break Above</h1>

<p class="pagebreak">New paragraph, page break above.</p>

<div class="newchapter"> ... (your marked up content for this new chapter) </div>

Then into the <head> of your HTML file add the following (I suggest putting it just before the closing </head>) -- using the <h1> example:

<head>
...
<style>
h1.newchapter {page-break-before:right}
</style>
</head>

Importantly note this means that ALL <h1 class="newchapter"> in your document (you can have one zillion of them) will be given a page-break-before:right when displayed. Note that any other <h1> in the document, either with no class identifier or with a different class identifier, will NOT be affected by this styling at all. The possibilities of this should now be apparent to all.

You can add as many lines into the <style> section as you wish. For example, if you use all three examples for page breaks in your document:

<head>
...
<style>
h1.newchapter {page-break-before:right}
p.pagebreak {page-break-before:right}
div.newchapter {page-break-before:right}
</style>
</head>

And even cooler, you can now fully restyle any element.class, the styling of which applies to all of them in the document, e.g.:

<head>
...
<style>
h1.newchapter {page-break-before: right;
text-align: center;
font-size: large;
font-weight: bold;}
</style>
</head>

This example *forces* every occurence of h1 with the class 'newchapter' to be given those styling attributes, overriding whatever defaults are in place for the same properties in the given reading system. (As an aside, you have a near infinity of class identifiers to choose from, so in essence you can add as many "custom" tags as you want! Build your own tagset! Big-time cool.)

(The beauty of this should now be apparent. Suppose you have one million <h1 class="newchapter"> in your document (that is one big document!) To restyle all of them, you need only "flip a couple switches" in the <style> section, and not have to individually re-edit all one million occurences of that element.class throughout the document.)

Option 3

Now, an external CSS stylesheet is simply everything as you would have between the <style>...</style> (same syntax) but placed into a separate file. You use the <link> element in the header in place of <style> to point to that file. So once you learn how to do option 2, the jump to external CSS is super-trivial, and you are on the road to full separation of style from content, which confers huge advantages to an eBook publishing work stream, especially when one has to handle hundreds or thousands of titles.

Hope this is helpful.

Jon Noring
Windspun
Blue Glass Publishing