CSS question: breaks and indents

[ignaz wrangel]

Hi everybody I'm a css and epub beginner.

My source consists of many continuous blocks of text whose paragraphs are marked by an indent. I wanted the first paragraph each block to be un-indented so I added some css

p {
  margin: 0; }
p + p {
  text-indent: 1em; }

But the source also includes paragraphs separated by line breaks, and this is where I had trouble. Flightdeck says that <br /> is not allowed in epubs, and sigil wanted to clean up the html by wrapping each one in <p> tags. Of course this meant that every first paragraph in a block was now preceeded by a <p> and got indented.

I found a solution already which is to wrap all the break tags in div tags, but my question is: is this a reasonable solution? What is the normal approach?

Should all of these blocks be contained by tags?

Should I add a class to every first paragraph of every block that follows another?

Thanks for any tips

[Turtle91]

Adding all those tags will work but it is not considered "in good form"... and it is a whole heck of a lot of work...lol

Flightcheck is telling you it doesn't like <br /> all by itself...it needs to be wrapped in a different tag <p><br /></p> or <div><br /></div>...but there is a much better way to organize your paragraphs:

Let Sigil wrap each paragraph in a paragraph tag - that's what they are for. Don't use <br /> tags to give spaces between paragraphs.

Then you can style the paragraphs however you want using a CSS stylesheet. For example:

<p class="first">This is the first paragraph. It has a zero indent on the first line.</p>
<p>This is the second paragraph. It has a 1.2em indent by default.</p>
<p>This is the third paragraph. It has a 1.2em indent by default.</p>
<p>This is the fourth paragraph. It has a 1.2em indent by default.</p>


CSS:
p       {text-indent:1.2em}
p.first {text-indent:0}

You can further style your paragraphs with extra space and no indent (eg a scene break in a chapter) by giving it it's own class:

<p class="SecBrk">This is the first paragraph after a scene break. It has a zero indent on the first line and extra space before the paragraph.</p>
<p>This is the second paragraph. It has a 1.2em indent by default.</p>

CSS:
p.SecBrk {text-indent:0; margin-top:2em}

The final product would look something like this:

<p class="first">This is the first paragraph. It has a zero indent on the first line.</p>
<p>This is the second paragraph. It has a 1.2em indent by default.</p>
<p>This is the third paragraph. It has a 1.2em indent by default.</p>
<p>This is the fourth paragraph. It has a 1.2em indent by default.</p>
<p class="SecBrk">This is the first paragraph after a scene break. It has a zero indent on the first line and extra space before the paragraph.</p>
<p>This is the second paragraph. It has a 1.2em indent by default.</p>
<p>This is the third paragraph. It has a 1.2em indent by default.</p>
<p>This is the fourth paragraph. It has a 1.2em indent by default.</p>


CSS:
p        {text-indent:1.2em}
p.first  {text-indent:0}
p.SecBrk {text-indent:0; margin-top:2em}

In my opinion you should define the default paragraph the way you want the vast majority of your paragraphs to look, and save the specific classes for specific paragraphs that look different. That means a lot less work for you when you are creating the epub, and a lot less work for the reader/app when it is trying to display your book (thus it is a smoother/faster experience for the end user.)
Cheers!

[theducks]

Originally Posted by ignaz wrangel

Hi everybody I'm a css and epub beginner.

My source consists of many continuous blocks of text whose paragraphs are marked by an indent. I wanted the first paragraph each block to be un-indented so I added some css

p {
  margin: 0; }
p + p {
  text-indent: 1em; }

But the source also includes paragraphs separated by line breaks, and this is where I had trouble. Flightdeck says that <br /> is not allowed in epubs, and sigil wanted to clean up the html by wrapping each one in <p> tags. Of course this meant that every first paragraph in a block was now preceeded by a <p> and got indented.

I found a solution already which is to wrap all the break tags in div tags, but my question is: is this a reasonable solution? What is the normal approach?

Should all of these blocks be contained by tags?

Should I add a class to every first paragraph of every block that follows another?

Thanks for any tips

Flightcrew is simply reminding you No Nekid Br allowed

You could include it inside the last </p
put it in a <div pair to prevent tripping your p+p, that might be unnecessary as the div needs to just contain a nbsp for a 1 liner break
or turtle91 style it with its own class which also allows for full
CSS control . < I like this one. I am not trying to save a few dozen bytes

[ignaz wrangel]

OK thanks, I think that’s cleared it up for me.

The p.scenebreak approach is best.

theduck: I see that nbsp inside <div> before </p> works as you say, That makes it a little neater.

