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> </p>
<p align="center">***</p>
<p> </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 " " 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> </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.
