Quote:
Originally Posted by JSWolf
Stupidity.
|
Agreed. It leads to frustration all around. I've had so many books where I:
Click one font larger, uncomfortably large. One font smaller, uncomfortably small.
This kind of poor code causes ebooks to not match user-specified preferences.
It could be imported templates + overrides, and a whole host of other nonsense (see below).
You could also see similar discussion in:
2017 "Adobe InDesign and poor code"
2014 "Headings appearing huge with Indesign stylesheet"
Side Note: Also recommend doing a search for:
Code:
Tex2002ans InDesign site:mobileread.com
in your favorite search engine to run across a lot more examples over the years...
Side Note #2: Different CSS units may interact in unexpected/unintended ways for font-size. See some discussion in
"Em Vs Percentage" or one example article
"Difference Between em, px, pt and % in Font Sizes".
I say your best bet is to just KISS. Don't specify anything unless you absolutely have to:
Only change font-size sparingly and in rare cases (such as .8em on a copyright page or an image's caption). Besides that, best to just leave font-sizes up to the device/user.
Quote:
Originally Posted by hobnail
This is in books I've gotten from places; I can't remember where.
More likely in the book's CSS the body font-size is > 100% and then p font-size is less than 100%. So it's close to 100% after those gyrations.
Anybody know why they do this?
|
It could be a whole multitude of things:
CSS Resets
These try to aim towards "looking similar across all devices/browsers". They override everything, then try to add your changes on top.
Old HTML/Browser Code
Ebooks =/= Browsers... so you have a lot of legacy code cruft built up over the years, leading to bad ebook experiences.
Example:
"How to Size Text in CSS" from 2007 discussing ways to handle IE6/7 + Safari + all these other older/buggy browsers.
There's no need to carry stuff over code like that into ebooks.
Note: For max compatibility in ebooks, just stick with font-size in em or %. Use CSS2, avoiding newer CSS3 units like rem, vh, [...].
Print-Setting Leftovers
It could be very poor conversions/exports.
In EPUB/HTML it's not smart to use fixed sizes (pt/px).
InDesign has 12pt font in the PDF, so during export it may "helpfully" convert to fractions of em, so you see code like:
Code:
font-size: 1.00375em
Direct Formatting Leftovers
There are a bajillion and one different ways of creating documents (in Word/LibreOffice/InDesign, etc.).
Instead of using Styles, they could've been pressing all the direct formatting buttons, which may achieve "the same look" on the surface, but the road to arrival is completely different.
For example, let's say Word's defaults are:
12pt font, 16pt chapter headings.
You could:
1. Just specify headings as headings, paragraphs as paragraphs, and leave it to the defaults.
If you exported this:
HTML:
Code:
<h2>Chapter 1</h2>
<p>And so it begins.</p>
the resulting HTML "uses the device's defaults". Your chosen preferences might be 10pt font and 14pt headings.
Whatever, the exact same spirit gets across.
2. You could "hard-code" in the sizes:
You highlight all your text and push the buttons for 12pt font, you highlight all your headings and push the 16pt font:
Code:
<h2 style="font-size:16pt">Chapter 1</h2>
<p style="font-size:12pt">And so it begins.</p>
In Word, it LOOKS the same on the surface... but when the user wants to change font sizes...
3. You override some with others.
You know that specifying exact font sizes is bad, so instead, you decide to go with scaling percentages!
You don't like the height of your Print font, it's a little too small, so you specify all fonts to be 125% bigger.
You go pushing all those similar buttons:
Code:
<body style="font-size:125%">
<h2 style="font-size:80%">Chapter 1</h2>
<p style="font-size:80%">And so it begins.</p>
</body>
I mean, it
looks similar to Print... until the user begins changing anything (fonts, font sizes, line-heights, etc.).
* * *
Like I said initially, overall it's best to just get out of the way. If you need to mess with font-sizes, do it very sparingly:
Code:
<body>
<h2 class="chapter">Chapter 1</h2>
<p>And so it begins.</p>
[...]
<h5>The Interaction</h5>
</body>
Code:
h2 {
font-size: 1.2em;
}
h5 {
font-size: 1em;
font-style: italic;
}
but there's no need to specify font-sizes in the <body>, then trying to override/calculate everywhere else. It'll just lead to trouble further down the line.