Wednesday, January 16, 2013

Plan B: The Ultimate Basic Template

Copy everything below this paragraph and paste it into a text editor like Notepad++. Paste in your book text as appropriate, preferably as clean html. Save the document with the extension *.htm and open it in Sigil.

<?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">

<head>
<title>Your Book Title Goes Here</title>

<!--First we have a basic style sheet, sufficient to format our book-->

<style type="text/css"> 

p { margin-top:0.0em; margin-bottom:0.0em; text-indent:1.5em; text-align:justify; }

p.first { margin-top:0.5em; margin-bottom: 0.0em; text-indent:0.0em; text-align:justify; }

p.center { margin-top:0.0em; margin-bottom:0.25em; text-indent:0.0em; text-align:center; }

h2 { margin-top:1em; font-size: 150%; text-indent: 0em; text-align:center; }

p.large { font-weight: bold; margin-top:1em; font-size: 200%; text-indent: 0em; text-align:center; }

p.medium { margin-top:1em; font-weight: bold; font-size: 150%;
margin-top:1.0em; text-indent: 0em; text-align:center; }

p.small { font-weight: bold; margin-top:1em; font-size: 125%; text-indent: 0em; text-align:center; }

</style>
</head>
<body>

<!--Next we have a title page with each line centered-->

<p class="large" id="start">Your Book Title</p>

<p class="medium">The Sub-title</p>

<p class="small">Author</p>

<p class="small">Publisher <a href="#copy">2016</a></p>

<!--Which is followed by the Table of Contents, also centered-->

<mbp:pagebreak>

<h2 id="toc">Contents</h2>

<p class="center">1 - <a href="#chapter01">Chapter One</a></p>

<p class="center">2 - <a href="#chapter02">Chapter Two</a></p>

<p class="center">3 - <a href="#chapter03">Chapter Three</a></p>

<p class="center"><a href="#copy">Copyright</a></p>

<!--And now the text chapters, as many as you like-->

<mbp:pagebreak>

<h2 id="chapter01">Chapter One</h2>

<p class="first">

<!--The first paragraph is flush left with a few words capitalized-->

</p>

<p>

<!--Following paragraphs are indented, and each ends with a closing tag-->

</p>

<mbp:pagebreak>

<h2 id="chapter02">Chapter Two</h2>

<p class="first"> </p>

<p> </p>

<mbp:pagebreak>

<h2 id="chapter03">Chapter Three</h2>

<p class="first"> </p>

<p> </p>

<!--Adapt for as many chapters as you have, then end with the copyright-->

<mbp:pagebreak>

<h2 id="copy">Copyright</h2>

<p class="first"> </p>

</body>
</html>

