Techie Post: Small Caps / Big Impact

I recently coded our first ebook, Manly Hero, for the Kindle. To be honest, I was a little intimidated by the prospect, having never really worked with HTML before, but overall the process was fairly simple and actually a lot of fun.

I did run in to one problem, though. I couldn’t seem to find the answer to one question: how do I add small caps to my Kindle ebook?

Petra and I wanted the first lines of new chapters–and new scenes–to stand out from the rest of the body text, but I had the hardest time finding a good tutorial for doing so. I eventually figured it out on my own, and I thought I’d share my method with the world.

(WARNING: I’m a total neophyte with HTML and CSS, so I make no claims that this is the perfect way to do this. Take what I say with a grain of salt. All I know is I finally got it to work!)

Now, I should start by saying that Guido Henkel’s formatting guide was indispensable in getting my Kindle file built. If you plan on coding your own ebook, go read his excellent series of blog posts. Very clear and very easy to follow.

But one thing he doesn’t cover is how to make first lines look all fancy. So let’s dive in, shall we?

Petra and I wanted to have the first lines of new chapters start with a large initial letter, then have a run of three to six words in small caps, depending on the phrasing. I could have done this by coding each line separately, but that would have taken forever and it would have been a LOT of keystrokes. And, when hand-coding your ebook in HTML, keystrokes = errors. The less you need to mess around inside your beautifully edited book, the better.

Also, I couldn’t figure out a way to individually code each line for small caps without actually deleting the line, re-typing it in caps, then applying the <small> tag. It seemed like a LOT of error-prone re-typing.

So, here’s the solution I came up with:

In my styles I defined p tags this way:

p {text-indent: 1.25em; margin-bottom: 0.2em;}

Then I created two styles and a “modifier”:

p.newchap {text-indent: 0em; margin-bottom: 0.2em;}

p.newchap:first-letter {font-size: xx-large;}

sc {font-variant:small-caps;}

Then I applied these styles to first lines like this:

<p><sc>Whatever I wanted in small caps,</sc> then whatever I wanted normal…</p>

Basically I could just copy and paste the first two tags in front of all the paragraphs we wanted fancy, then insert the </sc> tag wherever we wanted the fanciness to end, and bingo! Clean, professional looking first lines, with a minimum of coding.

This saved an enormous amount of typing and editing, and it took me less than 45 minutes to apply to the entire novel, all sixty-one chapters.

I also applied a similar style to new scenes, but I did it without making the first letter large.

You can see the finished product below, or, better yet, go to amazon and download our novel sample for your kindle (or kindle app), and see it in live action. (Hint, hint.) 🙂

Tagged , , , , ,

2 thoughts on “Techie Post: Small Caps / Big Impact

  1. Thomas says:

    Cool trick, Adam. Been struggling with those pesky first characters myself (and am also using Guido’s fine html base). Thanks for sharing!

Comments are closed.

%d bloggers like this: