Correct base line-height

Resolves #166

Author: JayPanoz

css/src/modules/ReadiumCSS-base.css

@@ -25,8 +25,7 @@
   /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */
   --RS__lineHeightCompensation: 1;
 
-  /* Dynamic leading based on typeface metrics + font-size setting */
-  --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation));
+  --RS__baseLineHeight: calc(1.5 * var(--RS__lineHeightCompensation));
 }
 
 /* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */

docs/CSS08-defaults.md

@@ -150,8 +150,6 @@ Please note some languages have a specific font-stack (japanese, chinese, hindi,
 
 The default line-height for body copy in case the ebook doesn’t have one declared.
 
-We’re using an algorithm to find the ideal `line-height` for the current font based on its metrics (see details in the next subsection below).
-
 * * *
 
 ```
@@ -162,31 +160,6 @@ The compensation factor (integer) the dynamic leading pseudo-algorithm must appl
 
 This variable is redefined by default, in languages and scripts which need compensation due to the characteristics of their average fonts’ metrics.
 
-### Dynamic leading (line-height)
-
-If we don’t provide a base `line-height` and the author hasn’t explicitely set one, then the `normal` value will be applied. On average, it is less than `1.2`, which makes leading quite solid and can quickly become a readability issue with some fonts, especially the ones with a large x-height.
-
-Readium CSS consequently uses an algorithm to find the ideal leading for each font by default (with a fallback value accomodating every script/language it supports).
-
-This algorithm tries to:
-
-1. automagically adjust the `line-height` to the current typeface;
-2. adjust this ideal `line-height` it has just computed to the current `font-size` the user has set.
-
-```
-calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation))
-```
-
-In which, `--RS__lineHeightCompensation` is a factor whose default is `1`. Indeed, the `line-height` is usually 15–20% larger in CJK than in other scripts/languages (factor of `1.167`), but it can also used for square-ish fonts, especially in Indic.
-
-The results we could get for the vast majority of fonts can be described as good in terms of typographic color. Here is Iowan Old Style for instance.
-
-![Comparison of the algorithm using four different font-sizes with the Iowan Old Style typeface. We can notice that the leading applied is solider as font-size increases, which results in a relatively even distribution of typographic color. This is confirmed by the computed values retrieved in the tool ReadiumCSS provides for testing.](assets/dynamic-leading.jpg)
-
-This isn’t a perfect solution though, and this algorithm may be revisited in the future.
-
-See [Further Details](../docs/CSS18-further_details.md) for an extensive explanation.
-
 ## Day Mode
 
 The `ReadiumCSS-day_mode.css` stylesheet serves as a default and handles `background-color` and `color` for `:root` and `::selection`.

docs/CSS18-further_details.md

@@ -130,32 +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.
 
-## 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.
-
-We’re using the current algorithm in the `calc()` function:
-
-```
-(1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation))
-```
-
-Therefore, the `line-height` is:
-
-1. `1em` = the size of the `font-size`;
-2. `2ex - 1ch` = 2 x-height - 1 character width (`0`), in order to take the typeface’s proportions into account e.g. if the font has a small x-height, leading will be more solid, and vice versa;
-3. `1rem - 16px` = the current user’s `font-size` minus the one at `100%` (base `font-size`);
-4. `0.1667` = a scale which has been defined from an optimal range ([it is a magic number](https://css-tricks.com/magic-numbers-in-css/) which has been retro-engineered from a set containing hundreds of samples);
-5. `var(--RS__lineHeightCompensation)` is a factor (integer) to compensate a less than ideal `line-height`, especially in non-Latin scripts, where fonts tend to be square-ish.
-
-This isn’t a perfect solution though, and this algorithm may be revisited in the future. Indeed, caveats are:
-
-- leading also depends on line-length, which is not addressed in the algorithm itself, line-length must therefore be constrained by other means – we couldn’t rely on the viewport `width` anyway;
-- sometimes, the User Agent default `font-size` is not `16px` (e.g. Kindle experimental browser, user setting a larger `font-size`, etc.);
-- `0.1667` feels like a magic number, or at least a weird number as it was retrofitted after testing hundreds of typefaces;
-- it’s clearly a natural logarithmic function i.e. it increases rapidly and then slows towards a zero rate of change, which will give mediocre results for very large font sizes (e.g. `400%`);
-- it doesn’t work ideally for slab serif fonts with a large x-height, thick stroke and medium character width i.e. square-ish metrics – we don’t have any in the default font-stacks so we had to introduce a compensation factor to address this particular issue.
-
 ## Conditional Selectors for user settings
 
 User settings are appended on load and won’t have any effect until a user-setting variable is set.

docs/CSS28-migration_guide.md

@@ -172,4 +172,10 @@ Previously, you had to rely on day, sepia, and night mode to enforce the color o
 
 These decisions are now made to consumers’ discretion, which means they can invert images in their darkest custom themes without having to override ReadiumCSS’ night mode colors for instance, or offer these features to users as they see fit – globally or scoped to a subset of themes – in their app. 
 
-**Note you’ll have to take gaiji into account in dark custom themes as inverting them so that they match the color of text can only be done automatically in readiumCSS’ own night mode.**
+**Note you’ll have to take gaiji into account in dark custom themes as inverting them so that they match the color of text can only be done automatically in readiumCSS’ own night mode.**
+
+## Removal of Dynamic Leading
+
+Since version `2.0.0-beta.6`, ReadiumCSS is no longer using an algorithm to guess the ideal line-height for each font, and recompute it on font-size change, as it created issues with the new font-size setting implementation. 
+
+It simply uses value `1.5` for [accessibility purposes](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#accessibility), and compensates this value for various languages (e.g. CJK).

docs/ReadiumCSS_docs.epub

@@ -156,8 +156,6 @@
 
           <p>The default line-height for body copy in case the ebook doesn’t have one declared.</p>
 
-          <p>We’re using an algorithm to find the ideal <code>line-height</code> for the current font based on its metrics (see details in the next subsection below).</p>
-
 		  <hr/>
 
 		  <pre><code>--RS__lineHeightCompensation</code></pre>
@@ -167,37 +165,6 @@
 		  <p>This variable is redefined by default, in languages and scripts which need compensation due to the characteristics of their average fonts’ metrics.</p>
         </section>
       </section>
-
-      <section id="dynamic-leading-line-height" class="level3">
-        <h3 class="sigil_not_in_toc">Dynamic leading (line-height)</h3>
-
-        <p>If we don’t provide a base <code>line-height</code> and the author hasn’t explicitely set one, then the <code>normal</code> value will be applied. On average, it is less than <code>1.2</code>, which makes leading quite solid and can quickly become a readability issue with some fonts, especially the ones with a large x-height.</p>
-
-        <p>Readium CSS consequently uses an algorithm to find the ideal leading for each font by default (with a fallback value accomodating every script/language it supports).</p>
-
-        <p>This algorithm tries to:</p>
-
-        <ol>
-          <li>automagically adjust the <code>line-height</code> to the current typeface;</li>
-
-          <li>adjust this ideal <code>line-height</code> it has just computed to the current <code>font-size</code> the user has set.</li>
-        </ol>
-
-        <pre><code>calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation))</code></pre>
-
-        <p>In which, <code>--RS__lineHeightCompensation</code> is a factor whose default is <code>1</code>. Indeed, the <code>line-height</code> is usually 15–20% larger in CJK than in other scripts/languages (factor of <code>1.167</code>), but it can also used for square-ish fonts, especially in Indic.</p>
-
-        <p>The results we could get for the vast majority of fonts can be described as good in terms of typographic color. Here is Iowan Old Style for instance.</p>
-
-        <figure>
-          <img src="../Images/dynamic-leading.jpg" alt="Comparison of the algorithm using four different font-sizes with the Iowan Old Style typeface. We can notice that the leading applied is solider as font-size increases, which results in a relatively even distribution of typographic color. This is confirmed by the computed values retrieved in the tool ReadiumCSS provides for testing."/>
-
-        </figure>
-
-        <p>This isn’t a perfect solution though, and this algorithm may be revisited in the future.</p>
-
-        <p>See <a href="../Text/Section-018.xhtml">Further Details</a> for an extensive explanation.</p>
-      </section>
     </section>
 
     <section id="day-mode" class="level2">

docs/ReadiumCSS_docs/OEBPS/Images/dynamic-leading.jpg

@@ -133,44 +133,6 @@
       </section>
     </section>
 
-    <section id="dynamic-leading" class="level2">
-      <h2 id="sigil_toc_id_35">Dynamic leading</h2>
-
-      <p>Readium CSS automagically finds the ideal <code>line-height</code> of the current font and <code>font-size</code> in use if the author hasn’t set an explicit value.</p>
-
-      <p>We’re using the current algorithm in the <code>calc()</code> function:</p>
-
-      <pre><code>(1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation))</code></pre>
-
-      <p>Therefore, the <code>line-height</code> is:</p>
-
-      <ol>
-        <li><code>1em</code> = the size of the <code>font-size</code>;</li>
-
-        <li><code>2ex - 1ch</code> = 2 x-height - 1 character width (<code>0</code>), in order to take the typeface’s proportions into account e.g. if the font has a small x-height, leading will be more solid, and vice versa;</li>
-
-        <li><code>1rem - 16px</code> = the current user’s <code>font-size</code> minus the one at <code>100%</code> (base <code>font-size</code>);</li>
-
-        <li><code>0.1667</code> = a scale which has been defined from an optimal range (<a href="https://css-tricks.com/magic-numbers-in-css/">it is a magic number</a> which has been retro-engineered from a set containing hundreds of samples);</li>
-
-		<li><code>var(--RS__lineHeightCompensation)</code> is a factor (integer) to compensate a less than ideal <code>line-height</code>, especially in non-Latin scripts, where fonts tend to be square-ish.</li>
-      </ol>
-
-      <p>This isn’t a perfect solution though, and this algorithm may be revisited in the future. Indeed, caveats are:</p>
-
-      <ul>
-        <li>leading also depends on line-length, which is not addressed in the algorithm itself, line-length must therefore be constrained by other means – we couldn’t rely on the viewport <code>width</code> anyway;</li>
-
-        <li>sometimes, the User Agent default <code>font-size</code> is not <code>16px</code> (e.g. Kindle experimental browser, user setting a larger <code>font-size</code>, etc.);</li>
-
-        <li><code>0.1667</code> feels like a magic number, or at least a weird number as it was retrofitted after testing hundreds of typefaces;</li>
-
-        <li>it’s clearly a natural logarithmic function i.e. it increases rapidly and then slows towards a zero rate of change, which will give mediocre results for very large font sizes (e.g. <code>400%</code>);</li>
-
-        <li>it doesn’t work ideally for slab serif fonts with a large x-height, thick stroke and medium character width i.e. square-ish metrics – we don’t have any in the default font-stacks so we had to introduce a compensation factor to address this particular issue.</li>
-      </ul>
-    </section>
-
     <section id="conditional-selectors-for-user-settings" class="level2">
       <h2 id="sigil_toc_id_53">Conditional Selectors for user settings</h2>
 

docs/ReadiumCSS_docs/OEBPS/Text/Section-008.xhtml

@@ -208,6 +208,14 @@ const sepiaBackground = sepiaMode.sepiaMode.RS__backgroundColor;</code></pre>
 
       <p><strong>Note you’ll have to take gaiji into account in dark custom themes as inverting them so that they match the color of text can only be done automatically in readiumCSS’ own night mode.</strong></p>
     </section>
+
+    <section id="theming-improvements" class="level2">
+      <h2 id="sigil_toc_id_211">Removal of Dynamic Leading</h2>
+
+      <p>Since version <code>2.0.0-beta.6</code>, ReadiumCSS is no longer using an algorithm to guess the ideal line-height for each font, and recompute it on font-size change, as it created issues with the new font-size setting implementation.</p> 
+
+      <p>It simply uses value <code>1.5</code> for <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#accessibility">accessibility purposes</a>, and compensates this value for various languages (e.g. CJK).</p>
+    </section>
   </section>
 </body>
 </html>

docs/ReadiumCSS_docs/OEBPS/Text/Section-018.xhtml

@@ -505,9 +505,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_35">Dynamic leading</a>
-        </li>
         <li>
           <a href="../Text/Section-018.xhtml#sigil_toc_id_53">Conditional Selectors for user settings</a>
         </li>
@@ -744,6 +741,9 @@
         <li>
           <a href="../Text/Section-028.xhtml#sigil_toc_id_209">Theming Improvements</a>
         </li>
+        <li>
+          <a href="../Text/Section-028.xhtml#sigil_toc_id_211">Removal of Dynamic Leading</a>
+        </li>
       </ol>
       </li>
     </ol>