12 | Applying Tags

In this section, paragraph, italics and bold HTML tags are added around projectx content.

Section Index

• Action: Show formatting characters

• Action: File Version

• Tag Basics

• Tag Find & Replaces

• Italic Tags

• Bold Tags

• Descrew Italics

• Descrew Bold

• Paragraph tags

• Add Paragraph Tags

• Stray Tags

• Remove Empty Paragraph Tags

• Remove Space Paragraphs

• Beware

ACTION: Show formatting (or non-printing) characters

Formatting (or non-printing) characters should be turned on for this part. If unsure how to make them display in your word processor, make with the Google.

ACTION: File Version

• 1. Plain-old Save hk_projectx.

  2. Use SaveAs to rename the file: tag_projectx

  3. Throughout this section, work only in tag_projectx.

Tag Basics

If you’re not familiar with HTML tags, this part could cause problems. This tutorial won’t teach you anything about tagging. For information on basic HTML principles, I highly recommend w3schools.com. It’s free, and it rocks.

What I will do is give two reminders:

• 1. Every ‘open’ tag needs a ‘close’ tag. For instance, for every <p> there must be a </p>.

  2. Italics and bold tags must open and close between paragraph markers, not across or outside of them.

YES

<p><i>Good example.</i></p>

<p><b>In-line formatting tags like italics and bold...</b></p>

<p><i>...open and close inside paragraph tags.</i></p>

NO

<i><p>Bad examples!</i></p>

<p><i>Make sure your in-line formatting tags open and close...</p></i>

<i><p>...inside your paragraph tags.</p></i>

Add Italic & Bold Tags

The following Find/Replaces tend to wig people out. Trust me. HTML tags look scary in the word-processor version, but this process produces lightweight, stable HTML that will not trigger a ton of known e-book file bugs.

Each of the following Find/Replaces must be performed, in this order, to set the stage for HTML.

Find/Replace: Italic Tags

• 1. Find: (Apply italics to the find field by clicking Ctrl+I or Cmd+I or using the Format pulldown menu: click Font, and click italic in the center top-row window.)

  2. Replace:<i>^&</i>

  3. Click Replace All.

Find/Replace: Bold Tags

• 1. Find: (Apply bold to the find field by clicking Ctrl+b or Cmd+b or using the Format pulldown menu, click Font, and click bold in thecenter top-row window.)

  2. Replace:<b>^&</b>

  3. Click Replace All.

De-screw

The following two steps have been added to solve a common problem that's really hard to prevent in word processors.

Here’s an example of the problem from the Scandal file:

See how the close-italic tag </i> appears on the same line as Part I’s header, leaving a paragraph marker (seen immediately after the word Love) inside the italic-tag pair?

These need to be fixed so that the italic a/o bold tags do not cross a paragraph marker.

Our example should look like this once it’s fixed:

Meanwhile, it's a giant pain in the ass to go through the file and fix these manually, so we run two more find/replaces to make sure this hasn't happened anywhere:

Find/Replace: De-Screw Italic Tags

Find: ^p</i>

Replace: </i>^p

For good measure, do this, too: (Removes stray artifacts)

Find: <i>(space></i>

Replace: make sure this field is empty of anything

Find/Replace: De-Screw Bold Tags

Find: ^p</b>

Replace: </b>^p

And then...

Find: <b>(space)</b>

Replace: make sure this field is empty of anything

Paragraph Tags

Now we go through the process of adding and managing normal paragraph tags.

NOTE: This step attaches paragraph tags to every paragraph in the file, including headers. This is absolutely fine. We'll remove the paragraph tags and replace them with the proper header tags in later steps.

Find/Replace: Add Paragraph Tags

• 1. Find:^p

  2. Replace:</p>^p<p>

  3. Click Replace All.

Depending which word processor is used for these, a couple quick checks are necessary. Though I use the Scandal file as an example, this issue is not unique to the Scandal file.

Scroll to the very start of the projectx file. It probably looks something like this, missing the opening paragraph tag:

Please add a <p> before the very first line, like so:

It often happens that an extra tag or two appears up top:

Delete that extra </p>.

Similar issues often occur at the end of the file:

Delete any extra stuff so the end of the file is nice and clean, like so:

ACTION: Stray tags

Ensure no stray partial tag pairs remain at the start and end of the file.

Find/Replace: Empty Paragraph Tag Pairs

These need to be removed.

• 1. Find: <p></p>

  2. Replace: (This field should be empty of anything)

  3. Click Replace All.

Stop crying. Spacer lines can be added safely in Sigil.

Find/Replace: Space Paragraphs

Paragraph containers containing only a space must also be removed.

• 1. Find: <p>(hit the spacebar once)</p>

  2. Replace: (This field should be empty of anything)

  3. Click Replace All.

BEWARE

Right about now, if you’re the clever type — and of course you are — you’re beginning to have thoughts about getting more elaborate with that paragraph-tag Find/Replace. Like maybe you’re tempted to add paragraph classes during that step.

If I wasn’t so nice, I’d leave out any explanation and let you suffer as much as I did.

Later on, when none of your CSS seems to stick, it’s because the EPUB file is now populated with thousands of quotation marks of the wrong type. Congratulations, smartypants. If you're going to find/replace a class, or any other HTML/CSS value, you will also have to make sure you use the straight quotation marks. (alt+numpad0034 or &#34;) Smart/Curly quotes must be unchecked in both Auto-correct and Auto-format as you type.

Otherwise, be patient like the rest of us and deal with styles easily in Sigil.

Return to Section Index

Previous << Applying Tags | Next >> Header Tags