diff --git a/README.md b/README.md index 98e28be6..617a77d1 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Readium CSS provides styles for reflowable text: - media overlays and user highlights; - a set of baselines and recommendations for accessibility, overrides, and internationalization. -**Readium CSS is currently in alpha** (version `1.0.0-alpha.2`). +**Readium CSS is currently in alpha** (version `1.0.0-alpha.3`). ## License diff --git a/css/dist/ReadiumCSS-after.css b/css/dist/ReadiumCSS-after.css index e9187e75..9eb297e2 100644 --- a/css/dist/ReadiumCSS-after.css +++ b/css/dist/ReadiumCSS-after.css @@ -216,38 +216,6 @@ body { --RS__maxLineLength: 40rem !important; } -/* Readium CSS - Default highlights - - A stylesheet for user highlights - - Repo: https://github.com/readium/readium-css */ - -/* User Highlights */ - -.readiumCSS-yellow-highlight { - background-color: rgba(255, 255, 0, 0.5); -} - -.readiumCSS-green-highlight { - background-color: rgba(0, 255, 0, 0.5); -} - -.readiumCSS-orange-highlight { - background-color: rgba(255, 165, 0, 0.5); -} - -.readiumCSS-pink-highlight { - background-color: rgba(255, 105, 180, 0.5); -} - -/* Media overlays */ - -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; -} - /* Readium CSS Night mode @@ -275,7 +243,7 @@ body { :root[style*="readium-night-on"] *:not(a) { color: inherit !important; - background-color: transparent !important; + background-color: var(--RS__backgroundColor) !important; border-color: currentColor !important; } @@ -346,11 +314,9 @@ body { /* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ -:root[style*="readium-sepia-on"] body { - /* Should be transparent but Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=711955&q=mix-blend-mode&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified */ - - color: inherit; - background-color: var(--RS__backgroundColor); +:root[style*="readium-sepia-on"] *:not(a) { + color: inherit !important; + background-color: var(--RS__backgroundColor) !important; } :root[style*="readium-sepia-on"] a:link, @@ -894,4 +860,44 @@ body { :root[style*="readium-advanced-on"][style*="--USER__typeScale"] h3 { font-size: calc(1rem * var(--USER__typeScale)) !important; } + +/* Readium CSS + Default highlights + + A stylesheet for user highlights + + Repo: https://github.com/readium/readium-css */ + +/* User Highlights */ + +.readiumCSS-yellow-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-yellow-highlight, +:root[style*="readium-night-on"] .readiumCSS-yellow-highlight { + background-color: rgba(255, 255, 0, 0.5) !important; +} + +.readiumCSS-green-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-green-highlight, +:root[style*="readium-night-on"] .readiumCSS-green-highlight { + background-color: rgba(0, 255, 0, 0.5) !important; +} + +.readiumCSS-orange-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-orange-highlight, +:root[style*="readium-night-on"] .readiumCSS-orange-highlight { + background-color: rgba(255, 165, 0, 0.5) !important; +} + +.readiumCSS-pink-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-pink-highlight, +:root[style*="readium-night-on"] .readiumCSS-pink-highlight { + background-color: rgba(255, 105, 180, 0.5) !important; +} + +/* Media overlays */ + +.readiumCSS-mo-active-default { + color: black !important; + background-color: yellow !important; +} /*# sourceMappingURL=ReadiumCSS-after.css.map */ \ No newline at end of file diff --git a/css/dist/cjk-horizontal/ReadiumCSS-after.css b/css/dist/cjk-horizontal/ReadiumCSS-after.css index f57a44a0..d8b07b31 100644 --- a/css/dist/cjk-horizontal/ReadiumCSS-after.css +++ b/css/dist/cjk-horizontal/ReadiumCSS-after.css @@ -216,38 +216,6 @@ body { --RS__maxLineLength: 40rem !important; } -/* Readium CSS - Default highlights - - A stylesheet for user highlights - - Repo: https://github.com/readium/readium-css */ - -/* User Highlights */ - -.readiumCSS-yellow-highlight { - background-color: rgba(255, 255, 0, 0.5); -} - -.readiumCSS-green-highlight { - background-color: rgba(0, 255, 0, 0.5); -} - -.readiumCSS-orange-highlight { - background-color: rgba(255, 165, 0, 0.5); -} - -.readiumCSS-pink-highlight { - background-color: rgba(255, 105, 180, 0.5); -} - -/* Media overlays */ - -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; -} - /* Readium CSS Night mode @@ -275,7 +243,7 @@ body { :root[style*="readium-night-on"] *:not(a) { color: inherit !important; - background-color: transparent !important; + background-color: var(--RS__backgroundColor) !important; border-color: currentColor !important; } @@ -346,11 +314,9 @@ body { /* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ -:root[style*="readium-sepia-on"] body { - /* Should be transparent but Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=711955&q=mix-blend-mode&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified */ - - color: inherit; - background-color: var(--RS__backgroundColor); +:root[style*="readium-sepia-on"] *:not(a) { + color: inherit !important; + background-color: var(--RS__backgroundColor) !important; } :root[style*="readium-sepia-on"] a:link, @@ -676,4 +642,44 @@ body { :root[style*="readium-advanced-on"][style*="--USER__typeScale"] h3 { font-size: calc(1rem * var(--USER__typeScale)) !important; } + +/* Readium CSS + Default highlights + + A stylesheet for user highlights + + Repo: https://github.com/readium/readium-css */ + +/* User Highlights */ + +.readiumCSS-yellow-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-yellow-highlight, +:root[style*="readium-night-on"] .readiumCSS-yellow-highlight { + background-color: rgba(255, 255, 0, 0.5) !important; +} + +.readiumCSS-green-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-green-highlight, +:root[style*="readium-night-on"] .readiumCSS-green-highlight { + background-color: rgba(0, 255, 0, 0.5) !important; +} + +.readiumCSS-orange-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-orange-highlight, +:root[style*="readium-night-on"] .readiumCSS-orange-highlight { + background-color: rgba(255, 165, 0, 0.5) !important; +} + +.readiumCSS-pink-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-pink-highlight, +:root[style*="readium-night-on"] .readiumCSS-pink-highlight { + background-color: rgba(255, 105, 180, 0.5) !important; +} + +/* Media overlays */ + +.readiumCSS-mo-active-default { + color: black !important; + background-color: yellow !important; +} /*# sourceMappingURL=ReadiumCSS-after.css.map */ \ No newline at end of file diff --git a/css/dist/cjk-vertical/ReadiumCSS-after.css b/css/dist/cjk-vertical/ReadiumCSS-after.css index cb34fa28..e8505031 100644 --- a/css/dist/cjk-vertical/ReadiumCSS-after.css +++ b/css/dist/cjk-vertical/ReadiumCSS-after.css @@ -229,38 +229,6 @@ body { /* Do we add a top/bottom margin for body in vertical scroll or not? */ -/* Readium CSS - Default highlights - - A stylesheet for user highlights - - Repo: https://github.com/readium/readium-css */ - -/* User Highlights */ - -.readiumCSS-yellow-highlight { - background-color: rgba(255, 255, 0, 0.5); -} - -.readiumCSS-green-highlight { - background-color: rgba(0, 255, 0, 0.5); -} - -.readiumCSS-orange-highlight { - background-color: rgba(255, 165, 0, 0.5); -} - -.readiumCSS-pink-highlight { - background-color: rgba(255, 105, 180, 0.5); -} - -/* Media overlays */ - -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; -} - /* Readium CSS Night mode @@ -288,7 +256,7 @@ body { :root[style*="readium-night-on"] *:not(a) { color: inherit !important; - background-color: transparent !important; + background-color: var(--RS__backgroundColor) !important; border-color: currentColor !important; } @@ -359,11 +327,9 @@ body { /* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ -:root[style*="readium-sepia-on"] body { - /* Should be transparent but Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=711955&q=mix-blend-mode&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified */ - - color: inherit; - background-color: var(--RS__backgroundColor); +:root[style*="readium-sepia-on"] *:not(a) { + color: inherit !important; + background-color: var(--RS__backgroundColor) !important; } :root[style*="readium-sepia-on"] a:link, @@ -651,4 +617,44 @@ body { :root[style*="readium-advanced-on"][style*="--USER__typeScale"] h3 { font-size: calc(1rem * var(--USER__typeScale)) !important; } + +/* Readium CSS + Default highlights + + A stylesheet for user highlights + + Repo: https://github.com/readium/readium-css */ + +/* User Highlights */ + +.readiumCSS-yellow-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-yellow-highlight, +:root[style*="readium-night-on"] .readiumCSS-yellow-highlight { + background-color: rgba(255, 255, 0, 0.5) !important; +} + +.readiumCSS-green-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-green-highlight, +:root[style*="readium-night-on"] .readiumCSS-green-highlight { + background-color: rgba(0, 255, 0, 0.5) !important; +} + +.readiumCSS-orange-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-orange-highlight, +:root[style*="readium-night-on"] .readiumCSS-orange-highlight { + background-color: rgba(255, 165, 0, 0.5) !important; +} + +.readiumCSS-pink-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-pink-highlight, +:root[style*="readium-night-on"] .readiumCSS-pink-highlight { + background-color: rgba(255, 105, 180, 0.5) !important; +} + +/* Media overlays */ + +.readiumCSS-mo-active-default { + color: black !important; + background-color: yellow !important; +} /*# sourceMappingURL=ReadiumCSS-after.css.map */ \ No newline at end of file diff --git a/css/dist/rtl/ReadiumCSS-after.css b/css/dist/rtl/ReadiumCSS-after.css index 4c4d672a..e63f8298 100644 --- a/css/dist/rtl/ReadiumCSS-after.css +++ b/css/dist/rtl/ReadiumCSS-after.css @@ -216,38 +216,6 @@ body { --RS__maxLineLength: 40rem !important; } -/* Readium CSS - Default highlights - - A stylesheet for user highlights - - Repo: https://github.com/readium/readium-css */ - -/* User Highlights */ - -.readiumCSS-yellow-highlight { - background-color: rgba(255, 255, 0, 0.5); -} - -.readiumCSS-green-highlight { - background-color: rgba(0, 255, 0, 0.5); -} - -.readiumCSS-orange-highlight { - background-color: rgba(255, 165, 0, 0.5); -} - -.readiumCSS-pink-highlight { - background-color: rgba(255, 105, 180, 0.5); -} - -/* Media overlays */ - -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; -} - /* Readium CSS Night mode @@ -275,7 +243,7 @@ body { :root[style*="readium-night-on"] *:not(a) { color: inherit !important; - background-color: transparent !important; + background-color: var(--RS__backgroundColor) !important; border-color: currentColor !important; } @@ -346,11 +314,9 @@ body { /* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ -:root[style*="readium-sepia-on"] body { - /* Should be transparent but Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=711955&q=mix-blend-mode&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified */ - - color: inherit; - background-color: var(--RS__backgroundColor); +:root[style*="readium-sepia-on"] *:not(a) { + color: inherit !important; + background-color: var(--RS__backgroundColor) !important; } :root[style*="readium-sepia-on"] a:link, @@ -748,4 +714,44 @@ body { :root[style*="readium-advanced-on"][style*="--USER__typeScale"] h3 { font-size: calc(1rem * var(--USER__typeScale)) !important; } + +/* Readium CSS + Default highlights + + A stylesheet for user highlights + + Repo: https://github.com/readium/readium-css */ + +/* User Highlights */ + +.readiumCSS-yellow-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-yellow-highlight, +:root[style*="readium-night-on"] .readiumCSS-yellow-highlight { + background-color: rgba(255, 255, 0, 0.5) !important; +} + +.readiumCSS-green-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-green-highlight, +:root[style*="readium-night-on"] .readiumCSS-green-highlight { + background-color: rgba(0, 255, 0, 0.5) !important; +} + +.readiumCSS-orange-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-orange-highlight, +:root[style*="readium-night-on"] .readiumCSS-orange-highlight { + background-color: rgba(255, 165, 0, 0.5) !important; +} + +.readiumCSS-pink-highlight, +:root[style*="readium-sepia-on"] .readiumCSS-pink-highlight, +:root[style*="readium-night-on"] .readiumCSS-pink-highlight { + background-color: rgba(255, 105, 180, 0.5) !important; +} + +/* Media overlays */ + +.readiumCSS-mo-active-default { + color: black !important; + background-color: yellow !important; +} /*# sourceMappingURL=ReadiumCSS-after.css.map */ \ No newline at end of file diff --git a/css/src/ReadiumCSS-after-cjk-horizontal.css b/css/src/ReadiumCSS-after-cjk-horizontal.css index e42df937..58d9fa05 100644 --- a/css/src/ReadiumCSS-after-cjk-horizontal.css +++ b/css/src/ReadiumCSS-after-cjk-horizontal.css @@ -1,7 +1,6 @@ @import "../ReadiumCSS-config.css"; @import "modules/ReadiumCSS-pagination.css"; @import "modules/ReadiumCSS-scroll.css"; -@import "modules/ReadiumCSS-highlights.css"; @import "modules/ReadiumCSS-night_mode.css"; @import "modules/ReadiumCSS-sepia_mode.css"; @import "modules/ReadiumCSS-os_a11y.css"; @@ -12,4 +11,5 @@ @import "modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-lineHeight_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-paraSpacing_pref.css"; -@import "modules/ReadiumCSS-fs_normalize.css"; \ No newline at end of file +@import "modules/ReadiumCSS-fs_normalize.css"; +@import "modules/ReadiumCSS-highlights.css"; \ No newline at end of file diff --git a/css/src/ReadiumCSS-after-cjk-vertical.css b/css/src/ReadiumCSS-after-cjk-vertical.css index c56fbd14..0671faec 100644 --- a/css/src/ReadiumCSS-after-cjk-vertical.css +++ b/css/src/ReadiumCSS-after-cjk-vertical.css @@ -1,7 +1,6 @@ @import "../ReadiumCSS-config.css"; @import "modules/ReadiumCSS-pagination-vertical.css"; @import "modules/ReadiumCSS-scroll-vertical.css"; -@import "modules/ReadiumCSS-highlights.css"; @import "modules/ReadiumCSS-night_mode.css"; @import "modules/ReadiumCSS-sepia_mode.css"; @import "modules/ReadiumCSS-os_a11y.css"; @@ -11,4 +10,5 @@ @import "modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-lineHeight_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-paraSpacing-vertical_pref.css"; -@import "modules/ReadiumCSS-fs_normalize.css"; \ No newline at end of file +@import "modules/ReadiumCSS-fs_normalize.css"; +@import "modules/ReadiumCSS-highlights.css"; \ No newline at end of file diff --git a/css/src/ReadiumCSS-after-rtl.css b/css/src/ReadiumCSS-after-rtl.css index da12fdda..b25008a3 100644 --- a/css/src/ReadiumCSS-after-rtl.css +++ b/css/src/ReadiumCSS-after-rtl.css @@ -1,7 +1,6 @@ @import "../ReadiumCSS-config.css"; @import "modules/ReadiumCSS-pagination.css"; @import "modules/ReadiumCSS-scroll.css"; -@import "modules/ReadiumCSS-highlights.css"; @import "modules/ReadiumCSS-night_mode.css"; @import "modules/ReadiumCSS-sepia_mode.css"; @import "modules/ReadiumCSS-os_a11y.css"; @@ -15,4 +14,5 @@ @import "modules/user-settings-submodules/ReadiumCSS-paraSpacing_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-paraIndent_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-arabicLigatures_pref.css"; -@import "modules/ReadiumCSS-fs_normalize.css"; \ No newline at end of file +@import "modules/ReadiumCSS-fs_normalize.css"; +@import "modules/ReadiumCSS-highlights.css"; \ No newline at end of file diff --git a/css/src/ReadiumCSS-after.css b/css/src/ReadiumCSS-after.css index 00526ad2..dfb9c638 100644 --- a/css/src/ReadiumCSS-after.css +++ b/css/src/ReadiumCSS-after.css @@ -1,7 +1,6 @@ @import "../ReadiumCSS-config.css"; @import "modules/ReadiumCSS-pagination.css"; @import "modules/ReadiumCSS-scroll.css"; -@import "modules/ReadiumCSS-highlights.css"; @import "modules/ReadiumCSS-night_mode.css"; @import "modules/ReadiumCSS-sepia_mode.css"; @import "modules/ReadiumCSS-os_a11y.css"; @@ -18,4 +17,5 @@ @import "modules/user-settings-submodules/ReadiumCSS-paraIndent_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-wordSpacing_pref.css"; @import "modules/user-settings-submodules/ReadiumCSS-letterSpacing_pref.css"; -@import "modules/ReadiumCSS-fs_normalize.css"; \ No newline at end of file +@import "modules/ReadiumCSS-fs_normalize.css"; +@import "modules/ReadiumCSS-highlights.css"; \ No newline at end of file diff --git a/css/src/modules/ReadiumCSS-highlights.css b/css/src/modules/ReadiumCSS-highlights.css index 4e84ef7e..1d9a173e 100644 --- a/css/src/modules/ReadiumCSS-highlights.css +++ b/css/src/modules/ReadiumCSS-highlights.css @@ -8,20 +8,28 @@ /* User Highlights */ -.readiumCSS-yellow-highlight { - background-color: rgba(255, 255, 0, 0.5); +.readiumCSS-yellow-highlight, +:root:--sepia-mode .readiumCSS-yellow-highlight, +:root:--night-mode .readiumCSS-yellow-highlight { + background-color: rgba(255, 255, 0, 0.5) !important; } -.readiumCSS-green-highlight { - background-color: rgba(0, 255, 0, 0.5); +.readiumCSS-green-highlight, +:root:--sepia-mode .readiumCSS-green-highlight, +:root:--night-mode .readiumCSS-green-highlight { + background-color: rgba(0, 255, 0, 0.5) !important; } -.readiumCSS-orange-highlight { - background-color: rgba(255, 165, 0, 0.5); +.readiumCSS-orange-highlight, +:root:--sepia-mode .readiumCSS-orange-highlight, +:root:--night-mode .readiumCSS-orange-highlight { + background-color: rgba(255, 165, 0, 0.5) !important; } -.readiumCSS-pink-highlight { - background-color: rgba(255, 105, 180, 0.5); +.readiumCSS-pink-highlight, +:root:--sepia-mode .readiumCSS-pink-highlight, +:root:--night-mode .readiumCSS-pink-highlight { + background-color: rgba(255, 105, 180, 0.5) !important; } /* Media overlays */ diff --git a/css/src/modules/ReadiumCSS-night_mode.css b/css/src/modules/ReadiumCSS-night_mode.css index 6f1a4475..d932f5b8 100644 --- a/css/src/modules/ReadiumCSS-night_mode.css +++ b/css/src/modules/ReadiumCSS-night_mode.css @@ -24,7 +24,7 @@ /* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ :root:--night-mode *:not(a) { - background-color: transparent !important; + background-color: var(--RS__backgroundColor) !important; color: inherit !important; border-color: currentColor !important; } diff --git a/css/src/modules/ReadiumCSS-sepia_mode.css b/css/src/modules/ReadiumCSS-sepia_mode.css index db3e1be7..49e31f9c 100644 --- a/css/src/modules/ReadiumCSS-sepia_mode.css +++ b/css/src/modules/ReadiumCSS-sepia_mode.css @@ -24,11 +24,9 @@ /* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ -:root:--sepia-mode body { - background-color: var(--RS__backgroundColor); - /* Should be transparent but Chrome bug https://bugs.chromium.org/p/chromium/issues/detail?id=711955&q=mix-blend-mode&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified */ - - color: inherit; +:root:--sepia-mode *:not(a) { + background-color: var(--RS__backgroundColor) !important; + color: inherit !important; } :root:--sepia-mode a:link, diff --git a/docs/CSS10-libre_fonts.md b/docs/CSS10-libre_fonts.md index 95398743..e2e47443 100644 --- a/docs/CSS10-libre_fonts.md +++ b/docs/CSS10-libre_fonts.md @@ -4,7 +4,7 @@ While we recommend using system fonts to get the best performance whenever possible, implementers might want to use Open Source Fonts to offer more choice to users. On the Android platform, for instance, system fonts are limited to one typeface per generic family (`serif`, `sans-serif`, `fantasy`, `monospace`, and `cursive`), which means implementers don’t get a lot of options out of the box. -Consequently, amongst the thousands of fonts available online, a pre-selection of 27 typefaces have been reviewed extensively. Those typefaces were selected based on multiple factors: +Consequently, amongst the thousands of fonts available online, a pre-selection of 28 typefaces have been reviewed extensively. Those typefaces were selected based on multiple factors: 1. they have enough styles (at least the 4 “core styles” i.e. `regular`, `italic`, `bold`, `bold italic`) so that implementers don’t break authors’ expectations; 2. they can be used in body copy; @@ -12,7 +12,7 @@ Consequently, amongst the thousands of fonts available online, a pre-selection o 4. they can be free alternatives to system fonts available on other platforms; 5. they offer good-enough support for at least latin-based languages. -Here’s the complete list of those 27 fonts: +Here’s the complete list of those 28 fonts: - Alegreya - Bitter @@ -29,6 +29,7 @@ Here’s the complete list of those 27 fonts: - IBM Plex Sans - IBM Plex Serif - Libre Franklin +- Literata - Lora - Merriweather Sans - Merriweather Serif @@ -44,7 +45,7 @@ Here’s the complete list of those 27 fonts: ## How were those fonts reviewed -Each of the 27 fonts has been undergoing tests in real rendering situations. +Each of the 28 fonts has been undergoing tests in real rendering situations. They were rendered on the Android, iOS, MacOS, and Windows platforms, using SD and HD displays when possible, in multiple browsers (IE11, Edge, Safari, Chrome, Firefox), and in different reading modes (day, sepia, night). @@ -90,6 +91,7 @@ For your information, here are the results for Windows ClearType rendering at `1 - Bitter (the Google Fonts version was reviewed but the [FontSquirrel version is more complete](https://www.fontsquirrel.com/fonts/bitter)) - Charis SIL - Gandhi Serif +- Literata - PT Sans - PT Serif - Rubik @@ -109,7 +111,7 @@ For your information, here are the results for Windows ClearType rendering at `1 ## Recommended Typefaces -An extended selection of 12 typefaces are recommended to offer implementers some flexibility. With an extended solution, it is likely that all apps leveraging Readium CSS won’t end up using the same exact selection. +An extended selection of 13 typefaces are recommended to offer implementers some flexibility. With an extended solution, it is likely that all apps leveraging Readium CSS won’t end up using the same exact selection. **Note: Supported Languages focus on diacritics. Support for languages using the latin alphabet, like English, is implied.** @@ -193,6 +195,32 @@ Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, OpenType Features: none. +#### Literata + +![Literata compared to Georgia. The typeface is noticeably larger and bolder. When comparing an entire paragraph, this become obvious in the sense fewer words fit on a line. This could become an advantage on larger screens, as the user won’t have to increase font-size.](assets/literata.png) + +Global info: + +- Source: https://github.com/googlefonts/literata +- Google Fonts: YES +- Design: TypeTogether +- License: SIL-OFL + +Technical details: + +- Reference: Georgia, Droid Serif +- Classification: Modern, Slab +- Styles: 8 +- Metrics: + - Contrast: TBD + - x-height: TBD + - weight: TBD + - width: TBD + +Supported Languages: Albanian, Bosnian, Czech, Danish, Dutch, Estonian, Finnish, French, German, Hungarian, Italian, Latvian, Lithuanian, Norwegian, Polish, Portuguese, Romanian, Slovak, Slovenian, Spanish, Swedish, Turkish, Cyrillic, Greek. + +OpenType Features: small caps, numeric figure values, numeric spacing values. + #### Merriweather ![Merriweather compared to Iowan Old Style. Although more condensed, the typeface has been designed for screens and offers a larger x-height and bolder strokes. This shows when comparing an entire paragraph, as fewer words fit on a line and an extra line is even created.](assets/merriweather.png) diff --git a/docs/Fonts-review/Literata/literata.html b/docs/Fonts-review/Literata/literata.html new file mode 100644 index 00000000..70fccc4b --- /dev/null +++ b/docs/Fonts-review/Literata/literata.html @@ -0,0 +1,123 @@ + + + + Literata Book + + + + +