20 comments:

  1. My apologies! I put a period (full stop) after the basic paragraph style in the style sheet, with the result that it didn't work properly. That error is now fixed. If anyone copied off the template before 1000 New York time January 17, please fix your copy or grab a new copy. NJ

    ReplyDelete
  2. I bought your book last year and am still working on converting an 128 page indesign file, by extracting all the text and photos and putting them in html. Like a webpage, each chapter is its own file. All the photos are in a folder marked 'images' and linked to the appropriate chapter. I am hoping that when it comes times to using Sigil, I can assemble all the parts into one book -- I will be able to do that right?

    ReplyDelete
  3. I am converting a guidebook (Kindle). I tried to include the photos and maps next to the text about the specific route, then I read that the photos would be best at the end of the paragraph. As you can see, I tried to include them in the text with the specific route reference. What do you think about that?

    I also found to pass W3C, I cannot close my paragraph tags. I'm including one of my chapters so you can see how I am handling the photos and tagging, but would ask if you might not reproduce it on your website, since it a work in progress for one of my authors. It is passing as HTML5, but with one warning.

    Each on of the chapters is created like this with links to the images in another folder. I am hoping that when I get to to the Sigil part (I will be using 0.74 on a MAC) that I will be able to combing everything into one book. Sigil will let me do that, correct?

    ReplyDelete
  4. Alas, the software won't allow me to use much html here, but: 1) I close my paragraphs, and I suspect Sigil would put in the paragraph closing tag if you left it out. 2) I agree that it's probably best to let the image follow the paragraph that discusses the route. 3) I don't have my images in a folder of their own, but like my style sheet is just hangs around in the same folder or directory that contains the html file. When you open the html file in Sigil, it just inhales the images and the style sheet, and when you save it as an epub, what you get is essentially a zip file containing all these elements of the book.

    ReplyDelete
  5. Thanks for the reply NJ. Yea, this website wouldn't let me include my chapters (with html), so the file wash;t there.

    t have 12 html files for 12 chapters. Maybe it is best to put everything is one folder and combine all the chapters in one huge text file before using Sigil, but I'll try separate files first. It's an organizational nightmare to find anything if everything is in one folder.

    One more question. I took your css. template for paragraphs but added the font family arial as follows:
    p.medium {
    font-weight: bold;
    font-size: 200%;
    font-family: arial narrow, sans serif;
    margin-top:0em;
    margin-bottom:0em;
    text-indent: 0em;
    text-align:center;
    }
    However, I was just reading Amazon KPD guidelines, and they say:
    Text guideline #1: normal text The “normal” text in a Kindle book must be “all defaults”. We encourage content creators to use creative styles for headings, special paragraphs, footnotes, tables of contents and so on but not “normal” text. The reason is that any styling on “normal” text in the HTML would override the user‟s preferred default reading settings. Users tend to report such behavior as a poor experience. Here are the most important points:
    “Normal” text must not have a forced alignment (left aligned or justified). “Normal” text must use the default font family. The font face=”…” tag is ignored on the Kindle platform but even so, make sure it is not used on “normal” text. The same applies to the CSSfont-family style. “Normal” text must use the default font size. The 'font size=”…”' tag or its equivalent in CSS should not be used in “normal” text. “Normal” text should not be bold or italicized. Selected parts can of course use such styling. This guidelines only prohibits book that would be entirely bold for example. “Normal” text should not have an imposed font color or background color.


    It sounds like I should take out all references to specific font families:
    "font-family: arial narrow, sans serif;"
    So, do you think I better remove any references to type faces? I wouldn't mind putting in sans-serif, but from the looks of your CSS, you did not include anything about type families or fonts in the paragraph css.

    Thanks again for doing your 'guide book' to epubs.

    ReplyDelete
    Replies
    1. I open my html file in Sigil as a single file; then I break it into chapters or sections, which is the recommended way to build an epub. Some of the older devices choke on large files. I've never tried importing multiple files; I think you would have to add them one by one.

      I don't ever call for specific fonts, except to use italics and (rarely) a monospace type like Courier. For one thing, to use Arial you must upload the font with the book (and to upload it, you might own the right to do so). For another, as Amazon warns, many readers prefer to use their own font, and the latest Kindle gadgets give them this option. I don't think it's a good idea to annoy readers by forcing a font on them.

      Delete
  6. Hello Notjohn,

    Your blog and book have been very helpful so far! I have my epub split into separate files, and am trying to get my "toc's" worked out, which is coming along nicely. But I do not understand the id="start" and id="toc" What do they point to? The id's in the chapters are simple enough but these two? I may be over thinking them.

    My title page and my "toc" are separate pages as you suggested. It's going to look pretty good as an e-book I think.

    Again thanks. Your help has been invaluable!

    ReplyDelete
  7. If you use the semantics tool (lefthand menu), they're superfluous, and for Kindle publication the "start" tag doesn't seem to do any good because the Start Reading Location actually seems to be set in the publishing process, so you can't do anything about it. OTOH the tags don't do any harm! They're for the Go To menu on the Kindle device or app.

    ReplyDelete
  8. I just read your book after finding it online when I ran into issues using Amazon help. Thank you, thank you! Your book is VERY helpful and will make the final publishing steps much easier! However, I have a couple of questions before I get to that point.

    This is a totally new experience for me, though I have used HTML for simple websites and I am pretty tech savvy. I totally get why you recommend using html and css files and Sigil, but I'm pressed for time. I'm doing this for a friend's father who is 93 and ailing right now. We want to get this published very soon.

    I have the ebook fully completed in Word (starting with a pdf document), saved as filtered html (as suggested by Amazon help). I wish I’d found your book before I started this. When I look at the source it's a mess, but, it does look great in the Kindle previewer. All the chapter links work great, all the images appear in the many different device previews, and I've worked out most of the other quirks I ran into. The only things not working in the Kindle previewer are the TOC and Start (done they way they recommended in the quick guide: https://kdp.amazon.com/help?topicId=A1B6GKJ79HC7AN) Question #1: will this work when I go to publish since it works within the previewer? If it would, should I just go into the messy code to get the TOC and Start tags in it?

    Questions #2 and 3 or more - Plan B?: I did run the script through word2cleanhtml and I can live with going back in to recreate the script that was removed and the links for the chapters - if the Start and TOC tags will work in the readers, and if it is more likely to upload correctly. Your Plan B makes more sense to me right now given the time restriction, but, I’m confused. Are you suggesting one total HTML file for the entire book, which is what I have now? I see some references on your blog to separate chapters. Do I need to create separate files for each chapter? That seems just formidable at this point! And, would the script you offer for plan B just be part of one huge file with the entire book or is it (could it be?) a separate .css file? I don’t see any references to “calling” a css file from the html file(s) within your directions for Plan B.

    Any help would be appreciated. We only want to publish on Kindle and it probably will go no further than that so using Sigil seems like a lot more than we need and more time than I have to get this done.

    ReplyDelete
  9. Yes, you can submit as a single file -- that's what Plan B is. It works best with simple documents like a novel, with no illustrations or other fancy stuff. If you look at the top, you'll see the entire style sheet listed there. You can substitute any other styles, or indeed my entire style sheet as posted elsewhere on this blog. (Of course you have to specify in the text what style you want to use. For example, you might start a paragraph with <p class="first"> if you want a paragraph with the first line flush to the left margin.)

    Don't worry about the SLR or Start Reading Location. Amazon will insert it in the publishing workflow. For the table of contents, simply insert id="toc" in the h2 heading, just as you see it toward the top of Plan B, like this: <h2 id="toc">.

    ReplyDelete
  10. You are awesome to help others get through this! There are a lot of illustrations but they seem to work fine when run through the word2cleanhtml and all are within a folder. Do you think that will work okay? I'm savvy enough to check the html script for images if I need to unless there is some other quirk with Amazon conversion that will cause issues. ??

    Thank you so much!

    ReplyDelete
    Replies
    1. Well, give it a try! If the image urls point to the folder, they'll show up. (Not the way I would do it, but if it works, it works!) If you're uploading an html file to the KDP, you must zip it together with the image folder and upload the zip file. I think every computer comes with an archiving software these days.

      Delete
  11. NJ,

    Just downloaded your book and now redoing the whole thing in HTML. Knowing HTML this isn't going to be to hard. I do have a lot of pictures and still working on that part.

    My question is about the tag "". Will this convert to a new page when I convert it to ePUB?

    Thank you.

    ReplyDelete
    Replies
    1. If you're using Sigil to build your epub (as you should!), the preferred way is to have a single html file. Open it in Sigil, add your style sheet to the /Styles folder, and otherwise rough out the heading of the file. Say it begins with your title page. So go to the last character on that page and split the file. This has the huge advantage of replicating everything in the heading, so you don't have to keep rebuilding the head section. You can of course use any marker you like (Sigil has its own command) but I find it just as easy to keep breaking the file manually. Good luck! -- NJ

      Delete
    2. (Well, after adding the style sheet, link to it!)

      Delete
  12. Ugh, the tag didn't come through...

    mbp:pagebreak

    ReplyDelete
    Replies
    1. That will work, if uploading a single html file, but it works only on the Amazon platform. <mbp:pagebreak />

      Delete
  13. NJ

    I don't see the page break in the css. Am i missing something?

    Jim

    ReplyDelete
    Replies
    1. I don't put it in the style sheet (css). I use Sigil and just split the file as above. If you want to upload a single html file, you can Google the question; there are multiple ways to handle it. Or if happy to limit yourself to the Kindle, you can use the mobipocket kludge mbp:pagebreak that you have mentioned.

      Delete

English only. No links. Keep it clean.