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!

Making ePub books the easy way

Many of you may be familiar with my ePub tutorial over at www.jedisaber.com/eBooks/

If you are, or if you are thinking about self-publishing, or if you need to edit any of your ePub books for any reason, I've now posted the first part of a Sigil tutorial:

http://www.jedisaber.com/eBooks/Sigil01.shtml

The first part is a brief overview of what Sigil can do, and what all those buttons are. Coming soon, importing your book into epub using Sigil, and formatting your content.

 

The top part is the menu and toolbars, much like every other application out there.
The pane on the left shows the contents of the ePub Container (This should look familiar if you've read my manual ePub tutorial.)
The middle pane shows the contents of whatever file you've opened from the left pane. Sigil can edit any part of the ePub file, including XHTML files (your book), CSS files, the ePub structure files, and you can add images to the ePub file right from Sigil too!
The right pane is the TOC, or Table of Contents, viewer. This is the stuff that shows if you press the Table of Contents button in your e-Reader.
Sigil can edit XHMTL files in either WYSIWYG, or code view, or a combination of both. (CSS files and the ePub structure files can only be edited in code view.)
Let's look at what the toolbar buttons do....

For more, check out the full tutorial at the link above, and check back in the next few days for the other parts.

Good eBook Design

Future Book posted an article the other day about what makes a good looking eBook:

http://www.futurebook.net/content/what-makes-good-looking-ebook-tips-ebook-design-standard-titles

Basically, the article talks about the challenges of making an eBook look great, and having it still look great when it gets re-sized.

As I say in my ePub Tutorial, mostly it's about keeping it simple. I'm going to go through the tips given in the article linked above, and give simple HTML code for doing them in ePub. (I'm just going to give the design element name and the HTML code to do it here. The article linked above talks about why it's best to do it that way and such. For more details on implementing the code snippets shown, check you my full ePub Tutorial.)

Paragraph indentation:

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

The above code goes in your CSS file. The first line in there indents the first line of each paragraph. The next four lines get rid of white spaces between the paragraphs, making it look more like a book and less like a web page.
The "text-align: justify;" makes the text justified, or have even margins, instead of a jagged right margin.
The last line sets the font to Times New Roman. You can specify whatever font you want here, but remember to keep it simple. For the best reading experience, especially for works with lots of text like a novel, a nice simple font does the job and doesn't distract from your content.

Section break spacing:

This is what's used to separate sections within the same chapter. In novels, you often see them when the point of view changes mid-chapter. In printed books, these are either little doodles, or asterisks. As the article states, keep these simple.
For a small image, use the <img> tag.
I recommend just using asterisks for a few reasons. They'll re-size along with the text, and they take up a lot less space than an image, thus making the book open faster. To make them look fancy, include a blank line above and below, and center them. The HTML looks like this:

<p>&nbsp;</p>
<p align="center">***</p>
<p>&nbsp;</p>

You could center this by using CSS code, but this is the easiest way to do it, and not all ePub readers support CSS. :(  (In case you're wondering, the "&nbsp;" is the HTML code for a blank space. The reason that's in there is because some browsers ignore empty paragraphs, and we want them to show up to set off our section break.)

Chapter heading design:

The simplest way to this:

<h1 align="center">Chapter 1 or chapter title here</h1>

This will make the chapter title big and centered. If you do use an image, don't forget the alt text (that's what makes it searchable):

<img src="picture.jpg" alt="Chapter Title" align="middle">

Chapter heading space:

Same code here we used to space out our section breaks.

<p>&nbsp;</p>

Styling:

You can do this in CSS, but in the interest of simplicity, and the fact that the average novel doesn't have too much of this use the below code:

Bold: <b>Sample text</b>
Italics <i>Sample text</i>

You can use a few other tags to bold and italic text as well. For a more complete discussion on that, just Google "Bold in HTML" and enjoy reading pages of discussion on why one should or shouldn't use a certain tag.

My eBook tutorial full discusses the e-book only elements that the Future book article talks about.
Go check it out.

New Years Resolutions so far...

So far, I've not been doing that good on my new years resolution to write more. I got a big chunk of story done today, and almost finished the scene, but....

... it's the first time I've really written anything this month. :(
I've got to be more consistent, and what's worse is I know I can do it. Perhaps if I set an alarm to go off each day...

As to the scene I worked on, it's almost done, and after it's over I'll just have a few more wrap up scenes and Threat From The Past will be done! (Well, the first draft anyway, then the real work begins.) After I get that finished, I'm going to set it aside and let it percolate for a while while I edit more of A New Threat. There's a few scenes there I want to tweak, then it's out to the sharks again.
I'm hoping to get it ready to publish sometime this year. The current plan is to self-publish both that and the sequel at the same time...

In other news, I also tweaked my ePub tutorial a little bit. I've fixed a few minor errors and typos and color-coded some of the code examples. Hopefully that will make it easier to follow. Check it out if your curious about how to make your own eBooks. Coming this summer, I plan to expand it to cover making eBooks using Sigal, and possibly a few other tools, to help out those who aren't quite so hands-on with their file formats (and it's MUCH faster to make a good book with Sigal than by hand... not to mention the built-in error-checking.)

epub: Hyperlinks in ePub Books

I also have a site at www.jedisaber.com/ebooks where I talk about how to make ePub files by hand. I'm going to do some blog posts here with bits and pieces about the ePub format that don't fit in the guide. I thought this might be of interest, since I've almost decided to self-publish.

Anyway, today's topic, links in ePub files.

I've gotten a few questions about how to do links inside of ePub books. This question is both easy to answer, and complicated.

The easy answer is: Just like you would in a normal web-page. This is complicated by the fact that the ePub specification does not give any usage guidelines on how to handle links.

iBooks, Stanza, and Adobe Digital Editions all handle it this way:

If you have an eBook with two files in it, say, "chap01.xhtml" and "chap02.xhtml", and they are in the same sub-folder in the zip file, adding a link is easy:

<a href="chap02.xhtml">Link title here</a>

Put that code somewhere in the chap01.xhtml file, and it'll jump you right to it. This is handy if you want to include a Table of Contents, or link to annotations or something similar. (Yes, if you use the TOC.ncx file, the ePub book will have a Table of Contents, but only through the menu. If you want one to show up as part of the book when you're paging through it, you have to make a separate page with links.)

Also, note that all links in ePub files are relative links. If your folder structure looks like this:

Mimetype
OEBPS
  - title.xhtml
  - chap01.xhtml
Extras
  - annotations.xhtml

You can link between title and chap01 by just using the filename, not the full path. If you want to link from chap01 to annotations.xhtml, your link would have to look like this:

<a href="../extras/annotations.xhtml">link text</a>

(Please note that while you can put files in different folders like this, it's not recommended.)

Linking outside of the book can be interesting. The standard link:

<a href="http://www.jedisaber.com/">Link</a>

works in iBooks, Stanza, and Digital Editions. I'm not sure if it works in others, due to limited testing ability. (I don't have a Sony Reader or Nook.)