Incidentally I’m gonna stick with the <div> approach for this project. I’m correcting paragraph structure in Sigil’s book mode. Ctrl+return splits the paragraph and inserts <p><br /></p> - and I can find/replace or regex this into shape when I’m done. I would use the other approach if there was a customisable keystroke to modify the <p> tag like the header keystrokes do. Clips won’t work quite like this unless I’m mistaken.

[ignaz wrangel]

in fact I could even use regex to modify the <p> that follows the <p><br /></p>. Best of both worlds!

[JSWolf]

Originally Posted by ignaz wrangel

in fact I could even use regex to modify the <p> that follows the <p><br /></p>. Best of both worlds!

Nope. The new Kindle rendering engine does not line that. Use a class with a margin be it top or bottom to get the space/

[ignaz wrangel]

What I have in mind is to use the break inserted by sigil (<p><br /></p>) as a marker to locate the paragraphs that follow it and add a class to their <p> tag, the marker is then deleted. Is this what you mean?

something like

<p><br /></p>[^<]*<p\b[^>]*>

replace with:

<p class=“scenebreak”>

[JSWolf]

Originally Posted by ignaz wrangel

What I have in mind is to use the break inserted by sigil (<p><br /></p>) as a marker to locate the paragraphs that follow it and add a class to their <p> tag, the marker is then deleted. Is this what you mean?

something like

<p><br /></p>[^<]*<p\b[^>]*>

replace with:

<p class=“scenebreak”>

Sort of.

If you have...

<p><br /></p>
<p>Some paragraph text.</p>

then it would be best to be...

<p class="scenebreak">Some paragraph text.</p>

That would make the code even neater and would mean that you can also include a text indent of 0.

[jhowell]

Originally Posted by ignaz wrangel

in fact I could even use regex to modify the <p> that follows the <p><br /></p>. Best of both worlds!

Originally Posted by JSWolf

Nope. The new Kindle rendering engine does not line that. Use a class with a margin be it top or bottom to get the space/

Sorry for the off topic comment here, but I don't think this is true. Kindle enhanced typesetting ignores a paragraph containing only a non-breaking space. I haven't heard of any issues with using a br tag.

[ignaz wrangel]

Originally Posted by JSWolf

Sort of.

If you have...

<p><br /></p>
<p>Some paragraph text.</p>

then it would be best to be...

<p class="scenebreak">Some paragraph text.</p>

That would make the code even neater and would mean that you can also include a text indent of 0.

the regex I posted produces that, it selects the marker and the following opening <p>, and replaces the lot with <p class="scenebreak">, the rest just remains in place ("some paragraph text</p>")

[JSWolf]

Originally Posted by jhowell

Sorry for the off topic comment here, but I don't think this is true. Kindle enhanced typesetting ignores a paragraph containing only a non-breaking space. I haven't heard of any issues with using a br tag.

My mistake. But it is bad form and poor code to use a <br/> between paragraphs or even as a section break.

[JSWolf]

Originally Posted by ignaz wrangel

the regex I posted produces that, it selects the marker and the following opening <p>, and replaces the lot with <p class="scenebreak">, the rest just remains in place ("some paragraph text</p>")

You do have a bug in your regex.

<p><br /></p>[^<]*<p\b[^>]*> <---incorrect

<p><br /></p>[^<]*<p> <---correct

You do not want to replace the following <p> willy nilly if hit has a class. You want to only replace the br line and the p only if the <p> is just a plain <p>. If it has a class and you want to replace the p and the class, run the regex again specifying the specific class. Then you can see if you have any more br lines left and how you want to deal with them.

[Turtle91]

Originally Posted by ignaz wrangel

What I have in mind is to use the break inserted by sigil (<p><br /></p>) as a marker to locate the paragraphs that follow it and add a class to their <p> tag, the marker is then deleted. Is this what you mean?

something like

<p><br /></p>[^<]*<p\b[^>]*>

replace with:

<p class=“scenebreak”>

Wow! For a CSS/ePub beginner your reg-fu is strong!

[ignaz wrangel]

JSWolf: Thanks, you're right. I should run a search for <p[^>] first before I do anything anyway.

Turtle91: Thanks. I've already left a swathe of destruction behind me in my short career.

[Hitch]

Originally Posted by ignaz wrangel

JSWolf: Thanks, you're right. I should run a search for <p[^>] first before I do anything anyway.

Turtle91: Thanks. I've already left a swathe of destruction behind me in my short career.

If you're not destroying stuff while learning regex-fu, you're not trying to learn hard enough. ;-) I'm bloody NOTORIOUS for it.

Hitch