Fun With Ebook Formatting: First Lines

One of the easiest ways to make your ebook stand out is to use first line treatments. By making the first lines of chapters or scenes after a break look different from the rest of the text you add visual interest to the “page” and (more importantly) you lessen the risk of confusing readers.

Text in an ebook “flows” to fit the screen. Plus, users can adjust the size of the display. If you use an empty line, for instance, to indicate a scene break–with no other visual clues–the page could break at the break and your readers could end up deeply confused about a point-of-view, time or setting jump.

Besides, first line treatments are fun. Here are a few screenshots off Lucy the Paperwhite Kindle.

Ever since I acquired a Fire tablet, I’ve been playing with colored images (I’ll try to get screenshots off a tablet–you’ll know I succeeded if color images show up here.)

(Did I actually write “expecially” in the sample? Crap...)

Another trick is one I don’t care for myself, but a lot of people do like it. With ereader devices improving their displays, the drop cap looks better, too. (much thanks to William for this screenshot) Notice he used an embedded font for the heading and the drop cap. Embedding fonts is tricky not because the coding is difficult, but because fonts are creative property and there are/can be restrictions on their use. Always make sure you read the license agreements and follow the terms of use.

Most of these first line treatments were created with paragraph styles that can be emulated in Word or Scrivener. (Not that I advocate using either program to format ebooks, but let’s get real, many of you do.) If you want to play with first line treatments, be sure you create a style sheet rather than using tabs, spaces or centering.

Realize, too, that different readers handle html coding in different ways. Not every device will display small caps, for instance. My oldest Kindle is flaky about displaying bolded fonts. You need to experiment and make adjustments.

A few tips:

• Be very careful with first line treatments if you are using Scrivener or Word. Changing font sizes to make small caps can trigger bugs in eink Kindles and play havoc with the user’s ability to change display sizes.
• Also, be careful when using Word to submit to Smashwords. If you are using a no-indent style, make sure to use a style-sheet instead of backspacing to delete the indent.
• Experiment with your image sizes. Percentages work better than pixels.
• Don’t be afraid of color. More and more readers are using devices with color displays and that can make your ebook look fabulous! Check how your graphics look in black-and-white to be sure there is enough contrast in grayscale so the image looks good on an eink device.
• You can learn how to do these tricks in html by going to w3schools.com and searching for information on small caps, drop caps, embedding fonts and other goodies.

So what about you, readers? Any fun tricky-tricks you’d like to share?

Scene Breaks In Ebooks: Giving Readers A Clue

You fiction writers out there. I bet the majority of you love scene breaks. Dispense with boring transitional passages and maneuvering to shift seamlessly character points of view. Hit a paragraph return or two and start the new scene. I’m sure readers appreciate them, too, seeing as how they don’t have to slog through transitional passages and the writer’s effort to shift POV. (I know I appreciate them)

In printed media scene breaks rarely present a problem–even when the book design doesn’t have actual scene break indicators such as asterisks or graphics. A reader sees an inch of white space on the page and that’s the perfect clue that a shift has occurred. Print book designers can also manipulate the amount of text on a page and lessen the chances that a scene break occurs at the bottom of a page, losing the white space and its visual clue that a new scene has started.

Ebooks don’t work that way. (I’m talking about flowable text and not fixed layout) All too often white space looks like a mistake. There is no way to ensure that the break never occurs at the end of the “page.” If it looks like a mistake or if the scene change seems to happen without any clue, the reader is forced to pause to figure out what is going on. If those stutter-pauses build up it can wreck the reading experience and leave the writer with an unhappy reader who will not buy their next book.

Take a look at the following screen shot. Scene break or mistake?

Kind of hard to tell without a real visual clue, isn’t it? The simplest solution is to use a indicator to make it clear that This Is Not A Formatting Error:

No confusion there.

But, what if the writer doesn’t want scene break indicators? What if asterisks or graphics don’t fit the effect he is going for? A simple and effective method is to drop the first line indent.

There are all sorts of ways to indicate scene breaks. Me, being me, I like the fancy stuff. I often use graphics to add visual interest to the page.

I do a lot of reading on my Kindles and “text-fatigue” can be a problem. Kind of like driving through Kansas where it seems the landscape never changes.  “Oh look! More cornfields! Zzzzzzz…” I can only assume others feel the same way. Using a graphic mixes it up a bit, gives my eyes a slight change of scenery. It doesn’t take much.

The important thing to consider is that ebooks don’t offer the same visual clue opportunities as print books, so it’s up to you to come up with something so your readers stay in the story rather than in a state of confusion.

Fun With Graphics: Make Your Images Fit The Screen

For those of you who are whizzes at computer stuff and html and css, do not laugh at my puny efforts. Go look at this video of great social significance instead. I’m talking to the folks like me–who believe our computers are plotting against us when we’re not looking.

You all know that ereaders can play havoc with your graphic images, right? Depending on the device, they can shrink or expand or get cut off in inconvenient ways. The way to make sure your images stay the size you want them to is define the size in the coding. So a line of html for a scene break glyph might look like this:

I needed to insert a graphic that ideally should fill the screen, no matter what size screen was displaying it. I knew how to do this thanks to Paul Salvette (and if you are really serious about formatting ebooks, you must get his book for your resource library) and my partner-in-obsessanating Jon Westcot. Change the size to a percentage–in this case I needed the width to always be 100% of the screen.

Do that and the image will expand or shrink depending on the screen size. Never have to worry about it being cut off.

That’s when it hit me I could do something cool with chapter heads and scene break indicators.

I had a project with a noir-ish theme and I made graphics with a grayscale fade. The problem with locking the image sizes, though, was that on some screens the fade effect was lost and the graphic looked like a block–too graphic-y. That’s when it hit me that I could use percentage coding to make the graphic fill the screen width no matter what size the screen–even a full-sized computer screen.

How it looks on the Kindle Previewer for the iPhone app–a very small screen.

How it looks on the iPad screen–very wide display.

I also did the same with the scene break indicators. For this series I wanted a simple grayscale fade line instead of a glyph, but I wanted to always fill the entire line. Setting the width at 100% did exactly that. Here’s how it looks on Lucy Light the Paperwhite.

If you happen to have an image you want to fill an entire screen, top to bottom, you use the same trick, except you set the height at 100%. That way you can manage the size of your graphics, but still make sure your book illustration or chart gets its own screen “page.”

Nifty trick, eh? Thanks, Paul and Jon.