I'm not using br tags for margins. I use <br /> to generate a blank line in the middle of the text.

That's a block margin. Margins aren't only at the sides of the page. Just use a style class with margin-top:1.2em (or whatever your line-height is, 1.2 is the default). I know a lot of people misuse br tags line this (or, worse, use <p>&nbsp;</p>), but it's a bad habit to adopt.

That's a block margin. Margins aren't only at the sides of the page. Just use a style class with margin-top:1.2em (or whatever your line-height is, 1.2 is the default). I know a lot of people misuse br tags line this (or, worse, use <p>&nbsp;</p>), but it's a bad habit to adopt.

Could you expand? In short, to insert a line break, what should I do? (in html and in epub)

<p class="flush">This paragraph will appear with a blank line above [...]

Ew. I've seen this stated a couple of times, but not been able to work out _why_.

What is the reason for preferring this approach to an "empty paragraph" / line break tag / etc? Doesn't this break the principle that HTML should be semantic, and that it should degrade gracefully?

Suppose you do this on a website. Suppose you also have some styling that unfortunately makes it unreadable for me on my device - due to colour, screen width, font choice / size or something. In my case, I have a netbook with an 800px wide screen - which is too narrow for some sites. So I disable styles (View -> Page style -> None).

Semantically, there is not a blank line, there is, at most, some "break" in the story, a change in scene, an unnamed section break, whatever. And to mark this you can either:

Code:

<p>This is a normal paragraph.</p>
<p class="scene-break">This is a paragraph after a break.</p>

and put some top margin in p.scene-break, or:

Code:

<p>This is a normal paragraph.</p>
<div class="scene-break"/>
<p>This is a paragraph after a break.</p>

and style the div.scene-break to have some height, margin, content, etc. (depending on the renderer, you may have to put an &nbsp; inside).

And of course there will be cases where this is not rendered exactly the same with and without CSS, that's the whole point of CSS and content/formatting separation. Anyway, this is ePUB, and ePUB readers are required to support CSS.

Good point. I think <div class="break">&nbsp;</div> is the lesser evil, but then epub gets held to different standards than the Web. (And this is a point of divergence from the web; there's no universally endorsed best practise for this because by default websites will separate _all_ paragraphs with a blank line).

More relevantly: I found a related thread. Summary: test your scene breaks carefully on ADE, because it can potentially re-arrange paragraphs in a way that will insert extra blank lines at the end of pages, making it impossible to see where the actual scene breaks are. (Read the thread to work out what you need to test).

With the <div> method, you have to use CSS to ensure that the <div> doesn't end up at the end of a page. If margin-top avoids that problem, I guess that makes it simpler to use. (It also suggests you shouldn't use margin-bottom to create scene breaks... but I expect my ignorance is showing here).

ghostyjack: That's the same as the second option Jellby presented. The only difference is Jellby said "div" instead of "p" - after all, the blank line isn't actually a paragraph. Which sounds like a good idea to me, but I don't know whether it would ever matter.

Which has no content. Inserting a paragraph and/or a non-breaking-space is adding content which is not contained in the original document.

The div above doesn't add anything and can be displayed (or not) in any manner that CSS describes. The structure is marked up in his example, but the display of a blank line is not forced.

If someone wanted to display scene breaks with a set of diamonds, or asterisks or a horizontal line or an image of a giant dinosaur, there would be no way to do it in any example that contains a plain paragraph, or a plain line break.

Actually the clearest way of doing it would probably be
<div class="scene">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
<div class="scene">
etc.
with
div.class + p {
text-indent: 0
}
But I don't think in practice this really gains anything over merely indicating the semantics with a class change. Changing a class is a perfectly valid way of indicating that one block has different semantics to another.