17 | Slug Hunt

##Revise: Under Re-Construction

In this section, we introduce some Sigil features, and then travel through projectx.html to handle each production slug we come across. 

If you slugged any en or em dashes to make sure they would render correctly, DO NOT remove the slugs yet. Remove them only after reviewing them in an EPUB viewer. (Users are reminded to do so when the time comes.)

I don’t intend to do a lot of explaining about paragraph class. Curious users can consult w3schools or Google for answers. Here, the tutorial will rely heavily on monkey-see, monkey-do to get the job done.

File Version Notes

Throughout this section, work only in work_projectx.epub.

Resolving Production Slugs

Now we go through the file, slug by slug, to resolve anything marked with a production slug (special text and images).

Things like subtitles or flush paragraph class are accounted for later on in the process. For now, we worry only about slugged content.

DISCLOSURE: When I'm producing files for clients, I do everything here, in one go: slugs, subtitles, flush paragraph and other custom paragraph styles... Everything gets handled in this one pass. Users who've been through this process and understand the cause/effect of their actions will probably want to start doing everything at this point, too. It's just that for new users who need more explanation, it's easier to break the process down into smaller bite-sized sections.

Scene Break Characters

Each set of scene-break characters needs to be centered. To do so, their paragraph class needs to be changed to "center".

DISCLOSURE: Binary Bindery CSS has a specific paragraph class that adds a buffer space (margin-top and margin-bottom) to the scene break characters' paragraph. Consider it an assignment to figure out how to add a custom paragraph class like this on your own, that removes the indent, center-aligns the text, and adds a 1em margin above and below your scene-break character paragraphs.

Wherever you encounter scene-break characters in projectx:

• 1. Change the paragraph's class to "center". (Users have to actually click into the code and manually make the change to the code.

  2. Remove/Delete the slug afterward.

BEFORE:

AFTER:

Click over to Book View to behold your handiwork.

NOTE: If you want the paragraph after a scene break to start flush with the margin, NOW IS THE TIME TO APPLY THAT STYLE. (<p class="flush">)

I find it saves a ton of time and headache to apply that additional style now instead of finding/applying them later.

Block Quotes

Wherever block quotes are encountered in projectx paragraph classes must be changed to either "bqi" or "bqnoi", depending. (I made this pretty easy by creating paragraph classes the same as our production slugs.)

Please do not forget to remove the block-quote slugs afterward.

View an example below.

BEFORE:

AFTER:

It is completely up to the user whether blank lines are added above or below block-quote paragraphs or sections. To add these, use Book View and place a paragraph return in the desired position. Then click into Code View and see what happened on the coding level. (Sigil added <p><br/></p> to create a blank line.)

Check your code afterward. If the user added spacer lines in Book View (not in Code View), Sigil will often attach bqi or bqnoi style to the spacer paragraph container. Manually correct this so spacer lines are always:

<p><br /></p>

Hyperlinks

In this step, hyperlinks are reactivated. DO NOT EMBED THE HYPERLINK. The entire URL address must remain visible on the screen. We will, however, make the URLs clickable courtesy of Sigil's Insert Link function.

Remember:

• • This is an embedded link: embedded link

  • This is an activated URL: http://tinyurl.com/xzg777

  • This is just a visible URL: http://tinyurl.com/xzg777

Here’s how to activate these URL links using Sigil’s Insert Link function:

• 1. Highlight the URL.

  2. COPY the URL. (use ctrl+C or cmd+C)

  3. Click the Insert Link icon.

  4. When the Select Target pane opens, paste the URL into the Target: Field. (ctrl+V or cmd+V)

  5. Click Ok.

  6. Remove/Delete the link production slug from the text.

Figure 1:

Figure 2:

Images

Insert The Image

Here we cover how to insert images safely using Sigil's Insert feature.

I prefer to start the image insertion process in Book View instead of Code View. Either one is fine. (It's just visually easier to see what I'm doing in Book View, and I'm lazy like that.

To insert an image:

• 1. Place the cursor before the production slug.

  2. Click the Insert File icon on Sigil’s toolbar, or select File from the Insert menu. User’s choice.

  3. Insert the appropriate image at the production slug’s location.

  4. Remove/delete the production slug.

Now click into Code View. The image line should look something like this:

Change the paragraph class to <p class=“center”>

Revise The Image's Alt Tag

In the images above, note a couple things about the image code:

The alt attribute defaults to the image name without any filetype suffix. In the event a device should fail to load or display an image, the alt text will be displayed instead.

Producers must provide suitable alt text so that if an image should fail to render, the alt text can take its place to help avoid confusing the reader.

Here's an example, showing a scene-break image from the Scandal file.

BEFORE:

AFTER:

NEW!

Images: Advanced

This new section is under construction, but touches on some basic stuff for users who need more image support.

DISCLAIMER: First-time users should probably avoid this addition, and ALL users should keep in mind that this tutorial is geared to straight-form fiction with few or no images. Small scene-divider graphics are handled in a manageable way. Troubleshooting and a few suggestions are covered in this new page, but know this: if you go nuts with images, you will go nuts trying to make them display properly across all platforms. It's not an easy thing.

Slug Check

Once all slugs (excepting em and en dash slugs) have been resolved, we need to make sure we didn't miss any, or leave any slug text behind.

Run one last "Find", as seen below.

Action: Post-Slug Save

1. Once all the slugs are removed, use SaveAs to create a slug-free copy named postslug_projectx before moving on.

2. Use SaveAs again to create a new working copy for the next section named split_projectx.html.

Previous << Sigil Features | Next >> Pagebreaks and Styling