diff --git a/backstop.json b/backstop.json index 061ff1ac..49484418 100644 --- a/backstop.json +++ b/backstop.json @@ -113,6 +113,20 @@ "selectors": ["document"], "misMatchThreshold" : 0.1 }, + { + "label": "Deprecated font size pref", + "url": "http://localhost:8000/tests/font-size-deprecated.html", + "delay": 0, + "selectors": ["document"], + "misMatchThreshold" : 0.1 + }, + { + "label": "Font size normalize pref", + "url": "http://localhost:8000/tests/font-size-normalize.html", + "delay": 0, + "selectors": ["document"], + "misMatchThreshold" : 0.1 + }, { "label": "Type scale pref", "url": "http://localhost:8000/tests/type-scale.html", diff --git a/css/ReadiumCSS-config.css b/css/ReadiumCSS-config.css index 050505b1..91a01965 100644 --- a/css/ReadiumCSS-config.css +++ b/css/ReadiumCSS-config.css @@ -18,6 +18,9 @@ /* Font-family override */ @custom-selector :--font-override [style*="readium-font-on"]; +/* Disabling the new implementation for font-size */ +@custom-selector :--deprecated-font-size [style*="readium-deprecatedFontSize-on"]; + /* Font-size normalization for engines that don’t support zoom */ @custom-selector :--fs-normalize [style*="readium-normalize-on"]; diff --git a/css/dist/ReadiumCSS-after.css b/css/dist/ReadiumCSS-after.css index fc943692..9e4dff7c 100644 --- a/css/dist/ReadiumCSS-after.css +++ b/css/dist/ReadiumCSS-after.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the @@ -398,7 +398,7 @@ body{ vertical-align:baseline !important; } -:root[style*="--USER__fontSize"] body{ +:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{ zoom:var(--USER__fontSize) !important; } @@ -409,6 +409,10 @@ body{ } } +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; +} + :root[style*="--USER__lineHeight"]{ line-height:var(--USER__lineHeight) !important; } @@ -536,61 +540,58 @@ body{ filter:invert(100%) !important; } -@supports not (zoom: 1){ - - :root[style*="readium-normalize-on"]{ - --USER__typeScale:1.2; - } +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; +} - :root[style*="readium-normalize-on"] p, - :root[style*="readium-normalize-on"] li, - :root[style*="readium-normalize-on"] div, - :root[style*="readium-normalize-on"] pre, - :root[style*="readium-normalize-on"] dd{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] p, +:root[style*="readium-normalize-on"] li, +:root[style*="readium-normalize-on"] div, +:root[style*="readium-normalize-on"] pre, +:root[style*="readium-normalize-on"] dd{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] h1{ - font-size:1.75rem !important; - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h1{ + font-size:1.75rem !important; + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h2{ - font-size:1.5rem !important; - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h2{ + font-size:1.5rem !important; + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h3{ - font-size:1.25rem !important; - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h3{ + font-size:1.25rem !important; + font-size:calc(1rem * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h4, - :root[style*="readium-normalize-on"] h5, - :root[style*="readium-normalize-on"] h6{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] h4, +:root[style*="readium-normalize-on"] h5, +:root[style*="readium-normalize-on"] h6{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] small{ - font-size:smaller !important; - } +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; +} - :root[style*="readium-normalize-on"] sub, - :root[style*="readium-normalize-on"] sup{ - font-size:67.5% !important; - } +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !important; } :root[style*="readium-iPadOSPatch-on"] body{ diff --git a/css/dist/ReadiumCSS-before.css b/css/dist/ReadiumCSS-before.css index 5499eb36..0a7711cd 100644 --- a/css/dist/ReadiumCSS-before.css +++ b/css/dist/ReadiumCSS-before.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/dist/ReadiumCSS-default.css b/css/dist/ReadiumCSS-default.css index 4bdf047c..37975356 100644 --- a/css/dist/ReadiumCSS-default.css +++ b/css/dist/ReadiumCSS-default.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/dist/cjk-horizontal/ReadiumCSS-after.css b/css/dist/cjk-horizontal/ReadiumCSS-after.css index 3c9d9c8e..d29f8633 100644 --- a/css/dist/cjk-horizontal/ReadiumCSS-after.css +++ b/css/dist/cjk-horizontal/ReadiumCSS-after.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the @@ -326,7 +326,7 @@ body{ font-family:revert !important; } -:root[style*="--USER__fontSize"] body{ +:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{ zoom:var(--USER__fontSize) !important; } @@ -337,6 +337,10 @@ body{ } } +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; +} + :root[style*="--USER__lineHeight"]{ line-height:var(--USER__lineHeight) !important; } @@ -446,61 +450,58 @@ body{ filter:invert(100%) !important; } -@supports not (zoom: 1){ - - :root[style*="readium-normalize-on"]{ - --USER__typeScale:1.2; - } +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; +} - :root[style*="readium-normalize-on"] p, - :root[style*="readium-normalize-on"] li, - :root[style*="readium-normalize-on"] div, - :root[style*="readium-normalize-on"] pre, - :root[style*="readium-normalize-on"] dd{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] p, +:root[style*="readium-normalize-on"] li, +:root[style*="readium-normalize-on"] div, +:root[style*="readium-normalize-on"] pre, +:root[style*="readium-normalize-on"] dd{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] h1{ - font-size:1.75rem !important; - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h1{ + font-size:1.75rem !important; + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h2{ - font-size:1.5rem !important; - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h2{ + font-size:1.5rem !important; + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h3{ - font-size:1.25rem !important; - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h3{ + font-size:1.25rem !important; + font-size:calc(1rem * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h4, - :root[style*="readium-normalize-on"] h5, - :root[style*="readium-normalize-on"] h6{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] h4, +:root[style*="readium-normalize-on"] h5, +:root[style*="readium-normalize-on"] h6{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] small{ - font-size:smaller !important; - } +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; +} - :root[style*="readium-normalize-on"] sub, - :root[style*="readium-normalize-on"] sup{ - font-size:67.5% !important; - } +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !important; } :root[style*="readium-iPadOSPatch-on"] body{ diff --git a/css/dist/cjk-horizontal/ReadiumCSS-before.css b/css/dist/cjk-horizontal/ReadiumCSS-before.css index db2c2bee..26628134 100644 --- a/css/dist/cjk-horizontal/ReadiumCSS-before.css +++ b/css/dist/cjk-horizontal/ReadiumCSS-before.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/dist/cjk-horizontal/ReadiumCSS-default.css b/css/dist/cjk-horizontal/ReadiumCSS-default.css index b944bd26..e4310959 100644 --- a/css/dist/cjk-horizontal/ReadiumCSS-default.css +++ b/css/dist/cjk-horizontal/ReadiumCSS-default.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/dist/cjk-vertical/ReadiumCSS-after.css b/css/dist/cjk-vertical/ReadiumCSS-after.css index a44e9660..8ea131b0 100644 --- a/css/dist/cjk-vertical/ReadiumCSS-after.css +++ b/css/dist/cjk-vertical/ReadiumCSS-after.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the @@ -314,7 +314,7 @@ body{ font-family:revert !important; } -:root[style*="--USER__fontSize"] body{ +:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{ zoom:var(--USER__fontSize) !important; } @@ -325,6 +325,10 @@ body{ } } +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; +} + :root[style*="--USER__lineHeight"]{ line-height:var(--USER__lineHeight) !important; } @@ -434,61 +438,58 @@ body{ filter:invert(100%) !important; } -@supports not (zoom: 1){ - - :root[style*="readium-normalize-on"]{ - --USER__typeScale:1.2; - } +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; +} - :root[style*="readium-normalize-on"] p, - :root[style*="readium-normalize-on"] li, - :root[style*="readium-normalize-on"] div, - :root[style*="readium-normalize-on"] pre, - :root[style*="readium-normalize-on"] dd{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] p, +:root[style*="readium-normalize-on"] li, +:root[style*="readium-normalize-on"] div, +:root[style*="readium-normalize-on"] pre, +:root[style*="readium-normalize-on"] dd{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] h1{ - font-size:1.75rem !important; - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h1{ + font-size:1.75rem !important; + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h2{ - font-size:1.5rem !important; - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h2{ + font-size:1.5rem !important; + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h3{ - font-size:1.25rem !important; - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h3{ + font-size:1.25rem !important; + font-size:calc(1rem * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h4, - :root[style*="readium-normalize-on"] h5, - :root[style*="readium-normalize-on"] h6{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] h4, +:root[style*="readium-normalize-on"] h5, +:root[style*="readium-normalize-on"] h6{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] small{ - font-size:smaller !important; - } +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; +} - :root[style*="readium-normalize-on"] sub, - :root[style*="readium-normalize-on"] sup{ - font-size:67.5% !important; - } +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !important; } :root[style*="readium-iPadOSPatch-on"] body{ diff --git a/css/dist/cjk-vertical/ReadiumCSS-before.css b/css/dist/cjk-vertical/ReadiumCSS-before.css index 632bc3f6..bfcd33e7 100644 --- a/css/dist/cjk-vertical/ReadiumCSS-before.css +++ b/css/dist/cjk-vertical/ReadiumCSS-before.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/dist/cjk-vertical/ReadiumCSS-default.css b/css/dist/cjk-vertical/ReadiumCSS-default.css index 2939e9fc..aa477682 100644 --- a/css/dist/cjk-vertical/ReadiumCSS-default.css +++ b/css/dist/cjk-vertical/ReadiumCSS-default.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/dist/rtl/ReadiumCSS-after.css b/css/dist/rtl/ReadiumCSS-after.css index da866614..881c6892 100644 --- a/css/dist/rtl/ReadiumCSS-after.css +++ b/css/dist/rtl/ReadiumCSS-after.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the @@ -340,7 +340,7 @@ body{ font-family:revert !important; } -:root[style*="--USER__fontSize"] body{ +:root:not([style*="readium-deprecatedFontSize-on"])[style*="--USER__fontSize"] body{ zoom:var(--USER__fontSize) !important; } @@ -351,6 +351,10 @@ body{ } } +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; +} + :root[style*="--USER__lineHeight"]{ line-height:var(--USER__lineHeight) !important; } @@ -471,61 +475,58 @@ body{ filter:invert(100%) !important; } -@supports not (zoom: 1){ - - :root[style*="readium-normalize-on"]{ - --USER__typeScale:1.2; - } +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; +} - :root[style*="readium-normalize-on"] p, - :root[style*="readium-normalize-on"] li, - :root[style*="readium-normalize-on"] div, - :root[style*="readium-normalize-on"] pre, - :root[style*="readium-normalize-on"] dd{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] p, +:root[style*="readium-normalize-on"] li, +:root[style*="readium-normalize-on"] div, +:root[style*="readium-normalize-on"] pre, +:root[style*="readium-normalize-on"] dd{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] h1{ - font-size:1.75rem !important; - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h1{ + font-size:1.75rem !important; + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h2{ - font-size:1.5rem !important; - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h2{ + font-size:1.5rem !important; + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h3{ - font-size:1.25rem !important; - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"] h3{ + font-size:1.25rem !important; + font-size:calc(1rem * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"] h4, - :root[style*="readium-normalize-on"] h5, - :root[style*="readium-normalize-on"] h6{ - font-size:1rem !important; - } +:root[style*="readium-normalize-on"] h4, +:root[style*="readium-normalize-on"] h5, +:root[style*="readium-normalize-on"] h6{ + font-size:1rem !important; +} - :root[style*="readium-normalize-on"] small{ - font-size:smaller !important; - } +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; +} - :root[style*="readium-normalize-on"] sub, - :root[style*="readium-normalize-on"] sup{ - font-size:67.5% !important; - } +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ - font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ - font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ - font-size:calc(1rem * var(--USER__typeScale)) !important; - } +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !important; } :root[style*="readium-iPadOSPatch-on"] body{ diff --git a/css/dist/rtl/ReadiumCSS-before.css b/css/dist/rtl/ReadiumCSS-before.css index db2c2bee..26628134 100644 --- a/css/dist/rtl/ReadiumCSS-before.css +++ b/css/dist/rtl/ReadiumCSS-before.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/dist/rtl/ReadiumCSS-default.css b/css/dist/rtl/ReadiumCSS-default.css index 2ac78af7..eceabc11 100644 --- a/css/dist/rtl/ReadiumCSS-default.css +++ b/css/dist/rtl/ReadiumCSS-default.css @@ -1,5 +1,5 @@ /* - * Readium CSS (v. 2.0.0-beta.11) + * Readium CSS (v. 2.0.0-beta.12) * Developers: Jiminy Panoz * Copyright (c) 2017. Readium Foundation. All rights reserved. * Use of this source code is governed by a BSD-style license which is detailed in the diff --git a/css/src/modules/ReadiumCSS-fs_normalize.css b/css/src/modules/ReadiumCSS-fs_normalize.css index bd5419aa..b9271b16 100644 --- a/css/src/modules/ReadiumCSS-fs_normalize.css +++ b/css/src/modules/ReadiumCSS-fs_normalize.css @@ -10,67 +10,66 @@ /* :root is used so that you can quickly add a class or attribute if you prefer e.g. `:root[data-rs-normalize]` */ /* We create a default so that you don’t need to explicitly set one in the DOM. - Once the “Publisher’s styles” checkbox is unchecked, the normalize is applied automatically */ - -@supports not (zoom: 1) { - :root:--fs-normalize { - --USER__typeScale: 1.2; - /* This is the default type scale you’ll find in most publications */ - } - - :root:--fs-normalize p, - :root:--fs-normalize li, - :root:--fs-normalize div, - :root:--fs-normalize pre, - :root:--fs-normalize dd { - font-size: 1rem !important; - } - - :root:--fs-normalize h1 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.75rem !important; - font-size: calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } - - :root:--fs-normalize h2 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.5rem !important; - font-size: calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } - - :root:--fs-normalize h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * var(--USER__typeScale)) !important; - } - - :root:--fs-normalize h4, - :root:--fs-normalize h5, - :root:--fs-normalize h6 { - font-size: 1rem !important; - } - - :root:--fs-normalize small { - font-size: smaller !important; - } - - :root:--fs-normalize sub, - :root:--fs-normalize sup { - font-size: 67.5% !important; - } - - /* The following styles kick in if you define the typeScale variable in the DOM. + The normalize is not applied automatically, even when using the deprecated font-size setting + You have to set it explicitly if you want to make sure all publications are resized the same */ + +:root:--fs-normalize { + --USER__typeScale: 1.2; + /* This is the default type scale you’ll find in most publications */ +} + +:root:--fs-normalize p, +:root:--fs-normalize li, +:root:--fs-normalize div, +:root:--fs-normalize pre, +:root:--fs-normalize dd { + font-size: 1rem !important; +} + +:root:--fs-normalize h1 { + /* Fallback if browser doesn’t support vars */ + font-size: 1.75rem !important; + font-size: calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} + +:root:--fs-normalize h2 { + /* Fallback if browser doesn’t support vars */ + font-size: 1.5rem !important; + font-size: calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} + +:root:--fs-normalize h3 { + /* Fallback if browser doesn’t support vars */ + font-size: 1.25rem !important; + font-size: calc(1rem * var(--USER__typeScale)) !important; +} + +:root:--fs-normalize h4, +:root:--fs-normalize h5, +:root:--fs-normalize h6 { + font-size: 1rem !important; +} + +:root:--fs-normalize small { + font-size: smaller !important; +} + +:root:--fs-normalize sub, +:root:--fs-normalize sup { + font-size: 67.5% !important; +} + +/* The following styles kick in if you define the typeScale variable in the DOM. No need to repeat declarations which don’t make use of the variable */ - :root:--fs-normalize[style*="--USER__typeScale"] h1 { - font-size: calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root:--fs-normalize[style*="--USER__typeScale"] h1 { + font-size: calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root:--fs-normalize[style*="--USER__typeScale"] h2 { - font-size: calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; - } +:root:--fs-normalize[style*="--USER__typeScale"] h2 { + font-size: calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !important; +} - :root:--fs-normalize[style*="--USER__typeScale"] h3 { - font-size: calc(1rem * var(--USER__typeScale)) !important; - } +:root:--fs-normalize[style*="--USER__typeScale"] h3 { + font-size: calc(1rem * var(--USER__typeScale)) !important; } \ No newline at end of file diff --git a/css/src/modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css b/css/src/modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css index 9e73f1b0..041e60c1 100644 --- a/css/src/modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css +++ b/css/src/modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css @@ -6,12 +6,19 @@ Repo: https://github.com/readium/readium-css */ -:root[style*="--USER__fontSize"] body { +:root:not(:--deprecated-font-size)[style*="--USER__fontSize"] body { zoom: var(--USER__fontSize) !important; } +/* Older deprecated implementation for when zoom is not supported + or it is explicitly enabled because you don’t want the new one */ + @supports not (zoom: 1) { :root[style*="--USER__fontSize"] { font-size: var(--USER__fontSize) !important; } +} + +:root:--deprecated-font-size[style*="--USER__fontSize"] { + font-size: var(--USER__fontSize) !important; } \ No newline at end of file diff --git a/docs/CSS12-user_prefs.md b/docs/CSS12-user_prefs.md index 77caf443..7dd3ee1f 100644 --- a/docs/CSS12-user_prefs.md +++ b/docs/CSS12-user_prefs.md @@ -89,9 +89,23 @@ Override class: None. This flag is required to change the `font-family` user set To switch back to the publisher’s font, you can either set an empty string as a value or remove the property. +### Toggling the Deprecated Implementation of the Font Size Setting + +Allows to switch to the Deprecated Implementation of the Font Size Setting from version 1. + +``` +--USER__fontSizeImplementation +``` + +Supported value: `readium-deprecatedFontSize-on` + +Override class: None. + +**Note:** This implementation will automatically be used in case `zoom` is not supported. + ### Font Size Normalization -Acts as an explicit switch to force font-normalization in publications whose font-sizing is declared using CSS absolute units, breaking the font-size user setting in engines that don’t support CSS property `zoom`. +Acts as an explicit switch to force font-normalization in publications whose font-sizing is declared using CSS absolute units, breaking the font-size user setting. ``` --USER__fontSizeNormalize diff --git a/docs/CSS19-api.md b/docs/CSS19-api.md index 21e0a2d6..7295218a 100644 --- a/docs/CSS19-api.md +++ b/docs/CSS19-api.md @@ -74,6 +74,18 @@ Scope: `html` Override class: None. This flag is required to change the `font-family` user setting. +* * * + +``` +:--deprecated-font-size +``` + +Preset: `--USER__fontSizeImplementation: readium-deprecatedFontSize-on` + +Scope: `html` + +Override class: None. This flag can be used to force the previous and deprecated implementation of font-size setting. It is also used automatically if the browser/rendering engine does not support CSS property `zoom` – note font-size normalization is not triggered by default in that case. + * * * ``` diff --git a/docs/CSS28-migration_guide.md b/docs/CSS28-migration_guide.md index 2ca7a1cf..b6a944a8 100644 --- a/docs/CSS28-migration_guide.md +++ b/docs/CSS28-migration_guide.md @@ -110,6 +110,10 @@ As a side-effect of this new implementation, please note the `--USER__typeScale` Due to iPadOS “desktop-class experience” interventions, a patch has to be applied when the site is requested (by default) in desktop version, and only in this version (mobile website is fine without it). The selector for the flag can be configured (`:--ipadOS-patch`) and is `[style*="readium-iPadOSPatch-on"]` by default. +Starting version `2.0.0-beta.12` the previous and deprecated implementation of font-size is exposed under a flag that can be configured (`:--deprecated-font-size`) and is `[style*="readium-deprecatedFontSize-on"]` by default. This can be used if you need some time to switch to the new implementation, or simply prefer to use the old one. The font-size normalize is no longer applied by default though, and is relying on another flag (`:--fs-normalize`) with `[style*="readium-normalize-on"]` as default. + +Note that when zoom is not supported, the setting will automatically switch to the previous implementation. Once again, you need to manually apply the font-size normalization as you see fit. + ## Extension of the font-family user setting override In version 1, the font-family user setting overrode a selection of elements of body copy e.g. `p`, `li`, `dt`, etc. This explained why the font-family of headings would remain the same as the one set in authors’ stylesheets for instance. diff --git a/docs/ReadiumCSS_docs.epub b/docs/ReadiumCSS_docs.epub index 21965e8a..5ad66ea2 100644 Binary files a/docs/ReadiumCSS_docs.epub and b/docs/ReadiumCSS_docs.epub differ diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-012.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-012.xhtml index ebdc36a0..500a28ca 100644 --- a/docs/ReadiumCSS_docs/OEBPS/Text/Section-012.xhtml +++ b/docs/ReadiumCSS_docs/OEBPS/Text/Section-012.xhtml @@ -109,10 +109,22 @@ root.style.setProperty("name of var", "");

To switch back to the publisher’s font, you can either set an empty string as a value or remove the property.

+
+

Toggling the Deprecated Implementation of the Font Size Setting

+ +

Allows to switch to the Deprecated Implementation of the Font Size Setting from version 1.

+ + 
--USER__fontSizeImplementation
+ +

Supported value: readium-deprecatedFontSize-on

+ +

Override class: None.

+
+

Font Size Normalization

-

Acts as an explicit switch to orce font-normalization in publications whose font-sizing is declared using CSS absolute units, breaking the font-size user setting in engines that don’t support CSS property zoom.

+

Acts as an explicit switch to orce font-normalization in publications whose font-sizing is declared using CSS absolute units, breaking the font-size user setting.

--USER__fontSizeNormalize
diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml index b53a6edc..e9a56143 100644 --- a/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml +++ b/docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml @@ -80,6 +80,16 @@
+ 
:--deprecated-font-size
+ +

Preset: --USER__fontSizeImplementation: readium-deprecatedFontSize-on

+ +

Scope: html

+ +

Override class: None. This flag can be used to force the previous and deprecated implementation of font-size setting. It is also used automatically if the browser/rendering engine does not support CSS property zoom – note font-size normalization is not triggered by default in that case.

+ +
+ 
:--fs-normalize

Preset: --USER__fontSizeNormalize: readium-normalize-on

diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml index d7f44e8d..263b2406 100644 --- a/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml +++ b/docs/ReadiumCSS_docs/OEBPS/Text/Section-028.xhtml @@ -127,6 +127,10 @@

As a side-effect of this new implementation, please note the --USER__typeScale setting is no longer available.

Due to iPadOS “desktop-class experience” interventions, a patch has to be applied when the site is requested (by default) in desktop mode, and only in this mode (mobile website is fine without it). The selector for the flag can be configured (:--ipadOS-patch) and is [style*="readium-iPadOSPatch-on"] by default.

+ +

Starting version 2.0.0-beta.12 the previous and deprecated implementation of font-size is exposed under a flag that can be configured (:--deprecated-font-size) and is [style*="readium-deprecatedFontSize-on"] by default. This can be used if you need some time to switch to the new implementation, or simply prefer to use the old one. The font-size normalize is no longer applied by default though, and is relying on another flag (:--fs-normalize) with [style*="readium-normalize-on"] as default.

+ +

Note that when zoom is not supported, the setting will automatically switch to the previous implementation. Once again, you need to manually apply the font-size normalization as you see fit.

diff --git a/package-lock.json b/package-lock.json index 3758b111..a0aaa064 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@readium/css", - "version": "2.0.0-beta.11", + "version": "2.0.0-beta.12", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@readium/css", - "version": "2.0.0-beta.11", + "version": "2.0.0-beta.12", "license": "BSD-3-Clause", "devDependencies": { "@daltontan/postcss-import-json": "^1.1.1", diff --git a/package.json b/package.json index 84338902..c4a5ca3a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@readium/css", "description": "A set of reference stylesheets for EPUB Reading Systems", - "version": "2.0.0-beta.11", + "version": "2.0.0-beta.12", "homepage": "https://github.com/readium/readium-css", "license": "BSD-3-Clause", "keywords": [ diff --git a/tests/font-size-deprecated.html b/tests/font-size-deprecated.html new file mode 100644 index 00000000..baa372bb --- /dev/null +++ b/tests/font-size-deprecated.html @@ -0,0 +1,51 @@ + + + + Test + + + + + + + +

Heading 1

+ +

Text. Smaller text. Text followed by sup.[1]

+ +

Heading 2

+ + + +

Heading 3

+ +
+ This is an aside. +
+ +

Heading 4

+ +
+
Artist
+ +
He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. What is the chief element he employs? There stand his trees, each with a hollow trunk, as if a hermit and a crucifix were within; and here sleeps his meadow, and there sleep his cattle; and up from yonder cottage goes a sleepy smoke.
+
+ +
Heading 5
+ + 
h1 {
+  font-family: sans-serif;
+  font-size: 2em;
+  margin: 1.5em 0;
+  text-align: center;
+}
+ +
Heading 6
+ +

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

+ + \ No newline at end of file diff --git a/tests/font-size-normalize.html b/tests/font-size-normalize.html new file mode 100644 index 00000000..cac84062 --- /dev/null +++ b/tests/font-size-normalize.html @@ -0,0 +1,55 @@ + + + + Test + + + + + + + + +

Heading 1

+ +

Text. Smaller text. Text followed by sup.[1]

+ +

Heading 2

+ + + +

Heading 3

+ +
+ This is an aside. +
+ +

Heading 4

+ +
+
Artist
+ +
He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. What is the chief element he employs? There stand his trees, each with a hollow trunk, as if a hermit and a crucifix were within; and here sleeps his meadow, and there sleep his cattle; and up from yonder cottage goes a sleepy smoke.
+
+ +
Heading 5
+ + 
h1 {
+  font-family: sans-serif;
+  font-size: 2em;
+  margin: 1.5em 0;
+  text-align: center;
+}
+ +
Heading 6
+ +

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

+ + \ No newline at end of file