2

I'm formating my fiction ebook using Sigil. For clarity between scenes/POV changes/scene breaks etc, I need to have certain margins between paragraphs. I decided I need three types of margins:

short-break: It's a single blank line between paragraphs. Example:

paragraph 1

paragraph 2

long-break: It's two blank lines between paragraphs. Example:

paragraph 1

paragraph 2

scene-break: It's a line of 3 asterisks preceded and followed by blank lines as follows:

scene 1

                             *       *       *

scene 2

(For some reason the asterisks show up in a grey row in this post, but it doesn't matter. Ignore the grey line.)

Accomplishing all of this in CSS is quite easy; works like a charm in Sigil, in an ebook extension for Firefox, in nearly all EPUB to Kindle conversions I tried, but not so well in epub readers for Android, for example. A lot (but not all) of them just blatantly ignore any margin set up in the CSS, no matter how high the priority of the CSS selector is or whether or not !important is present. I've also read that Kindle DX does not support CSS margins.

I tried using br tags instead of margins, and it does work better in that all Kindle, including DX, seem to read br tags correctly, and apparently more epub readers on Android interpret br tags correctly as well and thus show the margins I want.

However, I am not sure whether br tags or CSS margins are the recommended specification for ebooks, nor do I have any idea how will br tags (or margins, for that matter) behave in an epub reader like Nook or Tolino.

I'm using EPUB v3.0.1.

Suggestions on the best course of action? Thanks!

0

Semantically, the most appropriate element to use for section breaks is HR. (Whether it renders properly on reading systems is another matter).

According to HTML 5, HR is supposed to "indicate a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book". https://www.w3.org/TR/html5/grouping-content.html#the-hr-element

HR isn't necessarily a horizontal rule anymore! (this changed from HTML 4)

You can use CSS on the HR to change it from a horizontal line to extra space/longer margins/background image.

the HTML standard says that br elements must be used only for line breaks that are actually part of the content, as in poems or addresses. br elements must not be used for separating thematic groups in a paragraph.

https://www.w3.org/TR/html5/text-level-semantics.html#the-br-element

In the past I have created classes for p to handle different kinds of section breaks. (I will start using HR instead to do that).

I would expect that BR rendering is not consistent among reading systems. I don't know if some of the older systems like K4 and below will render HR as a horizontal line or if you can override that.

Finally about testing on android readers. I have found that some of the minor reading systems apply their own CSS without regard to the ebook's own css. As a result, css rendering is hit-and-miss. Android-wise, I personally test only on Google Play Books, Kindle and Adobe DE. I'm pretty sure all 3 would render CSS for these section breaks (whether they be hr, p or whatever) properly.

  • Thanks! I didn't think about hr at all. I'll give it a shot and test it across multiple systems. I suppose I shouldn't worry too much about minor reading systems, because as you said odds are that they'll do what they like anyway. As a side question, do you know any sure-fire way to center text? Generally, CSS centering works, but for example Kindle DX doesn't care about centered paragraphs. I read somewhere that wrapping the text to be centered in a span tag with text-align:center may help for some reason, but haven't tried yet. – Nicola Apr 6 '17 at 6:50
  • I have not had problems with using css for centering, but I haven't heard of the Kindle DX issue. I haven't really needed to wrap text in a span tag. Often these problems from centering arise from conflicts between css statements. – idiotprogrammer Apr 16 '17 at 6:23
0

I would suggest that you don't use margins or <br> for your blank lines if you want your book to look the way you described on the widest range of devices. Instead, use <p>&nbsp;</p>. Older devices, especially those that support only mobi format, will drop your CSS margins and ignore extra line breaks. They will even drop <p></p> because it is empty, but I have not yet seen a device drop a line with a non-breaking space, since it is not technically empty.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.