Problem with <br /> tags

[Pablo]

I am using Sigil 0.2.0.
When importing html files, <br /> tags get converted to

<p> <br /> </p>

Is this correct? When I load the resulting epub in my Sony 505, the blank line is lost, unless I put two consecutive <br /> tags, in which case I get one blank line.

Is it illegal to have an isolated <br /> tag in one line in epub?

[charleski]

Originally Posted by Pablo

Is it illegal to have an isolated <br /> tag in one line in epub?

Yes. Sigil is correctly wrapping them in a block tag.

You shouldn't be using br tags to set margins anyway - do that in the css.

[Pablo]

Originally Posted by charleski

Yes. Sigil is correctly wrapping them in a block tag.

You shouldn't be using br tags to set margins anyway - do that in the css.

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

[charleski]

Originally Posted by Pablo

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.

[Pablo]

Originally Posted by charleski

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)

[charleski]

I typically use the following css:

.indent {
margin: 0;
text-indent: 1em
}

.flush {
margin-top: 1.25em;
margin-bottom: 0;
text-indent: 0
}

Then the text goes:
<p class="indent">This paragraph has the first line indented. Lorem ipsum dolor sit amet, id euismod, consectetuer nec aliquam. Sagittis amet, nec nunc, qui accumsan turpis. A tempus, class aliquam tempor, eget wisi. Enim duis eros, ut eros. Mauris ut lectus, lorem semper, leo ut convallis.</p>

<p class="flush">This paragraph will appear with a blank line above it and without an indent. Adipiscing posuere, lobortis nec nec, ipsum iaculis. Aliquam posuere dolor, leo nulla, nulla mi. Wisi ut commodo, justo tellus vel. Vitae occaecati platea. Nam a sapien, porta lacus platea, pellentesque eleifend.</p>

[pietvo]

Originally Posted by Pablo

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

A line break is <br /> (or in older HTML <br>) but a line break is different from a blank line.

[Pablo]

Originally Posted by charleski

I typically use the following css:

.indent {
margin: 0;
text-indent: 1em
}

.flush {
margin-top: 1.25em;
margin-bottom: 0;
text-indent: 0
}

Then the text goes:
<p class="indent">This paragraph has the first line indented. Lorem ipsum dolor sit amet, id euismod, consectetuer nec aliquam. Sagittis amet, nec nunc, qui accumsan turpis. A tempus, class aliquam tempor, eget wisi. Enim duis eros, ut eros. Mauris ut lectus, lorem semper, leo ut convallis.</p>

<p class="flush">This paragraph will appear with a blank line above it and without an indent. Adipiscing posuere, lobortis nec nec, ipsum iaculis. Aliquam posuere dolor, leo nulla, nulla mi. Wisi ut commodo, justo tellus vel. Vitae occaecati platea. Nam a sapien, porta lacus platea, pellentesque eleifend.</p>

Thank you very much!!!

[sourcejedi]

Originally Posted by charleski

I typically use the following css:

.flush {
margin-top: 1.25em;
margin-bottom: 0;
text-indent: 0
}

Then the text goes:

[...] leo ut convallis.</p>

<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).

Now I miss your "block margin".

[Jellby]

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:

<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:

<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.

[sourcejedi]

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]

I'm self-taught with HTML/XHTML so haven't been taught any "best practice" techniques.

I generally use <p>&nbsp;</p> as a scene break when I have "margin: 0" in the p tag in the CSS file. This works, what's the problem with it?

[sourcejedi]

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.

[capidamonte]

No, he didn't. He wrote:

<div class="scene-break"/>

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.

[charleski]

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.