Merge branch 'develop' into fontSize-fix

readium · Dec 17, 2024 · e8b82bf · e8b82bf
2 parents 6cc5a45 + 11e33fa
commit e8b82bf
Show file tree

Hide file tree

Showing 35 changed files with 372 additions and 199 deletions.
diff --git a/css/ReadMe.md b/css/ReadMe.md
@@ -158,6 +158,8 @@ To remove a variable:
 var root = document.documentElement || document.getElementById("iframe-wrapper").contentWindow.document.documentElement; 
 
 root.style.removeProperty("--USER__var");
+
+// or root.style.setProperty("--USER__var", "");
 ```
 
 Please note you must implement a fallback strategy if you want to support Internet Explorer 11 and early versions of Microsoft Edge.
@@ -174,17 +176,24 @@ root.style.setProperty("--USER__bodyHyphens", "auto");
 
 Of course this example is simplistic. You could for instance create an helper to set multiple properties at once.
 
-#### Changing the type scale 
+#### Apply sepia theme/mode
 
-You might want to change the type scale in order to adjust the `font-size` of all elements to the size of the screen and the global `font-size` set by the user. It can indeed help solve overflow issues for long words in headings, ridiculously large sizes, etc.
+To apply the sepia theme/mode, you can use a flag that will apply preset values.
 
 ```
