Hiding endnotes after the last page of an epub2

[JSWolf]

Even if it's a multi-line header/title/whatever, I still consider <br/> sloppy.
It just means you didn't take make the effort to code the CSS.

h1 {
text-align: center;
}
.spacet {
padding-top: 2em;
text-indent: 0;
}
.spaceb {
padding-bottom: 2em;
text-indent: 0;
}
_________________
<h1 class="spacet">LOVE AMONG</h1>
<h1>THE</h1>
<h1 class"spaceb">CHICKENS (A FOWL LOVE STORY</h1>
<h1>BY P.G. WOODHOUSE</h1>

Problem solved and very simple CSS code. Plus, the spaces could possibly be used again. For example, if you wanted a blank section break.

<p class="spacet">The beginning of the next section.</p>

The reason for padding instead of margin is that for a section break, it works much better at the end/beginning of a screen then does margin. You get the space passed to the next screen whereas you don't with margin.

[sjfan]

Originally Posted by JSWolf

Even if it's a multi-line header/title/whatever, I still consider <br/> sloppy.
It just means you didn't take make the effort to code the CSS.

h1 {
text-align: center;
}
.spacet {
padding-top: 2em;
text-indent: 0;
}
.spaceb {
padding-bottom: 2em;
text-indent: 0;
}
_________________
<h1 class="spacet">LOVE AMONG</h1>
<h1>THE</h1>
<h1 class"spaceb">CHICKENS (A FOWL LOVE STORY</h1>
<h1>BY P.G. WOODHOUSE</h1>

Problem solved and very simple CSS code. Plus, the spaces could possibly be used again. For example, if you wanted a blank section break.

<p class="spacet">The beginning of the next section.</p>

The reason for padding instead of margin is that for a section break, it works much better at the end/beginning of a screen then does margin. You get the space passed to the next screen whereas you don't with margin.

You're definitely right about <br /> being a code smell to avoid, but splitting the header into multiple h1 tags like this is much worse; using <h1>Love Among<br />The<br />Chickens</h1> is pretty gross, but it's far better than this approach.

The h1/h2/h# tags are header tags: they semantically indicate that the contents are a full header of the given level. You should almost never (arguably never, but there's probably a weird case where it's okay) have two adjacent h1 (or h2, or h3, etc) tags at the same level, and each header tag should include a full header text within it.

When you use 4 different h1 headers like this, you are semantically saying here that there are 4 different headers: you're saying that "LOVE AMONG", "THE", "CHICKENS (A FOWL LOVE STORY", and "BY P.G. WODEHOUSE" are legitimate, distinct headers.

That's nonsense; it's bad enough that it indicates to the human reader that you have 4 different headers (Part 1: "Love Among". Part 2: "The". etc), but it also means that most tools (which understand header fields as intended) will create a table of contents that has:

Table of Contents:
1. Love Among
2. The
3. Chickens (A Fowl Love story
4. By P. G. Wodehouse

Header tags (h1, h2, h3, etc) are meant to indicate that their contents are full, single headers, semantically, and it's definitely worth structuring them that way so that readers aren't confused and automated tools work properly.

The proper solution is to avoid both br tags and multiple headers (see my last post for one approach, though there are many ways to do this).

But if you avoid "br" by doing something like this, you've missed the whole point and made things even worse.

[GrannyGrump]

Would someone please clarify why using <br /> is so reprehensible?
Do you mean only in <hn> headers, or in paras and divs as well?

It seems the simplest way to force a linebreak without putting part of your sentence into a new para or div. (Especially when you are centering a text string, and don't want an awkward break in the "flow".)

Maybe I'm just slow on the uptake.... Educate me, please!

[roger64]

@GrannyGrump

I use the <br/> tag to insert line-breaks when needed. As far as I know, it's correct xhtml...
https://www.w3schools.com/tags/tag_br.asp

[GrannyGrump]

@roger --- I use it often myself, and this thread is the first time I recall that anybody recommended to avoid that. Maybe there is a secret magic voodoo reason ???

[davidfor]

Originally Posted by GrannyGrump

@roger --- I use it often myself, and this thread is the first time I recall that anybody recommended to avoid that. Maybe there is a secret magic voodoo reason ???

It's a code style thing. It is valid code, but it is a bit ugly and there are generally better ways to do it. The heading example used here is about the only time I would use it. And then only under duress

[GrannyGrump]

So... if I want to style, for example, a "For Sale" sign.

I should style it as such:
<div class="centrd">FOR SALE</div>
<div class="centrd">FRESH STRAWBERRIES</div>
<div class="centrd">ENQUIRE WITHIN</div>


Rather than
<div class="centrd">FOR SALE<br />
FRESH STRAWBERRIES<br />
ENQUIRE WITHIN</div>


I simply do not comprehend why the <br /> is any uglier than multiple <div>s. Plus, you have what might be considered extraneous tags...

Educate me some more, please?

[Turtle91]

I think the main aversion to <br/> is using them to create space between/before/after paragraphs.

Bad:

<p>Last paragraph in a section with a space following.<br/><br/></p>

<p><br/><br/>First paragraph in a section with space preceeding.</p>

<p><br/></p>  'empty line

That shouldn't imply that it is overall bad coding. The header example above is a perfect situation where it's better to use <br/> than multiple <h#>. I would actually format the header issue slightly differently - just so I could apply slightly different formatting to the author line:

CSS:
h1 {margin-top: 2em; margin-bottom: 2em; text-align: center;}
h1 span {display:block; font-size:.8em}

Text:
<h1>LOVE AMOUNG<br/>the<br/>CHICKENS<span>by P. G. Wodehouse</span></h1>

or

CSS:
h1 {margin-top: 2em; margin-bottom: 2em; text-align: center;}
p.auth {font-size:.8em; margin-bottom: 2em; text-align: center}

Text:
<h1>LOVE AMOUNG<br/>the<br/>CHICKENS</h1>
<p class="auth">by P. G. Wodehouse</p>

The first example would keep the "author" line right below the title and apply all the other formatting of the <h1>, while the second example would have a 2em space between the title and author... pick your poison.

In fact, if you want to create a linefeed within the same container - without creating a new container - it is appropriate to use <br/>. GrannyGrump's use of <br/> inside of the <div> is much better/cleaner than the multiple <div> statements. The <br/> is used as a linefeed without having to reapply the container's formatting (margin's, padding, indent, etc), it simply continues on the next line. According to W3Schools "Use the <br> tag to enter line breaks, not to separate paragraphs."

Cheers,

[JSWolf]

Originally Posted by GrannyGrump

So... if I want to style, for example, a "For Sale" sign.

I should style it as such:
<div class="centrd">FOR SALE</div>
<div class="centrd">FRESH STRAWBERRIES</div>
<div class="centrd">ENQUIRE WITHIN</div>


Rather than
<div class="centrd">FOR SALE<br />
FRESH STRAWBERRIES<br />
ENQUIRE WITHIN</div>

I simply do not comprehend why the <br /> is any uglier than multiple <div>s. Plus, you have what might be considered extraneous tags...

Educate me some more, please?

Multiple divs like that are ugly. Why would you use them where p is best?
Here's good code...

.noindent {
text-indent: 0;
}
div.center {
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}

<div class="center">
<p class="noindent">FOR SALE</p>
<p class="noindent">FRESH BLUEBERRIES</p>
<p class="noindent">INQUIRE WITHIN</p>
</div>

[Hitch]

Originally Posted by GrannyGrump

So... if I want to style, for example, a "For Sale" sign.

I should style it as such:
<div class="centrd">FOR SALE</div>
<div class="centrd">FRESH STRAWBERRIES</div>
<div class="centrd">ENQUIRE WITHIN</div>


Rather than
<div class="centrd">FOR SALE<br />
FRESH STRAWBERRIES<br />
ENQUIRE WITHIN</div>


I simply do not comprehend why the <br /> is any uglier than multiple <div>s. Plus, you have what might be considered extraneous tags...

Educate me some more, please?

There is also the reality that not all reading systems will necessarily recognize breaks. Most do, no argument. But not all.

Does anyone else remember some kerfuffle, over this, about...5+ years ago? Some eReader that didn't honor the multiple breaks?

Hitch

[JSWolf]

Originally Posted by Hitch

There is also the reality that not all reading systems will necessarily recognize breaks. Most do, no argument. But not all.

Does anyone else remember some kerfuffle, over this, about...5+ years ago? Some eReader that didn't honor the multiple breaks?

Hitch

Do you recall that Reader it was?

[Turtle91]

Originally Posted by JSWolf

Multiple divs like that are ugly. Why would you use them where p is best?
Here's good code...

.noindent {
text-indent: 0;
}
div.center {
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}

<div class="center">
<p class="noindent">FOR SALE</p>
<p class="noindent">FRESH BLUEBERRIES</p>
<p class="noindent">INQUIRE WITHIN</p>
</div>

That is just as bad as worse than the multiple <div>s. If you insist on having separate paragraphs...which are unnecessary and semantically incorrect...then at most you would use:

div.center   {margin:1em auto}
div.center p {text-align:center; text-indent:0}

<div class="center">
<p>FOR SALE</p>
<p>FRESH BLUEBERRIES</p>
<p>INQUIRE WITHIN</p>
</div>

However, you would need to expand your styling of div.center p to remove all the unwanted formatting of your normal <p>....so it is much simpler/cleaner to use:

div.center {margin:1em auto; text-align:center; text-indent:0}

<div class="center">FOR SALE<br/>FRESH BLUEBERRIES<br/>INQUIRE WITHIN</div>

It would certainly throw a (minor) wrench in the argument if Hitch is correct about some readers not honoring <br/>....but the back of my noodle says that had to be those readers not honoring <p><br /></p> (or any blank line - thus the bad technique of using <p>& nbsp ;</p>), they still render <br/> when properly used.

[Hitch]

Originally Posted by JSWolf

Do you recall that Reader it was?

Jon:

If I remembered, I wouldn't be asking if anyone else did. ;-)

Hitch

[GrannyGrump]

Originally Posted by JSWolf

Multiple divs like that are ugly. Why would you use them where p is best?
Here's good code...
[...SNIP]

Oh, really now, Jon. ...

To my mind, MULTIPLE DIVS and MULTIPLE P's are equally ugly.

[Hitch]

Originally Posted by JSWolf

Multiple divs like that are ugly. Why would you use them where p is best?
Here's good code...

.noindent {
text-indent: 0;
}
div.center {
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}

<div class="center">
<p class="noindent">FOR SALE</p>
<p class="noindent">FRESH BLUEBERRIES</p>
<p class="noindent">INQUIRE WITHIN</p>
</div>

Now, Jon:

C'mon. You know that I tend to agree with you about stringency in coding, BUT...there is no advantage or preference, or anything like that, in having multiple divs over multiple paragraphs, or vice-versa.

Cleanliness in coding means elegance, as well as thrift--being concise, and "correct" in what you code. There is no standard, no "school" of HTML/CSS that would ever say that X divs over X ps is better. The "good" versus "bad" is viewed based not on personal opinion (although, surely, that plays into it in some discussions, unfortunately), but based on other factors.

In the web world, elegance in coding is based on concision and functionality. In other words, being concise is worthless, if the code only works in two out of 5 browsers. We can all, I'm sure, remember being impressed with what could be done with HTML5, compared to what we would have had to do a mere 5 years earlier to achieve the same ends.

In ebooks, the same is true. I cannot think of a single device, not even Kindles, that would display multiple ps differently than multiple divs, or vice-versa. Given that there is no expert, on HTML, that would claim one is superior to the other, then claiming that ps are better than divs is, sweetie, just downright silly. They're not. In fact, I could probably construct an "argument" for either of the positions, that "divs" are better, or that ps are better.

The discussion about empty paragraphs as "bad" came about simply because there are several devices that just won't honor them, Kindle amongst them. And no matter what any ePUB-ficionado claims, let's not be pedantic; Amazon's might is absolutely affecting the reality of what's "good" coding. I know that somewhere in time, a device did not recognize multiple breaks inside...something. THAT, I can't recall, but as a consequence, my guys know that using breaks to create coding, unless there's a good reason, is a "talking-to" offense. (They get to suffer hearing me discuss it with them.) That's because typically, they're used as a shortcut, rather than an appropriate use (4 lines of a song, let's say, or yon Blueberries sign--the only ones in the ePUB. In that instance, I would hardly quibble over my guys using the break element, rather than setting up 4 lines of a new para class).

How many people use hr's, for decoration? Between a heading, say, and the body of a book? Dozens? Hundreds? Thousands? Yet, arguably, that use is wrong--an hr is supposed to be a "thematic break," not a decoration. Should we horsewhip those who use it?

Divs and ps are both block-level elements; they can contain other elements, and frequently do. It's not like you're talking the difference between one element that's a block and one that's an inline, here. A div is a container, pretty much--and arguably, for all intents and purposes, so is a paragraph. A paragraph contains text; it can contain images, etc.

I really don't think, Jon, that there's a good argument for saying that using one over the other is "superior." Sure, semantically, you could try to argue that the lines in the Blueberries sign are more akin to paragraphs (of text) than divs; but if you go down that road, really, you'd be forced to take the position that it's genuinely a paragraph of text--with line breaks, and thus, be forced to say that a single para, with the break tag deployed, is the "better" coding answer.

See what I mean?

Hitch