Mobileread
html tags always have a class?
#1  hobnail 04-18-2020, 06:16 PM
When I edit books that I buy or download from Project Gutenberg they always have classes on almost every html tag. For example, every p tag has the class pindent or some such.

Then the CSS will have something like ".pindent { text-indent ...}". When I'm fixing a book, in the CSS I'll just have a plain p with the necessary formatting; "p { text-indent: ...}"

Is there some reason, for compatibility, safety, etc. for them doing that?
Reply 

#2  Turtle91 04-18-2020, 08:46 PM
They probably had some template somewhere...or that's how they were told to do it... or they had some automated software that did it that way and they didn't know any better. There is no requirement to have them.

It ultimately boils down to technique, but having extra code bloat causes the renderer to have to decode all that extra styling. This slows down the display of your book (much more noticeable on older devices) and could ultimately cause the book to be unreadable.

I always remove those unnecessary classes.

I've seen some ridiculous tags like:
<p class="para">
<i class="italic">
<b class="bold">

For a nice 'clean' code, I define the standard styling, then only add classes to those special situations where they are different than the standard.

eg:
Code
CSS
p {margin:0; text-indent:1.2em}
p.banner {margin:2em 0; text-indent:0; text-align:center; font-weight:bold}
HTML
<p>Standard paragraph.</p>
<p>Standard paragraph.</p>
<p>Standard paragraph.</p>
<p>Standard paragraph.</p>
<p class="banner">Paragraph with special formatting.</p>
<p>Standard paragraph.</p>
<p>Standard paragraph.</p>
<p>Standard paragraph.</p>
<p>Standard paragraph.</p>
Reply 

#3  hobnail 04-19-2020, 02:53 PM
Thanks. That's what I do as well. I also use combinators to keep the html clean; hopefully the ereaders can handle those. E.g., "p { text-indent: 1.5em; } h2 + p { text-indent: 0; }"
Reply 

#4  Turtle91 04-20-2020, 02:15 PM
Quote hobnail
Thanks. That's what I do as well. I also use combinators to keep the html clean; hopefully the ereaders can handle those. E.g., "p { text-indent: 1.5em; } h2 + p { text-indent: 0; }"
I use those quite extensively as well....BUT.... I am not confined to being usable on multiple platforms. My ereader handles the css, others may not. Just make sure you test your CSS on your target devices.

Cheers,
Reply 

#5  JSWolf 04-20-2020, 02:18 PM
Quote hobnail
When I edit books that I buy or download from Project Gutenberg they always have classes on almost every html tag. For example, every p tag has the class pindent or some such.

Then the CSS will have something like ".pindent { text-indent ...}". When I'm fixing a book, in the CSS I'll just have a plain p with the necessary formatting; "p { text-indent: ...}"

Is there some reason, for compatibility, safety, etc. for them doing that?
It's because the publishers have no idea what the phrase "keep it simple" means. They do very stupid stuff a lot of the time including things like <p class="tx">, Another stupid thing they do sometimes is leave in hundreds of unused CSS classes in the CSS.

There is no reason they cannout use <p> for the most use paragraph format.

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

That works very well and it's what I use for <p>.
Reply 

Today's Posts | Search this Thread | Login | Register