-root.style.setProperty("--USER__advancedSettings", "readium-advanced-on");
-root.style.setProperty("--USER__typeScale", "1.067");
+root.style.setProperty("--USER__appearance", "readium-sepia-on");
 ```
 
 ## Create Themes
 
 In this model, themes are a set of user settings you can store and retrieve. Add the properties to `html` and you get a theme.
 
-Check the [User Preferences doc](../docs/CSS12-user_prefs.md) for a list of available user variables.
+Check the [User Preferences doc](../docs/CSS12-user_prefs.md) for a list of available user variables.
+
+You can also retrieve ReadiumCSS presets for font-stacks and modes by adding it as a package, then importing its exposed json files. For instance in JS/TS:
+
+```
+import sepiaMode from "readium-css/css/vars/sepia.json";
+
+const sepiaBackground = sepiaMode.sepiaMode.RS__backgroundColor;
+```
diff --git a/css/dist/ReadiumCSS-after.css b/css/dist/ReadiumCSS-after.css
@@ -15,12 +15,18 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root{
-  --RS__colWidth:100vw;
-  --RS__colCount:1;
-  --RS__colGap:0;
-  --RS__defaultLineLength:40rem;
-  --RS__pageGutter:0;
+
   --RS__viewportWidth:100%;
+
+  --RS__pageGutter:0;
+
+  --RS__defaultLineLength:40rem;
+
+  --RS__colGap:0;
+
+  --RS__colCount:1;
+
+  --RS__colWidth:100vw;
 }
 
 @page{
@@ -91,8 +97,8 @@ body{
 }
 
 :root[style*="readium-scroll-on"] body{
+  max-width:var(--RS__defaultLineLength) !important;
   overflow:auto;
-  --RS__defaultLineLength:40rem !important;
 }
 
 @supports (overflow: clip){
@@ -107,13 +113,18 @@ body{
 }
 
 :root[style*="readium-night-on"]{
-  --RS__backgroundColor:#000000;
-  --RS__textColor:#FEFEFE;
 
-  --RS__linkColor:#63caff;
-  --RS__visitedColor:#0099E5;
-  --RS__selectionBackgroundColor:#b4d8fe;
   --RS__selectionTextColor:inherit;
+
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__visitedColor:#0099E5;
+
+  --RS__linkColor:#63caff;
+
+  --RS__textColor:#FEFEFE;
+
+  --RS__backgroundColor:#000000;
 }
 
 :root[style*="readium-night-on"] *:not(a){
@@ -160,15 +171,18 @@ body{
 }
 
 :root[style*="readium-sepia-on"]{
-  --RS__backgroundColor:#faf4e8;
-  --RS__textColor:#121212;
 
-  --RS__linkColor:#0000EE;
-  --RS__visitedColor:#551A8B;
-  --RS__selectionBackgroundColor:#b4d8fe;
   --RS__selectionTextColor:inherit;
 
-  --RS__defaultLineLength:40.01rem;
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__visitedColor:#551A8B;
+
+  --RS__linkColor:#0000EE;
+
+  --RS__textColor:#121212;
+
+  --RS__backgroundColor:#faf4e8;
 }
 
 :root[style*="readium-sepia-on"] *:not(a){

diff --git a/css/dist/ReadiumCSS-before.css b/css/dist/ReadiumCSS-before.css
@@ -24,11 +24,16 @@
 }
 
 :root{
-  --RS__oldStyleTf:"Iowan Old Style", sitka, "Sitka Text", palatino, "Book Antiqua", "URW Palladio L", p052, serif;
-  --RS__modernTf:athelas, constantia, charter, "Bitstream Charter", cambria, "Georgia Pro", georgia, serif;
-  --RS__sansTf:-ui-sans-serif, -apple-system, system-ui, blinkmacsystemfont, "Segoe UI Variable", "Segoe UI", inter, roboto, "Helvetica Neue", "Arial Nova", "Liberation Sans", arial, sans-serif;
-  --RS__humanistTf:seravek, calibri, "Gill Sans Nova", roboto, ubuntu, "DejaVu Sans", source-sans-pro, sans-serif;
-  --RS__monospaceTf:ui-monospace, "Andale Mono", "Cascadia Code", "Source Code Pro", menlo, consolas, "DejaVu Sans Mono", monospace;
+
+  --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+  --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif;
+
+  --RS__sansTf:-ui-sans-serif, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Liberation Sans', Arial, sans-serif;
+
+  --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif;
+
+  --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif;
   --RS__baseFontFamily:var(--RS__oldStyleTf);
   --RS__lineHeightCompensation:1;
   --RS__baseLineHeight:calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation));
@@ -188,10 +193,14 @@ math{
 }
 
 :root{
-  --RS__backgroundColor:#FFFFFF;
-  --RS__textColor:#121212;
-  --RS__selectionBackgroundColor:#b4d8fe;
+
   --RS__selectionTextColor:inherit;
+
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__textColor:#121212;
+
+  --RS__backgroundColor:#FFFFFF;
 }
 
 :root{

diff --git a/css/dist/cjk-horizontal/ReadiumCSS-after.css b/css/dist/cjk-horizontal/ReadiumCSS-after.css
@@ -15,12 +15,18 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root{
-  --RS__colWidth:100vw;
-  --RS__colCount:1;
-  --RS__colGap:0;
-  --RS__defaultLineLength:40rem;
-  --RS__pageGutter:0;
+
   --RS__viewportWidth:100%;
+
+  --RS__pageGutter:0;
+
+  --RS__defaultLineLength:40rem;
+
+  --RS__colGap:0;
+
+  --RS__colCount:1;
+
+  --RS__colWidth:100vw;
 }
 
 @page{
@@ -91,8 +97,8 @@ body{
 }
 
 :root[style*="readium-scroll-on"] body{
+  max-width:var(--RS__defaultLineLength) !important;
   overflow:auto;
-  --RS__defaultLineLength:40rem !important;
 }
 
 @supports (overflow: clip){
@@ -107,13 +113,18 @@ body{
 }
 
 :root[style*="readium-night-on"]{
-  --RS__backgroundColor:#000000;
-  --RS__textColor:#FEFEFE;
 
-  --RS__linkColor:#63caff;
-  --RS__visitedColor:#0099E5;
-  --RS__selectionBackgroundColor:#b4d8fe;
   --RS__selectionTextColor:inherit;
+
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__visitedColor:#0099E5;
+
+  --RS__linkColor:#63caff;
+
+  --RS__textColor:#FEFEFE;
+
+  --RS__backgroundColor:#000000;
 }
 
 :root[style*="readium-night-on"] *:not(a){
@@ -160,15 +171,18 @@ body{
 }
 
 :root[style*="readium-sepia-on"]{
-  --RS__backgroundColor:#faf4e8;
-  --RS__textColor:#121212;
 
-  --RS__linkColor:#0000EE;
-  --RS__visitedColor:#551A8B;
-  --RS__selectionBackgroundColor:#b4d8fe;
   --RS__selectionTextColor:inherit;
 
-  --RS__defaultLineLength:40.01rem;
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__visitedColor:#551A8B;
+
+  --RS__linkColor:#0000EE;
+
+  --RS__textColor:#121212;
+
+  --RS__backgroundColor:#faf4e8;
 }
 
 :root[style*="readium-sepia-on"] *:not(a){

diff --git a/css/dist/cjk-horizontal/ReadiumCSS-before.css b/css/dist/cjk-horizontal/ReadiumCSS-before.css
@@ -24,11 +24,16 @@
 }
 
 :root{
-  --RS__oldStyleTf:"Iowan Old Style", sitka, "Sitka Text", palatino, "Book Antiqua", "URW Palladio L", p052, serif;
-  --RS__modernTf:athelas, constantia, charter, "Bitstream Charter", cambria, "Georgia Pro", georgia, serif;
-  --RS__sansTf:-ui-sans-serif, -apple-system, system-ui, blinkmacsystemfont, "Segoe UI Variable", "Segoe UI", inter, roboto, "Helvetica Neue", "Arial Nova", "Liberation Sans", arial, sans-serif;
-  --RS__humanistTf:seravek, calibri, "Gill Sans Nova", roboto, ubuntu, "DejaVu Sans", source-sans-pro, sans-serif;
-  --RS__monospaceTf:ui-monospace, "Andale Mono", "Cascadia Code", "Source Code Pro", menlo, consolas, "DejaVu Sans Mono", monospace;
+
+  --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+  --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif;
+
+  --RS__sansTf:-ui-sans-serif, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Liberation Sans', Arial, sans-serif;
+
+  --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif;
+
+  --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif;
   --RS__baseFontFamily:var(--RS__oldStyleTf);
   --RS__lineHeightCompensation:1;
   --RS__baseLineHeight:calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation));
@@ -188,10 +193,14 @@ math{
 }
 
 :root{
-  --RS__backgroundColor:#FFFFFF;
-  --RS__textColor:#121212;
-  --RS__selectionBackgroundColor:#b4d8fe;
+
   --RS__selectionTextColor:inherit;
+
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__textColor:#121212;
+
+  --RS__backgroundColor:#FFFFFF;
 }
 
 :root{

diff --git a/css/dist/cjk-vertical/ReadiumCSS-after.css b/css/dist/cjk-vertical/ReadiumCSS-after.css
@@ -15,11 +15,18 @@
 @namespace svg url("http://www.w3.org/2000/svg");
 
 :root{
-  --RS__colWidth:100vh;
-  --RS__colCount:1;
-  --RS__colGap:0;
-  --RS__defaultLineLength:40rem;
-  --RS__pageGutter:0;
+
+   --RS__viewportWidth:100%;
+
+   --RS__pageGutter:0;
+
+   --RS__defaultLineLength:40rem;
+
+   --RS__colGap:0;
+
+   --RS__colCount:1;
+
+   --RS__colWidth:100vw;
 }
 
 @page{
@@ -101,7 +108,7 @@ body{
 
 :root[style*="readium-scroll-on"] body,
 :root[style*="readium-noVerticalPagination-on"] body{
-  --RS__defaultLineLength:40.01rem !important;
+  max-width:var(--RS__defaultLineLength) !important;
 }
 
 @supports (overflow: clip){
@@ -116,13 +123,18 @@ body{
 }
 
 :root[style*="readium-night-on"]{
-  --RS__backgroundColor:#000000;
-  --RS__textColor:#FEFEFE;
 
-  --RS__linkColor:#63caff;
-  --RS__visitedColor:#0099E5;
-  --RS__selectionBackgroundColor:#b4d8fe;
   --RS__selectionTextColor:inherit;
+
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__visitedColor:#0099E5;
+
+  --RS__linkColor:#63caff;
+
+  --RS__textColor:#FEFEFE;
+
+  --RS__backgroundColor:#000000;
 }
 
 :root[style*="readium-night-on"] *:not(a){
@@ -169,15 +181,18 @@ body{
 }
 
 :root[style*="readium-sepia-on"]{
-  --RS__backgroundColor:#faf4e8;
-  --RS__textColor:#121212;
 
-  --RS__linkColor:#0000EE;
-  --RS__visitedColor:#551A8B;
-  --RS__selectionBackgroundColor:#b4d8fe;
   --RS__selectionTextColor:inherit;
 
-  --RS__defaultLineLength:40.01rem;
+  --RS__selectionBackgroundColor:#b4d8fe;
+
+  --RS__visitedColor:#551A8B;
+
+  --RS__linkColor:#0000EE;
+
+  --RS__textColor:#121212;
+
+  --RS__backgroundColor:#faf4e8;
 }
 
 :root[style*="readium-sepia-on"] *:not(a){