Articles

Using Styles When Formatting eBooks

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

My first comment to this is general & directed to everybody, & 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 underst& the "Tyranny of the Urgent", & 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 h&-authoring experience, & 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 h& 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> & <center> & other deprecated, not recommended, styling tags & 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 h&-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', & '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-h& page
'right': always force one or two page breaks so that the following content begins on a right-h& page
[On (typical) one page display systems, such as PDA's, 'left' & 'right' default to 'always', so go ahead & 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:

inline using the XHTML 1.1 deprecated 'style' attribute,
using the <style> tag in the header, or
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. & put the 'style' attribute & 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.), & adding structure actually aids in human comprehension as well as robust styling & 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., & 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>

& 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, & 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 (same syntax) but placed into a separate file.

Hope this is helpful.