View Single Post
Old 01-31-2024, 02:30 PM   #28
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 80,237
Karma: 148951761
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Turtle91 View Post
Hmmm…. I think I’m just going to say “yadda, yadda” whenever I put up example code…

Again, the intent of the example was for showing the differences between inline styling, classes on everything, and basic tags with classes only on special cases. Y’all can certainly code however you want to! lol

As for having to override the bare tag settings when you have special classes… umm, yeah… that’s what you are supposed to do. When you have a special class, then that class is listed after/below the basic tag so you take advantage of cascading style. Can you miss something, sure, I’ve missed a bunch of things over the years. That doesn’t change the idea of setting a base tag with your 98.7% solution.

Real, the problem is, with nested div/font-size shrinking. So, be aware of it when coding. I rarely use a nested div… when I do, I don’t set the font size in the parent div… it really shouldn’t be there in the first place. I will set a default <div> with styling of the div (basic margins, borders, corners, colors, etc.), but then all the other, non div specific, styling goes in the child tags.

The large first letter word search problem is because people use a work-around to compensate for inadequate devices/apps. They use <span>s around the first letter to enable styling it differently. I don’t use that work-around. I use css to style the first letter that way there is no issue with word search or spelling corrections. Yes, I know some older devices are incapable of using current technology… that’s why I said it was possible ‘in some circumstances’ and that they needed to test on their target devices/apps to see if it works. If not, then use fall-back coding.

The simple coding I use for drop-caps or large-first-letter is:
Code:
HTML:
<p class="first">This is the first paragraph in the chapter.</p>

CSS:
p.first {yadda yadda yadda}
p.first:first-line {yadda yadda small-caps yadda}
p.first:first-letter {yadda yadda large letter or drop cap yadda}
Note: if an eBook is being created for sale, you want to use the fall back coding (aka <span class="firstletter">) because you want your eBook to work in as many programs as possible. You want ot use as much ePub 2 compatible code as possible and you don't want to use any ePub 3 code where it's going to cause a problem with ePub 2 only programs.

Can you create code for a large first letter that works with a Kindle so the first line of the paragraph has the same height?

Last edited by JSWolf; 01-31-2024 at 02:37 PM.
JSWolf is offline   Reply With Quote