Wednesday, July 17, 2013

A style sheet for e-books

Here is the style sheet I am currently using. It has the name epub.css and it is a plain-text file unto itself. You are welcome to copy it or adapt it for your own use. - NJ

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.left {
margin-top:0.5em;
margin-bottom: 0.0em;
text-indent:0.0em;
text-align:left;
}

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;
font-style: italic;
text-align:center;
}

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

h4 {
margin-top:1em;
font-size: 125%;
text-indent: 0em;
text-align:left;
}

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

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

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

p.block {
font-family: courier, monospace;
text-indent: 1em;
text-align:left;
margin:0em 0em 0em 1em;
}

p.blockfirst {
font-family: courier, monospace;
text-indent: 1em;
text-align:left;
margin:0.5em 0em 0em 1em;
}

p.blockcenter {
font-family: courier, monospace;
text-align:center;
margin:0.5em 0em 0em 1em;
}

span.smallcap {
font-size: 90%;
font-weight: bold;
}

div.image {
text-align:center;
margin-bottom: 0.25em;
}

div.icon {
text-align:center;
margin-bottom: 1em;
}

div.caption {
margin-bottom: 1em;
text-align:center;
font-style:italic;
}


15 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Hi Mr Notjohn, Thanks for this! I have a stupid question though. How do you apply this style sheet? I've worked with coding for PHP but not for e-publishing. The book I wish to publish also has many .jpg images. How do you apply both of your templates to format? You're really sweet for having this available! Thanks! D

    ReplyDelete
    Replies
    1. In the sample Template (the full-length one, not Plan B) you will see the link to the style sheet, which has the name epub.css -- NJ

      Delete
  3. This was EXACTLY what I was looking for! I didn't want my ePub files to have pre-set fonts, margins and line spacing as my iPhone reader is able to do this. My initial solution was to remove the complete stylesheet from the epub file, but that removes all formatting. Your stylesheet does what it shout do: let the user choose font type, margins, justification and line spacing but keep paragraph formatting, italic, etc.
    Many many thanks!!

    ReplyDelete
  4. I just purchased your book and I'm even more confused than before!!!! I had already created my book in Word - I'm starting to get a huge headache with all of this html stuff. I need help!!! golddawn2000@yahoo.com

    ReplyDelete
    Replies
    1. Well, you can always try uploading your Word doc and seeing how it converts. If it's a mess, then try the free resources mentioned in the blog post http://notjohnkdp.blogspot.com/2014/01/all-about-e-publishing.html

      Delete
  5. Thank you! I have problems when I use the following font styles for programming code:

    font-family:"Courier New";
    font-style: courier, monospace;

    When I change to what you suggest all these font problems just disappear:

    font-family: courier, monospace;

    How about this?

    font-family:"Times New Roman","serif";

    is there any possible problems in the defination?

    ReplyDelete
    Replies
    1. Yes, that "courier, monospace" seems to be required if Courier is to work on all Kindle devices. (I think it was the PaperWhite that required the "monospace," while "courier" works on the others.)

      I wouldn't call for TNR because that's not what Kindle uses. The default on the older Kindles is a very legible serif font called Caecilia. Let the defaults rule! Specifying nothing gets you Caecilia on the e-ink Kindles while giving owners of the Fire tablets the ability to choose anything they like. I think it's a good idea to let the reader do what he or she likes, even though it's not what we would have chosen.

      Delete
  6. Replies
    1. Good question! H1 naturally was reserved for the book title on the title page (H2 for sub-title, H3 for author) but then I realized this was bad form and that headings should not be used in that fashion. So H1 became p class="large" (and an H2 equivalent is p class="medium" etc). You can certainly call the chapter title H1 if you like.

      Delete
  7. I'm having a headache getting straight answers from the support people at KDP. I haven't been too impressed with their helpdesk so far. I'm hoping you can answer a question they seem in capable of answering:

    RIght now I'm using an HTML editor called Brackets. I have my HTML code, along with a separate .css file. My question is, how do I "include" the css file with my code when I upload my book? All I see is the Upload button (which I have used to upload my .html file, but of course, it's then missing my stylesheet).

    I'm guessing there must be a way to combine the .html and .css files, then convert them to epub, but for the life of me, I can't find an answer to that. Can you help?

    Thanks,

    Andy

    ReplyDelete
    Replies
    1. Either put the style sheet at the top of the html file, in the [head] section, or download and use the excellent Sigil software and link to it as a separate file. I do the latter. Sigil saves as epub, which converts beautifully on the KDP platform. You will link to the external style sheet (again, in the [head] section) with a statement like this: [link href="../Styles/epub.css" rel="stylesheet" type="text/css" /]

      I have to use square brackets instead of angle brackets because of the limitations of the Blogger software.

      Delete
  8. Awesome information. Thanks. I'm a newbie - first time uploading my wife's book to KDP. I took your advice, and downloaded Sigil (love it!). Then copied your epub.css to create my own. I linked my 18 pages to the css (how easy is that!). The p and h2 work perfectly. But I have trouble with anything else. I'll try a test paragraph using, say [p.center] but when I save it, the code reverts to [p]. Any ideas? What am I doing wrong?
    Thanks
    Rick

    ReplyDelete
    Replies
    1. Rick, for anything more than a plain old [p] paragraph, you need to specify a CLASS, like this: [p class="center"] -- that's in the text, of course, not the style sheet. (And use angle brackets, of course.)

      Same with divisions. Like: [div class="image"].

      Yeah, Sigil is the greatest thing since computers came along.

      Delete
    2. Thanks for the clear, quick reply. Obviously, I'm still learning, but that explains it. Simple once you know.
      For freeware, Sigil is unusually intuitive and well documented.
      Thanks for your help!

      Delete

English only. No links. Keep it clean.