Paragraphs and headings not affected by font-size

[danielweck]

Issue originally reported by @jonaslil :
edrlab/thorium-reader#1550

Summary

All p elements are displayed with the same font size, regardless of publisher css.

Problem

Lack of variation in font size distorts the layout of title pages and other special text elements. Endnotes, bibliographies, figcaptions containing p:s, which are usually styled smaller, are rendered with body text size (= 1 em).

Variations in font size are a basic typographic means to communicate text structure and hierarchy.

Tested with v1.7.2 on Windows.

Example

Title page in Thorium

Main title much too small, publisher info much too large:

Title page in ADE

Sample book

Download book here

Code

HTML

    <section epub:type="titlepage" class="titlepage">
        <p class="book-author">Guss Mattsson</p>
        <p class="book-title">En tur om hörnet</p>
        <p class="book-subtitle">Bref till Dagens Press af G.&#8239;M.</p>
        <p class="editors">Utg. Clas Zilliacus</p>
        <p class="publisher">Svenska litteratursällskapet i Finland <br />Helsingfors 2021</p>
    </section>

CSS

p.book-author {
font-size: 1.4em;
font-style: italic;
line-height: 1;
margin-top: 2em;
text-indent: 0;
}
p.book-title {
font-family: "Source Serif Subhead", serif;
text-transform: uppercase;
font-size: 2.2em;
letter-spacing: 0.025em;
font-weight: bold;
line-height: 1;
margin-top: 1.5em;
text-indent: 0;
}
p.book-author + p.book-title {
margin-top: 1.5rem;
}
p.book-subtitle {
font-size: 1.4em;
line-height: 1.3;
margin-top: 1.2rem;
text-indent: 0;
}
p.editors {
font-size: 1.25em;
line-height: 1.3;
margin-top: 3rem;
font-style: italic;
text-indent: 0;
}
p.publisher {
font-size: 0.9em;
line-height: 1.4;
margin-top: 4rem;
text-indent: 0;
font-variant: small-caps;
letter-spacing: 0.08em;
page-break-before: avoid;
}

---

Issue originally reported by @apgrover :
edrlab/thorium-reader#1508

Summary

Setting font-size on h1-h6 tags does not render a visual change. Default h1-h6 font sizes appear instead.

Scope

Observed in Thorium for PC/Mac v1.6.0

Expected

Setting font-size: 2.5em on h1-h6 will set each element to the same font size.

Observed

font-size: 2.5em is ignored on h1-h6 and default font size appears instead.

Code Example

HTML

			<h1 class="gx">A</h1>
			<h2 class="gx">A</h2>
			<h3 class="gx">A</h3>
			<h4 class="gx">A</h4>
			<h5 class="gx">A</h5>
			<h6 class="gx">A</h6>

CSS

.gx {
    font-size: 2.5em;
}

Sample file available upon request.

[danielweck]

I believe the culprit is:
https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/modules/ReadiumCSS-fs_normalize.css#L18-L24

...and:
https://github.com/readium/readium-css/blob/583011453612e6f695056ab6c086a2c4f4cac9c0/css/src/ReadiumCSS-default.css#L96-L135

@JayPanoz if you have time, do you know a workaround for this aggressive normalization of font size via REM units?

[danielweck]

[JayPanoz]

@danielweck I don’t have any workaround except not using this “fs-normalize” and switch to a native API for the font-size setting.

Remember this normalize exists because of EPUBs using absolute units e.g. px, pt, etc. and there is no way I can reduce the scope of this selector i.e. often every paragraph in the book has a class so if we used :not([class]) we would actually target zero paragraph and the font-size setting would not work at all.

EDITED BY @danielweck --- copied @JayPanoz 's comment here:

Yep, that’s the normalisation due to some EPUB authors using absolute values for font-size.

As usual the advice is to use a “native feature” to handle font-size setting if available/possible. Cf. #34

[danielweck]

I wonder how other reading systems deal with this? (Apple iBooks in particular)

In Readium "1" we used runtime-expensive script-driven DOM tree walk + style computation (effective pixel size) + scale factor ... so definitely not something we want to replicate with ReadiumCSS which is entirely declarative at this point.

[danielweck]

Apple Books on MacOS:

[jonaslil]

Thank you for considering this issue. There is another normalization issue which I think would be important to adress, the normalization of heading sizes: edrlab/thorium-reader#1508. Headings are such an important element in book layout and typography.

It is difficult to use Thorium for previewing epubs in a production process, or to recommend it to readers and colleagues, as long as it does not respect the book's stylesheet.

The epub specification agrees that author stylesheets need to be respected: https://www.w3.org/publishing/epub3/epub-contentdocs.html#sec-css-rs-overrides

[danielweck]

There is another normalization issue which I think would be important to adress, the normalization of heading sizes

Note that I have now merged issue edrlab/thorium-reader#1508 here.

[danielweck]

Reminder of this informative discussion: #34

[danielweck]

Related / duplicate issue? #111

From Nancy Zhang. A sample was requested.

I’ve just noticed that text in Blockquote displays in smaller font size in Thorium although it is set up the same size as other text in the stylesheet.ccs file

but in Sigil, it is like this: the two portions of text in the same size:

and it looks like it is not adjustable in the Text panel; other text would change in size with the slider, but text in blockquote remains the same.

I was wondering what I have missed, why this portion of text shows smaller, and how I could make changes to the font size in blockquote in Thorium, if possible.

[danielweck]

Reported in Thorium by @dualpixel-digital :

Hi,

I have one more improvement/fix suggestion for the next release.

I have an alpha version of version 2, with debug option.

I would like to understand why Thorium doesn't respect the font-size value, in space in the h1-h6 tags?

Note the difference between the desired result (Readium) and the result of Thorium

Is there a best formatting practice in CSS to ensure text sizes are recognized?