Skip to content

Commit

Permalink
Remove font-size normalize from doc details
Browse files Browse the repository at this point in the history
  • Loading branch information
JayPanoz committed Sep 12, 2024
1 parent 9272175 commit 90231d9
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 140 deletions.
29 changes: 0 additions & 29 deletions docs/CSS18-further_details.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,35 +130,6 @@ An optional primary accentuation `color` you could use for headings or any other

An optional secondary accentuation `color` you could use for any element of your choice.

## Font Size Normalize and the Type Scale

The assumption is that at least basic semantic elements’ `font-size` can be interpolated to a type scale, with minimal variation (±1–2 pixels difference for each element) in comparison to authors’ styles.

We’re using the `calc()` function to emulate the following:

```
h1 = base font-size × typeScale ^ 3 (power of 3)
h2 = base font-size × typeScale ^ 2 (power of 2)
h3 = base font-size × typeScale
h4 = base font-size
body = base font-size
```

In which `typeScale` can be customized to match the actual scale used in the publication. There lies the flexibility of this normalize.

Getting the type scale is a one-two punch:

1. `parseInt` of the computed `font-size` for a heading and the base (division = result)*
2. `Math.pow(result, 1/n)`, in which `n` is `3` for `h1` (cubic root) and `2` for `h2` (square root).

\* `h3` stops here.

Then the `font-size` for each heading and body copy element will be recomputed based on this type scale.

Of course this approach is limited, there is little we can do to account for ids, classes, etc.

But it can at least be used for themes, or an opt-in user setting.

## Dynamic leading

Readium CSS automagically finds the ideal `line-height` of the current font and `font-size` in use if the author hasn’t set an explicit value.
Expand Down
Binary file modified docs/ReadiumCSS_docs.epub
Binary file not shown.
32 changes: 0 additions & 32 deletions docs/ReadiumCSS_docs/OEBPS/Text/Section-018.xhtml
Original file line number Diff line number Diff line change
Expand Up @@ -133,38 +133,6 @@
</section>
</section>

<section id="font-size-normalize-and-the-type-scale" class="level2">
<h2 id="sigil_toc_id_52">Font Size Normalize and the Type Scale</h2>

<p>The assumption is that at least basic semantic elements’ <code>font-size</code> can be interpolated to a type scale, with minimal variation (±1–2 pixels difference for each element) in comparison to authors’ styles.</p>

<p>We’re using the <code>calc()</code> function to emulate the following:</p>

<pre><code>h1 = base font-size × typeScale ^ 3 (power of 3)
h2 = base font-size × typeScale ^ 2 (power of 2)
h3 = base font-size × typeScale
h4 = base font-size
body = base font-size</code></pre>

<p>In which <code>typeScale</code> can be customized to match the actual scale used in the publication. There lies the flexibility of this normalize.</p>

<p>Getting the type scale is a one-two punch:</p>

<ol>
<li><code>parseInt</code> of the computed <code>font-size</code> for a heading and the base (division = result)*</li>

<li><code>Math.pow(result, 1/n)</code>, in which <code>n</code> is <code>3</code> for <code>h1</code> (cubic root) and <code>2</code> for <code>h2</code> (square root).</li>
</ol>

<p>* <code>h3</code> stops here.</p>

<p>Then the <code>font-size</code> for each heading and body copy element will be recomputed based on this type scale.</p>

<p>Of course this approach is limited, there is little we can do to account for ids, classes, etc.</p>

<p>But it can at least be used for themes, or an opt-in user setting.</p>
</section>

<section id="dynamic-leading" class="level2">
<h2 id="sigil_toc_id_35">Dynamic leading</h2>

Expand Down
3 changes: 0 additions & 3 deletions docs/ReadiumCSS_docs/OEBPS/Text/nav.xhtml
Original file line number Diff line number Diff line change
Expand Up @@ -502,9 +502,6 @@
<li>
<a href="../Text/Section-018.xhtml#sigil_toc_id_51">The Internal Framework</a>
</li>
<li>
<a href="../Text/Section-018.xhtml#sigil_toc_id_52">Font Size Normalize and the Type Scale</a>
</li>
<li>
<a href="../Text/Section-018.xhtml#sigil_toc_id_35">Dynamic leading</a>
</li>
Expand Down
Loading

0 comments on commit 90231d9

Please sign in to comment.