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;
}


27 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
  9. I just bought and read your latest guide to epublishing and it was very informative, but still didn't answer my basic question which is how do I change fonts. I have written a small Bible study and I want scripture in TNR (or something like it) and my commentary in Arial (or something like it.) Would I modify one of the p. in the stylesheet to include another font family? Thank you.

    ReplyDelete
  10. The simple solution is to use the regular paragraph styles when you want something similar to TNR, and the courier/monospace styles for the commentary. However, you may not like the result. I generally use italics for occasional quotations, so if your commentary is short, that might work for you. The only way to get a specific font is to embed it. That requires some technical knowledge, doesn't always work, can annoy readers who different a font of their own choosing, and requires a license or the use of free fonts. If you really want to do this, I urge you to hire a professional like Hitch at booknook.biz

    ReplyDelete
    Replies
    1. " who different a font of their own choosing"

      Who PREFER a font of their own choosing!

      Delete
  11. Well I've gotten a little closer to my goal. I have a style sheet with the fonts I want. Now for a simplistic question but one which I can't find an answer to. How do you indicate in the html of the book which style to use where?

    ReplyDelete
    Replies
    1. If you embed fonts, you're a braver publisher than I am! It's difficult, it may require a license fee, Amazon sometimes strips them out, and they can annoy readers if done wrong. I leave this to the professionals. Sorry!

      Delete
  12. No, you misunderstand me. I'm following your suggestion and using your stylesheet.

    The simple solution is to use the regular paragraph styles when you want something similar to TNR, and the courier/monospace styles for the commentary. However, you may not like the result.

    But I still don't know how to tell the book when to use the regular paragraph style and when to use courier/monospace.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Ah, sorry! For the default font, you simply begin each paragraph with [p]. For paragraphs in Courier, use [p class="block"] or blockfirst or blockcenter, depending on the effect you want. And the brackets are angle-brackets < or >, not square ones, but I can't use them here.

    ReplyDelete
  15. I changed [p] to [p class="first"] (using angle brackets)

    And I got an error

    The operation you requested cannot be performed because ....xhtml is not a well-formed xml document

    An error was found at or above line 27. That tag isn't allwed here Currently open tags: html, body. . .

    Thank you for all your help.

    ReplyDelete
  16. Make sure that you indeed have a style sheet that contains a class that begins p.first

    And make sure that the file containing that p class="first" tag is linked to the style sheet in the heading, something like

    [link href="../Styles/epub.css" rel="stylesheet" type="text/css"/]

    with angle brackets instead of square ones, of course.

    epub.css can be something else, depending on the name of your style sheet. And of course it must be in the folder labeled Styles. Sigil should create such a folder, and every time you split a file, Sigil will add the necessary link to the next file.

    You might also look at line 27 in your file, to see where things went wrong. Probably it's p class="first", but possibly it's something else.

    ReplyDelete
  17. Still no luck. At the very bottom below the text there is a box that says "find" epub.css is in that box and there is a suspicious looking red box with an X in it to the left.

    All I want is for there to be 2 fonts in the document. One for scripture, one for commentary. If all else fails I will just use italics. I know how to do them.

    ReplyDelete
    Replies
    1. Actually, I have switched almost entirely to using italics. It's easier to read than Courier as displayed on many computers and e-readers. But you really should have a working style sheet, or alternatively put the entire style sheet at the top of every file in the book. Do you really have a style sheet named epub.css, and is it indeed located in the Styles folder of your epub? You can name it anything you like, but the style sheet's name must agree with the pointer that's pointing to it.

      Delete

English only. No links. Keep it clean.