21 | Revisions And More Styling

In this section, we revise and style front and back matter pages.

File Version

Because the cover art section was optional, we need to tie off addtoc_projectx.epub at this point and start a new working version.

• 1. Plain-old Save addtoc_projectx.epub.

  2. Use SaveAs to create revise_projectx.epub.

Throughout this section, work only in revise_projectx.epub.

"Safe" Space After Paragraphs

To safely add space after paragraphs, here is the only recommended method:

This section describes the recommended way to create a blank space after a paragraph of text. Here, we use an inline style declaration to add a blank/buffer "padding" space after a paragraph.

"Inline" means the attribute has been applied directly to the paragraph itself, using the individual paragraph's tag. In this way, the attribute affects only the paragraph to which it is applied.

We'll use these screen-caps from Sigil to illustrate how this is done. To spot the difference, note the change to the first paragraph tag.

First, here's the unaltered code. The code (shown in Sigil) looks like this:

And renders like this:

This altered paragraph tag (look at line 12) looks like this:

And renders like this:

DISCLOSURE: In the Binary Bindery's CSS files, all blank/buffer lines and scene-break characters are handled with custom paragraph classes. I did not include these in the tutorial's CSS. Users can feel free to experiment with that themselves. Homework!

Most authors want to add spaces frequently in front and back matter. This is fine... in front and back-matter. IT IS NOT FINE TO DO THIS IN THE STORY BLOCK UNLESS SCENE BREAK CHARACTERS ARE ALSO USED!

Have I said this enough yet?

Anyway, anywhere you want to add that buffer space, go ahead and use the style="padding-bottom: 1em;" inline declaration. It's the safest, most reliable method.

And yes, the style declaration may be used in conjunction with a class selector, but remember these things:

• • Do not forget to add both double-quotation marks around the declarations.

  • Do not forget the semi-colon after the value, or your inline style won't stick.

  • If adding multiple declarations (more than just padding-bottom, for instance), check your notation carefully. Colons and semi-colons are not interchangeable. Each declaration should end in a semi-colon. Only one set of double quotation marks should be used to surround the entire block of declarations.

Revise Title Page

The title page requires some tweaking to apply styles. Before making any changes, double-click into the title page’s HTML file (in Book Browser) and switch to Book View. Note how things look before the changes are made.

Heads Up: The first change has nothing to do with styles. It has to do with tricking Sigil's glorious table-of-contents tools into doing our bidding.

The necessary changes are shown in an image below. If you’re unsure how something should look, scroll down a bit and have a look.

• 1. Remove the word “Title” and replace with   (HTML name for non-breaking space.)

  2. Change the project-title’s paragraph class to <p class=“title”>

  3. Yes, Sigil changes the code color for you because Sigil is made of pure liquid awesome.

  4. Change the author-name paragraph class to <p class=“author”>

  5. If user's title page also contains a subtitle or series name, read on. This is covered below.

After those changes are made, the same code section should look similar to this:

Click into the Book View and note the following changes:

• • “Title” no longer appears at the top of the page. For more information on the dirty pool we just played, read this supplemental section.

  • The project title itself is much bigger and centered.

  • The author-name line appearance changed, too.

ALTERNATE CODING METHOD

For those of you using the inline style attribute instead of the breaking-paragraph method to add space between elements, here's an example of the inline code:

Subtitle or Series?

For users who have either a subtitle or series line on the title page:

Change the class to <p class=“subtitle”>

Example before changing the class:

Example after making changes:

Subtitle-styled lines turn out centered and italicized, like so:

Beware

During beta, users struggled with some of these steps, finding the subtitle paragraph class liked to apply itself to spacer lines. To fix this issue, simply remove the paragraph class from the spacer line so that it looks like:

<p><br /></p>.

not <p class="subtitle"><br /></p>

(This happened, too, when users added spacer lines above and below block-quote paragraphs. Again, simply remove the paragraph class manually.)

Revise The License Page

Be sure to check the Book View before altering this page. Text appearance changes pretty drastically.

This page requires these changes:

• 1. Replace “License” with &nbsp;

  2. Change each text paragraph’s class to <p class=“copy”> (copy is short for copyright, in case anyone was wondering why that class should have such a weird name; I've just been using that as a license-page style class since forever. Old habits, and all that.)

  3. Almost every beta user added spacer lines between their license page content. By all means, do so, but remember there’s no guarantee those blank lines will render on each and every e-reader-device and app.

BEFORE:

AFTER:

Revise the Dedication Page

Traditionally, the text of this page is centered and italicized. This is, of course, up to the user, but if you’re using the Scandal file, a change needs to be made.

The text paragraph needs its class changed to <p class=“center”>

Italics are controlled by the in-line italics tags. <i></i>

BEFORE:

AFTER:

Some people like to remove the word “Dedication” from this page. If so, replace the word Dedication with &nbsp;

Revise Acknowledgements?

Here, no paragraph-class changes are required. If, however, the user would like to omit the word “Acknowledgements”, replace that word with &nbsp;

Beta-users suggest changing paragraph class on this page to <p class=“flush”>. That’s fine. If you do, spacer lines between paragraphs are also recommended.

“Flush” removes the indent, so the paragraph will render “flush” to the margin.

Chapter-Start Styles

If this type of thing wasn't already handled at the splitting stage, now is the time.

• • Apply subheader class to chapter subheaders. <p class="subheader>, same way we did <p class="center"> in the scene break examples.

  • Apply flush class to the first line of each chapter <p class="flush">, same way we did <p class="center"> in the scene break examples.

  • Apply "safe" class to everything with an h1 label, like chapter/part headers.

• Insert custom chapter-number graphics or other foofaraw, if applicable.

Sub-chapters, Time/Location Stamps

This part gives us an option for sub-chapter headers, time and location stamps.

In traditional print books, this special-text type is typically flush with the margin, italicized in small-caps font, something like this:

Small-caps being grotesquely problematic in CSS, these can be mimicked using the "copy" paragraph class, like so:

• • "copy" class reduces the text size to .8 of the user's normal font size.

  • Italics are applied with in-line italics tags.

  • Timestamp text shown here is typed in all caps. 'small-cap' font is notoriously unreliable, so it's way safer to mimic it instead.

Optional Style Changes

This section has been moved to its own supplemental page. First-time users might want to give these changes a miss.

Previous << Cover Art | Next >> Custom Start Page