Point of "<br class="calibre1"/>"?

[JSWolf]

Originally Posted by Turtle91

yup...what I said...lol

I still have the question: 'Where are you going to use class="copy" anywhere else in your epub other than in your <div class="copy">???'

You could certainly use the name somewhere else, but then the class name wouldn't make sense. So you could reduce your css a bit into:

p {
  margin-top: 0;
  margin-bottom: 0;
  text-indent: 1.2em;
}

div.copy p {
  text-indent: 0;
  font-size: small;
  margin-top: 0.8em;
}

Slight mistake. There should be no margin-top in the div.copy p class. That would make the lines that should not have space between them have space.

[hobnail]

Also note that you can have multiple classes given in the class= thing in your html. I have common block stuff in the div.block css, then I have different classes for letter, verse, etc. In my html I then use div class="block letter". That way you can factor out the common/repeated stuff and put it in the div.block css.

One thing I've always wondered about is how doing it that way compares with using nested divs; e.g. a div class="block" and inside it a div class="letter". Nested divs seems to be more popular.

[Jellby]

Originally Posted by hobnail

One thing I've always wondered about is how doing it that way compares with using nested divs; e.g. a div class="block" and inside it a div class="letter".

If you specify text-indent in both classes, for instance, a nested div will add the indents, while a multi-class div will keep only the one with higher preference.

[hobnail]

Originally Posted by Jellby

If you specify text-indent in both classes, for instance, a nested div will add the indents, while a multi-class div will keep only the one with higher preference.

Assuming I've done this correctly I'm seeing the inner div overriding the outer div. It was the same with indent2 specified as div.indent2. Regardless, the nested divs make it easier to figure out what's going on; no need to figure out if there's any precedence involved.

Anyhow, thanks; I'm glad to know that there is a difference.

.indent2 {
    text-indent: 2em;
}

div.indent1 {
    text-indent: 1em;
}

  <div class="indent2">
    <p><b>indent2</b> Dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
  </div>

  <div class="indent2">
    <div class="indent1">
      <p><b>div indent2, div indent1</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
  </div>

  <div class="indent1">
    <div class="indent2">
  <p><b>div indent1, div indent2</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
  </div>

<div class="indent2 indent1">
  <p><b>div indent2 indent1</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>

<div class="indent1 indent2">
  <p><b>div indent1 indent2</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

[Turtle91]

I've seen nested divs used mostly in things like headers when they want an underline to match just the text in the div...or something similar. I usually delete all of that and use a simple header <h3> with the equivalent css to achieve the same result.

My css sheet might end up being slightly longer - some minimal duplication - but it makes it a lot easier for me to follow what is being done at each point. To each their own!

[JSWolf]

Originally Posted by Turtle91

I've seen nested divs used mostly in things like headers when they want an underline to match just the text in the div...or something similar. I usually delete all of that and use a simple header <h3> with the equivalent css to achieve the same result.

My css sheet might end up being slightly longer - some minimal duplication - but it makes it a lot easier for me to follow what is being done at each point. To each their own!

I agree. Most chapter headers don't need this extra code. Most chapter headers just need one line.

[Jellby]

Originally Posted by hobnail

Assuming I've done this correctly I'm seeing the inner div overriding the outer div.

Hmm... I guess I was thinking of margins instead of indents.

[hobnail]

Originally Posted by Jellby

Hmm... I guess I was thinking of margins instead of indents.

Heh, that's exactly what I was wondering.

[Tex2002ans]

Originally Posted by Turtle91

Warning - channeling my inner Tex here

Originally Posted by Jellby

Personally, I prefer to be more specific in my CSS, so I know what each class is intended for, and if I later use <p class="copy"> or <em class="copy"> for something different, the generic ".copy" selector won't bite me in back.

Specificity is good.

Like you said, less chance of rogue errors biting you in the butt later.