Literata Book

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
albanian✓
bosnian✓
czech✓
danish✓
dutch✓
estonian✓
finnish✓
french✓
german✓
hungarian✓
italian✓
latvian✓
lithuanian✓
norwegian✓
polish✓
portuguese✓
romanian✓
slovak✓
slovenian✓
spanish✓
swedish✓
turkish✓
russian✓
greek✓
small caps✓
numeric figure values✓
numeric spacing values✓
+ + \ No newline at end of file diff --git a/docs/Fonts-review/Literata/literata.png b/docs/Fonts-review/Literata/literata.png new file mode 100644 index 00000000..8e4719c1 Binary files /dev/null and b/docs/Fonts-review/Literata/literata.png differ diff --git a/docs/ReadiumCSS_docs.epub b/docs/ReadiumCSS_docs.epub index e3b18e3d..5fe535ce 100644 Binary files a/docs/ReadiumCSS_docs.epub and b/docs/ReadiumCSS_docs.epub differ diff --git a/docs/ReadiumCSS_docs/OEBPS/Images/literata.png b/docs/ReadiumCSS_docs/OEBPS/Images/literata.png new file mode 100644 index 00000000..5d21a441 Binary files /dev/null and b/docs/ReadiumCSS_docs/OEBPS/Images/literata.png differ diff --git a/docs/ReadiumCSS_docs/OEBPS/Text/Section-010.xhtml b/docs/ReadiumCSS_docs/OEBPS/Text/Section-010.xhtml index 7498b434..b8ec6b1e 100644 --- a/docs/ReadiumCSS_docs/OEBPS/Text/Section-010.xhtml +++ b/docs/ReadiumCSS_docs/OEBPS/Text/Section-010.xhtml @@ -17,7 +17,7 @@

While we recommend using system fonts to get the best performance whenever possible, implementers might want to use Open Source Fonts to offer more choice to users. On the Android platform, for instance, system fonts are limited to one typeface per generic family (serif, sans-serif, fantasy, monospace, and cursive), which means implementers don’t get a lot of options out of the box.

-

Consequently, amongst the thousands of fonts available online, a pre-selection of 27 typefaces have been reviewed extensively. Those typefaces were selected based on multiple factors:

+

Consequently, amongst the thousands of fonts available online, a pre-selection of 28 typefaces have been reviewed extensively. Those typefaces were selected based on multiple factors:

  1. they have enough styles (at least the 4 “core styles” i.e. regular, italic, bold, bold italic) so that implementers don’t break authors’ expectations;
    2. @@ -31,7 +31,7 @@
  2. they offer good-enough support for at least latin-based languages.
-

Here’s the complete list of those 27 fonts:

+

Here’s the complete list of those 28 fonts: