August 21, 2011

XHTML Template - eBook Formatting


Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Warning This Content is Out of Date. Please head on over to the BB eBooks Developers Page for the most up to date information on eBook creation.

These are templates you can copy and paste into a text editor to get started on your eBook formatting. You can also download them (fiction template and non-fiction template), just make sure to right-click and save the file in your web browser. Beware of your anti-virus software adding strange javascript code into the <head> section when you download the file. This problem is discussed here.

The following is a suitable XHTML template for fiction, because it uses First Line Indent type.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Your Title Here</title>

<!-- Visit http://paulsalvette.com for more details and tutorials -->

<style type="text/css">

/* Below is the Guido Henkel Method to reset everything in an eReader device */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, tr { margin: 0; padding: 0.01em; }

p  /* First Line Indent type, good for fiction */
{
text-indent: 1.25em;
margin-top: 0em;
margin-bottom: 0em;
}

p.notes /* Block Indent type, good for non-fiction, author's notes, about the author, front matter not centered, etc. */
{
text-indent: 0em;
margin-top: 0em;
margin-bottom: 1.0em;
}
 
p.front /* For Front Matter Material */
{
text-indent: 0em;
margin-top: 0em;
margin-bottom: 1.0em;
text-align: center;
}
 
p.title /*Use for the title on the first page*/
{
text-indent: 0em;
font-size: 2.0em;
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 1.0em;
text-align: center;
page-break-before: always;
}

p.headline /*Use for Author's Notes, Excerpts, etc. headings*/
{
text-indent: 0em;
font-size: 1.5em;
font-weight: bold;
margin-top: 1.0em;
margin-bottom: 1.5em;
text-align: center;
page-break-before: always;
}

p.chapter /*Use for Chapter headings*/
{
text-indent: 0em;
font-size: 1.5em;
font-weight: bold;
margin-top: 1.0em;
margin-bottom: 1.5em;
text-align: center;
page-break-before: always;
}

p.centered /* Use for section breaks */
{
text-indent: 0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
text-align: center;
}
 
p.centeredimg /* Use for images */
{
text-indent: 0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
text-align: center;
}

/* Span tags are for when you want to change a few words within a paragraph rather than the entire paragraph */
span.i
{
font-style: italic;
}

span.b
{
font-weight: bold;
}
 
span.u
{
text-decoration: underline;
}

ul /* Defines an unordered list (bullet points) */
{
text-align: left;
margin-left: 3.0em;
margin-top: 0em;
margin-bottom: 0em;
}

ol /* defines an ordered list (1,2,3,etc.) */
{
text-align: left;
margin-left: 3.0em;
margin-top: 0em;
margin-bottom: 0em;


</style>
</head>
<body>
<!--Insert Entire Manuscript from word processor here-->
</body>
</html>
The following is a suitable XHTML template for non-fiction, because it uses Block Indent type.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Your Title Here</title>

<!-- Visit http://paulsalvette.com for more details and tutorials -->

<style type="text/css">

/* Below is the Guido Henkel Method to reset everything in an eReader device */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, tr { margin: 0; padding: 0.01em; }

p /* Block Indent type, good for non-fiction, author's notes, about the author, front matter not centered, etc. */
{
text-indent: 0em;
margin-top: 0em;
margin-bottom: 1.0em;
}
 
p.front /* For Front Matter Material */
{
text-indent: 0em;
margin-top: 0em;
margin-bottom: 1.0em;
text-align: center;
}
 
p.title /*Use for the title on the first page*/
{
text-indent: 0em;
font-size: 2.0em;
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 1.0em;
text-align: center;
page-break-before: always;
}

p.headline /*Use for Author's Notes, Excerpts, etc. headings*/
{
text-indent: 0em;
font-size: 1.5em;
font-weight: bold;
margin-top: 1.0em;
margin-bottom: 1.5em;
text-align: center;
page-break-before: always;
}

p.chapter /*Use for Chapter headings*/
{
text-indent: 0em;
font-size: 1.5em;
font-weight: bold;
margin-top: 1.0em;
margin-bottom: 1.5em;
text-align: center;
page-break-before: always;
}

p.centered /* Use for section breaks */
{
text-indent: 0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
text-align: center;
}
 
p.centeredimg /* Use for images */
{
text-indent: 0em;
margin-top: 1.0em;
margin-bottom: 1.0em;
text-align: center;
}

/* Span tags are for when you want to change a few words within a paragraph rather than the entire paragraph */
span.i
{
font-style: italic;
}

span.b
{
font-weight: bold;
}
 
span.u
{
text-decoration: underline;
}

ul /* Defines an unordered list (bullet points) */
{
text-align: left;
margin-left: 3.0em;
margin-top: 0em;
margin-bottom: 0em;
}

ol /* defines an ordered list (1,2,3,etc.) */
{
text-align: left;
margin-left: 3.0em;
margin-top: 0em;
margin-bottom: 0em;


</style>
</head>
<body>
<!--Insert Entire Manuscript from word processor here-->
</body>
</html>

Share/Bookmark

6 comments:

Angie said...

Hi Paul,

When zipping files for Epub formatting, I had problem to run the application of zip.exe which I downloaded from the link you provided. Whenever I click 'run', nothing comes out but a flash of a black stuff (only one second)??

I checked troubleshoot and it said its compatibility is for window XP mode and mine is windows 7; is it the reason caused the problem? How to fix it? Thanks.

Angie

Paul Salvette said...

Angie,

Try clicking the little windows icon in the lower left corner of Windows 7. In the box that appears right above it that says "Search Program or Files", type in "cmd" without the quotes and press enter.

Angie said...

Paul,

I still don't get it.

Say the folder in my Desktop named: myepubbook which containes MEA-INF, OEBPS and mimetype was ready to be zipped. I type "cmd", then got a black box, saw a line: C:\Users\My Name>_

I typed:cd\myepubbook or cd\Desktop\myepubbook or Desktop\cd\myepubbook and hit enter but always got this:

"The system cannot find the path specified."

What about the application zip.exe I downloaded? I am confused!

Angie

Paul Salvette said...

Create the "myepubbook" directory in the root c:\ directory. Then try cd\myepubbook. Place the zip.exe in a new folder at c:\zip. Should work for you.

Angie said...

Paul,

Thanks. Finally I got the knowledge of how to zip files using command prompt. The key factor is I didn't know what root-directory is and didn't "place the zip.exe in a new folder at c:\zip" as you said.

Now my another problem is to check why some formats are not there when viewing the new myepubbook.epub with Adobe digital Editor.

Although these things drove me crazy, at least I feel better now. Thanks again!

Angie

Zheng junxai5 said...
This comment has been removed by a blog administrator.