(But if you keep your code very simple... there's little chance of complications happening anyway.)

If I do <div> and <p> with the same class names, I split it like:

• <div class="copy">
  
  • Handles the surrounding "box"-specific stuff.
    
  • Like top/bottom/left/right margins.
    
• <p class="copy">
  
  • Handles the text-specific stuff.
    
  • Like text-indent, text-align, font-size, [...].
    

Originally Posted by DaveLessnau

In almost every epub that I play with, I see things like:

<br class="calibre1"/>

[...] But, what's the point? Is the class merely to set the size of the break inserted?

Completely depends on the file.

99% of the time, it's crap where the person pressed ENTER ENTER ENTER between paragraphs or did "forced line breaks" in their original document.

<1% of the time, it might be a valid use-case, where someone correctly used "soft breaks".

Valid Uses of Line Breaks?

Very few, if any.

Personally, I avoid almost all <br/>... but here's a few I'd put in the "maybe keep" category:


1. Multi-line Headings

<h2>Chapter 1:<br/>The Beginning</h2>

This allows:

• 1st line = Chapter Number
• 2nd line = Chapter Title

(See linked topic above for more details/tricks.)

2. Multi-line Attribution

<p>This is the best quote.</p>

<p class="attribution">—Tex the Great, <i>The Greatest Book Ever</i><br/>
(City: Publisher, 2022), pp. 123–456.</p>

More readable since both lines are "similar length" + you can make skimming easy because:

• 1st line = Author + Title
• 2nd line = Publisher + Pages

3. Poetry

<p class="poem">This is a poem,<br/>
that continues<br/>
to a third line.</p>

Similar to what we just discussed yesterday in "Poetry Classes: Blockquote vs Div?". (Personally, I wouldn't use the <br/> method... but it is one valid way of doing it.)

4. Addresses

<p>Send your package to:</p>

<p>123 Main St.<br/>
City Name, ST<br/>
99999</p>

5. Table Headers (especially Units)

<table>
	<tr>
		<th>Really Long Name</th>
		<th>Long<br/>Distance<br/>(Miles)</th>
		<th>Cost<br/>per<br/>Mile<br/>($)</th>
		<th>Temperature<br/>(°F)</th>
	</tr>
	<tr>
		<td>Tex Example</td>
		<td>99.9</td>
		<td>2.22</td>
		<td>102.2</td>
	</tr>
</table>

With the breaks, those number cells will be shorter (one-word wide).

Without the breaks, the table could be super wide... hurting readability.

For easier skimming, it's also sometimes easier to have Units separated onto their own lines.

... It all depends on the table/data though. (For more info on that, see 2021: "Formatting tables best practices".)

Best Way to Remove Breaks?

What I do is a pass with this regex:

Search: <br ?[^>]*/>
Replace: <---- Absolutely NOTHING (or a SPACE)

and go through the book, replacing one-by-one while staring at Preview to see if it's actually important.

Where is 99% of the <br/> Crud?

It's leftover cruft like:

<ul>
	<li>List</li>
	<li>List</li>
	<li>List<br/></li>   <---- Remove
</ul>

<p>End of Chapter 1.<br/></p> <---- Remove

<h2>Chapter 2</h2>

[...]

<p><br /></p>    <---- Remove
</body>
</html>

where someone accidentally left invisible "ENTER"s at the end of their chapters/paragraphs.

- - - - -

Side Note: This last author I worked with, I had to teach him about "Show All" in Word/LibreOffice, so he could visibly see those extra:

• Hard Enter = ¶ (pilcrow)
• Soft Enter = ↵

Then I taught him how to use Find&Replace to eliminate them, and replace with Styles.

This makes the DOCX/ODT infinitely easier to clean+convert... but most people don't do this, hence lots of garbage introduced into the ebooks.

Originally Posted by Turtle91

Please don't get overwhelmed by our little disagreements... it is mostly just minor differences in technique. Both will get you what you want and look the same way...

Originally Posted by Turtle91

my techniques just happen to be better in every way!

Now you're sounding like a certain canine friend of ours!!!

There's only one true way to do it—his way—and if you deviate from it by a nanometer, he'll pounce!!!

[Quoth]

<br/> Appears automatically in my chapter headings if I do newline rather than regular enter (which makes a new paragraph) so as to force a two line heading rather than random wrap.

It means any auto TOC generation only has one entry for the chapter rather than two; the renderer auto spaces the two lines according to the font metrics/size.

But I can't think of any other situation that uses <br/> that's not better done some other way. Again the goal is to not edit the ebook, but only source, the exception being tweaking CSS for images.

I also run search & replace on the WP source so that:
There are only single spaces ever.
No leading spaces
No trailing spaces.
No empty paragraphs
(In LO, $[ ], [ ]^ and ^$)

You'd have to deliberately type a newline as "enter" is always a new paragraph.

[CubGeek]

Originally Posted by DNSB

I doubt they are connected to the Mobi case mentioned since I see them in the middle of book titles to prettify the line breaks in a long book title for example.

One of the many reasons I now use KindleUnpack to convert azw3/KF8 to epub is that the css is not munged in the process.

Ahhh. Thanks for mentioning "KindleUnpack"! I've not heard of this, I'll look into it. Cheers!

[Hitch]

Originally Posted by Tex2002ans

Now you're sounding like a certain canine friend of ours!!!

There's only one true way to do it—his way—and if you deviate from it by a nanometer, he'll pounce!!!

Canis Pedantus?

Hitch