Monday, October 24, 2016

Reader question: How to not indent the first line of just some paragraphs in an ePub book?

Today, we have a reader question:

"Hi, I've used your awesome tutorial on a short story and now I'm using it again on a novel.

Just wondering if you know a way to stop the first line of a new chapter being indented? It seems I'd need to add something into the stylesheet to make this happen but I wouldn't know what."
 
To see the tutorial he's talking about, head over here: http://www.jedisaber.com/eBooks/Introduction.shtml

On to the answer:

CSS classes are what you're looking for (google that for a lot more info...)


Now, the below should work, but not all ePub readers are really good about properly displaying everything the ePub format supports. (In other words, this should work, but it might not in all readers.)


The code in the stylesheet that makes the first line of each paragraph indent is this:

p {text-indent: .3in;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;
    text-align: justify;
    font-family:"Times New Roman";}


So, first, you'd want to add code to the stylesheet like thus:

p.plain {margin-left:0;
    margin-right:0;
    margin-top:0;
    margin-bottom:0;
    text-align: justify;
    font-family:"Times New Roman";}


the ".plain" part can be anything you want, but you want it to be regular text (no spaces or other special characters), rather short, and unique.

The "text-indent: .3in;" line is what causes every HTML <p> tag to be indented. (The <p> is HTML for "paragraph") By removing that, our "plain" paragraphs won't indent the first line.

Great. So how do we tell our ebook that a paragraph isn't a regular paragraph?

Open your HTML file in a text editor (or, if your using Sigil, which I highly recommend), click the Code View button (it's the one that looks like "<>")

Find the paragraph you don't want to indent. Let's say it looks like this:

<p>This is the paragraph I don't want to indent the first line of.</p>

Change it to look like this:

<p class="plain">This is the paragraph I don't want to indent the first line of.</p>

And that should do it!