Epub Coding: Making that first line small-capped with some CSS-fu

epubsmallcap

 

OR, HOW TO STYLIZE THAT FIRST PARAGRAPH WITHOUT ASSIGNING IT A CLASS

I thought I’d share a little bit of CSS coding I used in my ebook release MUST LOVE BREECHES. This will be a short post, but I thought there might be some who would like to use the code, so I’m sharing 🙂 For those totes familiar with CSS, this won’t be a revelation, just sayin’.

So, on most e-readers, my chapter beginnings look something like this:

ereader2

Today, I’m going to share my code which stylizes that first line without having to wrap any SPAN tags around the first letter or the first line or first couple of words. In fact, the first line always gets stylized no matter how much the reader enlarges or reduces the page. In the example above, if the reader had reduced the type enough to have “truce” on the first line, it would be stylized correctly.

I’m indebted to Carolyn Crane for part of this code. I was reading INTO THE SHADOWS, one of her awesome romantic suspense novels, and it happened to be when I was struggling with stylizing my epub’s first line (I wanted to have some of the words small-capped, etc), and I noticed her whole first line was smallcapped, and I was like, wait, how can she know how many words that would be? So I expanded my text and it was like magic! I probably looked like a doofus at the restaurant as I made this discovery (I was eating dinner at my fave watering hole). So when I got home, I DM’ed Carolyn on twitter and she was gracious enough to share the secret (not really a secret, but it felt that way to me) CSS code that did this witchy magic:

p.firstpara:first-line {
font-variant: small-caps;
}
p.firstpara:first-letter {
font-weight: bold;
font-size: 130%;
}

I then took her code and made some changes to the CSS so that I wouldn’t have to give a class to every opening paragraph. So here’s the HTML for the opening:

<h1 title="Chapter Two"><a class="nolink" href="../Text/contents.xhtml#tocchapter2">Chapter Two</a></h1>
<p class="doodad"><img alt="New Chapter" src="../Images/doodad.png" /></p>
<p class="epigraph">I had a dream which was not all a dream.<br />
Lord Byron, <i>Darkness</i>, 1816</p>
<p>Isabelle slowly opened her eyes and brokered an uneasy truce with her stomach. The colors and shapes seemed overexposed, too sharp. Nearby, French doors led to the balcony.</p>

Notice that I have no class assigned to the opening paragraph, and yet it’s stylized. Here’s how I did it in the CSS stylesheet:

.epigraph + p {
text-indent: 0;
}
.epigraph + p:first-letter {
font-size: 1.2em;
font-weight: bold;
}
.epigraph + p:first-line {
font-variant: small-caps;

}

What I did above was essentially “say” that if there’s a P tag following the EPIGRAPH class (.epigraph + p) then don’t indent it. And then the next bit is telling it that in that paragraph following an epigraph, I want the first letter to be a tad bigger and bolded. And then the next one is telling it to make the first line of that paragraph have small caps.

So, with that bit of coding on the CSS side, I didn’t have to go through all of my chapters and add a specific class to the opening paragraph so that I could control it (or laboriously put span tags around the first three words to small cap them), I instead controlled it through its neighbor, saving me time.

EDITED TO ADD: I forgot to mention, that I also have the first line in scene breaks stylized too, and since they’re all preceded by a scene break image, I used that image class (doodadScene) to manipulate that first line:

.doodadScene + p {
text-indent: 0;
}
.doodadScene + p:first-letter {
font-size: 1.2em;
font-weight: bold;
}
.doodadScene + p:first-line {
font-variant: small-caps;

}

And if your opening paragraph simply follows your header, your code would be:

h1 + p {
text-indent: 0;
}
h1 + p:first-letter {
font-size: 1.2em;
font-weight: bold;
}
h1 + p:first-line {
font-variant: small-caps;

}

So where to put all this CSS code? No need to put it at the top of every chapter (if you have separate html pages for each chapter). Just open up your stylesheet.css file and put it in there. You only need to put CSS code at the top of a page if you want that page to be different than other pages; your master stylesheet is the default styling for all of your pages.

Hope this helps! If you have any questions, feel free to ask, or if I could have made the code even leaner, let me know.

What We’re Reading: Transcendence by Shay Savage

Talk about pushing boundaries! I’m at Paranormal Unbound today talking about a book that is not only a caveman time travel, but is told entirely in the male POV, without dialogue, and the hero can’t learn language! Oh, and it had me in a blubbering mess when I finished it…

Paranormal Unbound

transcendenceEver since I read Transcendence by Shay Savage last month, I’ve been dying for my turn to come up to review here! If this book doesn’t meet our manifesto of looking for books that are different and push boundaries, I don’t know what does. Because, behold, this book is:

  • not just a time travel romance, but a CAVEMAN time travel romance
  • told almost in its entirety from the male POV (epilogue is in hers)
  • there’s little to no verbal dialogue
  • the male hero has no concept of language and is incapable of learning it

It’s also Exhibit A in the adage that you can break rules in fiction as long as it works. I mean, seriously, we’re told over and over to have dialogue. Dialogue is action. Dialogue moves the story forward. No dialogue in the first page is a no-no. Etc. Yet this book had no dialogue. And it worked…

View original post 1,446 more words

Did You Mess Up History and Other Posts

As part of my debut novel release, I’ve been guest blogging around. Most of them have been interviews, excerpts, and the like, but some have been articles related to the book and so I thought I’d highlight them here in case they’re of interest to you.

timetravel

Today, I’m over at FF&P’s blog with “Did You Mess Up the Timeline? Incorporating Theories of Time Travel in Fiction.” I’ve had some readers confused by my ending and I thought it might be fun to explore the different ways fiction has dealt with causality and paradoxes when time traveling. I made the handy chart above, which won’t make much sense without the article, but at least shows some of the different scenarios.

On September 25, I was on R.L. Jameson’s Immortal History blog with “A Brief Look at Mathematician and Visionary Ada Lovelace

On September 24, I was on Petir Fours & Hot Tamales with “My Journey to Publication

On September 22, I did a Get Lost in A Story interview, wherein I talk about the first book I remember reading and how I can get lost in a story

On September 10, I was on Shauna Roberts’ blog with “Secrets of Getting Your Book into Bookstores

On September 9, I was on Jami Gold’s blog with “DIY Book Trailer

Hope everyone’s been having a lovely fall!