diff --git a/CHANGELOG.md b/CHANGELOG.md index e50d108558..361b0aa17c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,12 @@ All notable changes to this project will be documented in this file. Take a look #### Navigator * `AudioNavigator.stop()` stops the playback and ends the audio session. +* Upgraded Readium CSS to version 2.0.5. + * Added the `noRuby` preference to allow hiding ruby (furigana) annotations in CJK publications. + * Added the `lineLength` preference, which behaves as a factor applied to the maximum width of the text column, offering finer control over text presentation than `pageMargins` (which solely handles the padding around the text). + * Added `blendImages`, `darkenImages`, `invertImages`, and `invertGaiji` preferences for precise CSS filtering of images. + * Added `CSSRSProperties.defaultLineLength`, `viewportWidth`, `scrollPaddingTop`, `scrollPaddingBottom`, `scrollPaddingLeft`, and `scrollPaddingRight` to configure Readium CSS v2 reading system properties. + * Added optional CSS minification to the build scripts (`make scripts minify=true`). ### Changed @@ -21,6 +27,16 @@ All notable changes to this project will be documented in this file. Take a look * `end(with:)` takes the `AudioSessionUser` instead of an `AudioSessionToken`, which is removed. * `NowPlayingInfo.Media.chapterNumber` moved to `NowPlayingInfo.Playback.chapterNumber`, [see the migration guide](docs/Migration%20Guide.md). +#### Navigator + +* Changes in the EPUB navigator preferences, following the upgrade to Readium CSS v2. + * `CSSRSProperties.maxLineLength` is deprecated in favor of `defaultLineLength` to match Readium CSS v2, [see the migration guide](docs/Migration%20Guide.md). + * Changed `columnCount` preference in `EPUBPreferences`, `EPUBSettings`, and `EPUBDefaults` to `Int` to support arbitrary column counts. The `ColumnCount` enum is removed, [see the migration guide](docs/Migration%20Guide.md). + * Replaced the `imageFilter` preference with `blendImages`, `darkenImages`, `invertImages`, and `invertGaiji`. The `ImageFilter` enum is removed, [see the migration guide](docs/Migration%20Guide.md). + * Removed the `publisherStyles` preference. Readium CSS v2 applies the user settings as soon as they are set, [see the migration guide](docs/Migration%20Guide.md). + * Removed the `typeScale` preference, as the type scale user setting is no longer available in Readium CSS v2. + * Removed `CSSUserProperties.fontOverride`, `advancedSettings`, and `pageMargins`, which don't exist in Readium CSS v2. + ### Fixed #### Navigator diff --git a/Makefile b/Makefile index 4f21cb571c..82f4e00f16 100644 --- a/Makefile +++ b/Makefile @@ -8,6 +8,7 @@ help: \t\t\tUse 'lcp=' to enable LCP.\n\ podspecs\t\tGenerate the CocoaPods podspecs\n\ scripts\t\tBundle the Navigator EPUB scripts\n\ + \t\t\tUse 'minify=true' to minify CSS assets.\n\ test\t\t\tRun unit tests\n\ \t\t\tUse 'only=' to run a single test target.\n\ lint-format\t\tVerify formatting\n\ @@ -65,7 +66,7 @@ scripts: pnpm run lint && \ pnpm run typecheck && \ pnpm run test && \ - pnpm run bundle + MINIFY_CSS=$(minify) pnpm run bundle .PHONY: update-scripts update-scripts: diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md index b9d6ef6ee4..a8726098b5 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md @@ -25,13 +25,9 @@ Finally, page progression is impacted: Disabled user settings: - `hyphens`; -- `word-spacing`; +- a11y text normalization (`a11yNormalize`); - `letter-spacing`. -Added user settings: - -- `font-variant-ligatures` (mapped to `--USER__ligatures` CSS variable). - ## CJK Chinese, Japanese, Korean, and Mongolian can be either written `horizontal-tb` or `vertical-*`. Consequently, there are stylesheets for horizontal and vertical writing modes. @@ -53,9 +49,14 @@ Disabled user settings: - `text-align`; - `hyphens`; +- a11y text normalization (`a11yNormalize`); +- `ligatures`; - paragraphs’ indent; -- `word-spacing`; -- `letter-spacing`. +- `word-spacing`. + +Added user settings: + +- hiding/disabling ruby (mapped to `--USER__noRuby: readium-noRuby-on` flag). ### Vertical @@ -86,9 +87,14 @@ Disabled user settings: - `column-count` (number of columns); - `text-align`; - `hyphens`; +- a11y text normalization (`a11yNormalize`); +- `ligatures`; - paragraphs’ indent; -- `word-spacing`; -- `letter-spacing`. +- `word-spacing`. + +Added user settings: + +- hiding/disabling ruby (mapped to `--USER__noRuby: readium-noRuby-on` flag). ### EBPAJ Polyfill @@ -108,5 +114,4 @@ This is currently an edge case as we still have to see whether we want to suppor - Traditional is written `vertical-lr` so we can’t use `page-progression-direction` as an hint, and we must check if the language item (`mn`) is enough: - if `mn-Mong` is set, then `vertical-lr` must be used; - if `mn-Cyrl` is set, then the publication is in cyrillic and it is `horizontal-tb`. -- We don’t currently support the `mn` language, and we can’t rely on system fonts to do so, we’ll have to embed one. - +- We don’t currently support the `mn` language, and we can’t rely on system fonts to do so, we’ll have to embed one. \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css index eb6124c286..020aff7693 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css @@ -1,922 +1,589 @@ -/* Readium CSS - Config module - - A file allowing implementers to customize flags for reading modes, - user settings, etc. - - Repo: https://github.com/readium/readium-css */ - -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ - -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ - -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ - -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ - -/* User view = paged | scrolled */ - -/* Font-family override */ - -/* Advanced settings */ - -/* Reading Modes */ - -/* Filters (images) */ - -/* Accessibility normalization */ - -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ - -/* Direction i.e. ltr and rtl */ - -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Pagination module - - A set of styles to paginate ePublications - - Repo: https://github.com/readium/readium-css */ - -/* Config */ +:root{ -/* Columns are responsive by default, even if column-width is set in pixels, - which means two-page spread will switch to single page depending on current font-size. - If you want more control, I’m afraid you’ll have to update colWidth/colGap dynamically, - which is how a significant amount of RS do at the moment. */ + --RS__viewportWidth:100%; -/* Default for smartphone portrait (small screens) */ + --RS__pageGutter:0; -:root { - /* Your columns’ width floor */ - --RS__colWidth: 45em; /* The width at which we’ll switch to 2 columns by default. PS: you can’t set it in rem */ + --RS__defaultLineLength:100%; - /* Ideal number of columns (depending on columns’ width floor) */ - --RS__colCount: 1; + --RS__colGap:0; - /* Gap between columns (in pixels so that it won’t resize with font-size) */ - --RS__colGap: 0; + --RS__colCount:1; - /* Optimal line-length (rem will take :root font-size into account, whatever the body’s font-size) */ - --RS__maxLineLength: 40rem; - - /* Default page horizontal margins (in pixels so that it won’t resize with font-size) */ - --RS__pageGutter: 20px; /* See if colGap and pageGutter can be the same var */ + --RS__colWidth:100vw; } -/* Reset page margins for Forward compatibility */ - -@page { - margin: 0 !important; +@page{ + margin:0 !important; } -/* :root selector has same specificity as a class i.e. 0010 - We might have to change that to html / context - -> https://css-tricks.com/almanac/selectors/r/root/ */ - -:root { - - /* In case you use left position to scroll, can be removed if using transform: translateX() */ - position: relative; - - -webkit-column-width: var(--RS__colWidth); - -moz-column-width: var(--RS__colWidth); - column-width: var(--RS__colWidth); - - /* Init pagination */ - /* TODO: document columns’ logic cos it might feel weird at first */ - -webkit-column-count: var(--RS__colCount); - -moz-column-count: var(--RS__colCount); - column-count: var(--RS__colCount); - - -webkit-column-gap: var(--RS__colGap); - -moz-column-gap: var(--RS__colGap); - column-gap: var(--RS__colGap); - - /* Default is balance and we want columns to be filled entirely (100vh) */ - -moz-column-fill: auto; - column-fill: auto; - width: 100%; - height: 100vh; - max-width: 100%; - max-height: 100vh; - min-width: 100%; - min-height: 100vh; - padding: 0 !important; - margin: 0 !important; - - /* Column size will depend on this if we want to make it responsive */ - font-size: 100% !important; - - -webkit-text-size-adjust: 100%; +:root{ + position:relative; - /* Switch to newer box model (not inherited by authors’ styles) */ - box-sizing: border-box; + -webkit-column-width:var(--RS__colWidth); + -moz-column-width:var(--RS__colWidth); + column-width:var(--RS__colWidth); + -webkit-column-count:var(--RS__colCount); + -moz-column-count:var(--RS__colCount); + column-count:var(--RS__colCount); - /* Fix bug for older Chrome */ - -webkit-perspective: 1; - /* Prevents options pop-up when long tap in webkit */ - -webkit-touch-callout: none; + -webkit-column-gap:var(--RS__colGap); + -moz-column-gap:var(--RS__colGap); + column-gap:var(--RS__colGap); + -moz-column-fill:auto; + column-fill:auto; + width:var(--RS__viewportWidth); + height:100vh; + max-width:var(--RS__viewportWidth); + max-height:100vh; + min-width:var(--RS__viewportWidth); + min-height:100vh; + padding:0 !important; + margin:0 !important; + font-size:1rem !important; + box-sizing:border-box; + -webkit-touch-callout:none; } -body { - /* overflow: hidden; bugfix: contents won’t paginate in Firefox and one sample in Safari */ - width: 100%; - - /* Limit line-length but we have to reset when 2 columns and control the viewport. - By using max-width + margin auto, margins will shrink when font-size increases, - which is what would be expected in terms of typography. */ - max-width: var(--RS__maxLineLength) !important; - padding: 0 var(--RS__pageGutter) !important; - margin: 0 auto !important; - - /* We need a minimum padding on body so that descandants/ascendants in italic/script are not cut-off. - Drawback: we have to use border-box so that it doesn’t screw the box model, - which means it impacts colWidth and max-width */ - box-sizing: border-box; +body{ + width:100%; + max-width:var(--RS__defaultLineLength) !important; + margin:0 auto !important; + box-sizing:border-box; } -/* We’ll now redefine margins and columns depending on the minimum width available - The goal is having the simplest model possible and avoid targeting devices */ - -/* Smartphone landscape */ - -@media screen and (min-width: 35em) { - :root { - --RS__pageGutter: 30px; - } +:root:not([style*="readium-scroll-on"]) body{ + padding:0 var(--RS__pageGutter) !important; } -/* Tablet portrait */ - -@media screen and (min-width: 45em) { - :root { - --RS__pageGutter: 40px; - } +:root:not([style*="readium-noOverflow-on"]) body{ + overflow:hidden; } -/* Desktop + tablet large */ +@supports (overflow: clip){ -/* We get the previous settings, we just change the margins */ + :root:not([style*="readium-noOverflow-on"]){ + overflow:clip; + } -@media screen and (min-width: 75em) { - :root { - --RS__pageGutter: 50px; - } + :root:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; + overflow-clip-margin:content-box; + } } -/* At this point (80em or so), constraining line length must be done at the web view/iframe level, or by limiting the size of :root itself */ - -/* Responsive columns */ - -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { - :root { - /* The size at which we want 2 columns to switch to 1 (depending on font-size) */ - --RS__colWidth: 20em; /* 20 * 16 = 320px but 20 * 28 = 560px so it will switch to 1 col @ 175% font-size (user-setting) on an iPad */ - /* We constrain to 2 columns so that we can never get 3 or 4, etc. */ - --RS__colCount: 2; - --RS__maxLineLength: 39.99rem; /* If we don’t use this, colNumber user setting won’t work in Safari… */ - } +:root[style*="readium-scroll-on"]{ + -webkit-columns:auto auto !important; + -moz-columns:auto auto !important; + columns:auto auto !important; + width:auto !important; + height:auto !important; + max-width:none !important; + max-height:none !important; + min-width:0 !important; + min-height:0 !important; } -/* Readium CSS - Scroll module - - A set of styles to scroll ePublications - This module overrides pagination - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-scroll-on"] { - - /* Reset columns, auto + auto = columns can’t be created */ - -webkit-columns: auto auto !important; - -moz-columns: auto auto !important; - columns: auto auto !important; - width: auto !important; - height: auto !important; - max-width: none !important; - max-height: none !important; - /* Reset html size so that the user can scroll */ - min-width: 0 !important; - min-height: 0 !important; +:root[style*="readium-scroll-on"] body{ + max-width:var(--RS__defaultLineLength) !important; + box-sizing:border-box !important; } -/* Make sure line-length is limited in all configs */ - -:root[style*="readium-scroll-on"] body { - --RS__maxLineLength: 40rem !important; +:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{ + overflow:auto; } -/* Readium CSS - Night mode - - A preset theme for night mode - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ +@supports (overflow: clip){ -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ - -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; - - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){ + overflow:auto; + } - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; + } } -/* 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-night-on"] *:not(a) { - color: inherit !important; - background-color: transparent !important; - border-color: currentColor !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingTop"] body{ + padding-top:var(--RS__scrollPaddingTop) !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingBottom"] body{ + padding-bottom:var(--RS__scrollPaddingBottom) !important; } -:root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; } -:root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; } -/* For epub:type, in case the contents are served as text/html, namespaces won’t work hence why we’re using both syntax */ - -:root[style*="readium-night-on"] img[class*="gaiji"], -:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, -:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !important; } -/* Darken all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); +:root[style*="--USER__backgroundColor"] *{ + background-color:transparent !important; } -/* Invert all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__textColor"]{ + color:var(--USER__textColor) !important; } -/* Darken and invert on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%) invert(100%); - filter: brightness(80%) invert(100%); +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -/* Readium CSS - Sepia mode - - A preset theme for sepia mode - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -:root[style*="readium-sepia-on"] { - --RS__backgroundColor: #faf4e8; - --RS__textColor: #121212; - - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; - - --RS__maxLineLength: 40.01rem; /* Forcing a reflow in Blink/Webkit so that blend mode can work */ +:root[style*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !important; } -/* 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"] *:not(a) { - color: inherit !important; - background-color: transparent !important; +:root[style*="--USER__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !important; } -:root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="--USER__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !important; } -:root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; } -:root[style*="readium-sepia-on"] svg, -:root[style*="readium-sepia-on"] img { - /* Make sure the proper bg-color is used for the blend mode */ - background-color: transparent !important; - mix-blend-mode: multiply; +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; } -/* Readium CSS - OS Accessibility Modes - - A stylesheet to deal with OS accessibility settings - - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__colCount"]{ + -webkit-column-count:var(--USER__colCount); + -moz-column-count:var(--USER__colCount); + column-count:var(--USER__colCount); -/* Windows high contrast colors are mapped to CSS system color keywords - See http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast */ - -@media screen and (-ms-high-contrast: active) { - :root { - color: windowText !important; - background-color: window !important; - } - - /* The following selectors are super funky but it makes sure everything is inherited, this is indeed critical for this mode */ - :root :not(#\#):not(#\#):not(#\#), - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) { - color: inherit !important; - background-color: inherit !important; - } - - .readiumCSS-mo-active-default { - color: highlightText !important; - background-color: highlight !important; - } - - /* For links, hyperlink keyword is automatically set */ - - /* Should we also set user highlights? */ + --RS__colWidth:auto; } -@media screen and (-ms-high-contrast: white-on-black) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); - } +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"]{ + -webkit-column-count:1; + -moz-column-count:1; + column-count:1; } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"], +:root[style*="--USER__colCount: 1"], +:root[style*="--USER__colCount:1"]{ + --RS__colWidth:100vw; +} -@media screen and (inverted-colors) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); +:root[style*="--USER__lineLength"] body{ + max-width:var(--USER__lineLength) !important; } -} -@media screen and (monochrome) { - /* Grayscale (Implemented in Safari, what about eInk?) */ - /* Must deal with anything color (contrast) so must be managed at the night/sepia/theme level :( */ +:root[style*="--USER__textAlign"]{ + text-align:var(--USER__textAlign); } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +:root[style*="--USER__textAlign"] body, +:root[style*="--USER__textAlign"] p:not( + blockquote p, + figcaption p, + header p, + hgroup p, + :root[style*="readium-experimentalHeaderFiltering-on"] p[class*="title"], + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > h1 + p, + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > p:has(+ h1) +), +:root[style*="--USER__textAlign"] li, +:root[style*="--USER__textAlign"] dd{ + text-align:var(--USER__textAlign) !important; + -moz-text-align-last:auto !important; + -epub-text-align-last:auto !important; + text-align-last:auto !important; } -/* Readium CSS - Columns number pref - - A submodule managing columns number for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Number of columns = 1 | 2 */ - -/* We still need to see if we allow users to force number of columns for all configs, currently it behaves as an "auto" setting */ - -/* apply col setting except for mobile portrait */ - -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { - :root[style*="--USER__colCount: 1"], - :root[style*="--USER__colCount:1"], - :root[style*="--USER__colCount: 2"], - :root[style*="--USER__colCount:2"] { - -webkit-column-count: var(--USER__colCount); - -moz-column-count: var(--USER__colCount); - column-count: var(--USER__colCount); - } - - /* If one column, make sure we limit line-length */ - :root[style*="--USER__colCount: 1"], - :root[style*="--USER__colCount:1"] { - --RS__maxLineLength: 40rem !important; /* This is the only way for the user setting to work in webkit… */ - --RS__colWidth: 100vw; - } - - /* If smartphone landscape, and 2 columns, col width the same as iPad landscape + desktop */ - :root[style*="--USER__colCount: 2"], - :root[style*="--USER__colCount:2"] { - --RS__colWidth: auto; /* User explicitely tells he/she wants 2 columns, we reset floor value */ - } +:root[style*="--USER__bodyHyphens"]{ + -webkit-hyphens:var(--USER__bodyHyphens) !important; + -moz-hyphens:var(--USER__bodyHyphens) !important; + -ms-hyphens:var(--USER__bodyHyphens) !important; + -epub-hyphens:var(--USER__bodyHyphens) !important; + hyphens:var(--USER__bodyHyphens) !important; } -/* Readium CSS - Page margins pref - - A submodule managing page margins for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Page Margins: the user margin is a factor of the page gutter e.g. 0.5, 0.75, 1, 1.25, 1.5, etc. */ - -:root[style*="--USER__pageMargins"] body { - padding: 0 calc(var(--RS__pageGutter) * var(--USER__pageMargins)) !important; +:root[style*="--USER__bodyHyphens"] body, +:root[style*="--USER__bodyHyphens"] p, +:root[style*="--USER__bodyHyphens"] li, +:root[style*="--USER__bodyHyphens"] div, +:root[style*="--USER__bodyHyphens"] dd{ + -webkit-hyphens:var(--USER__bodyHyphens) !important; + -moz-hyphens:var(--USER__bodyHyphens) !important; + -ms-hyphens:var(--USER__bodyHyphens) !important; + -epub-hyphens:var(--USER__bodyHyphens) !important; + hyphens:var(--USER__bodyHyphens) !important; } -/* Readium CSS - Custom colors pref - - A submodule managing custom colors for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__backgroundColor"] { - background-color: var(--USER__backgroundColor) !important; +:root[style*="--USER__fontFamily"]{ + font-family:var(--USER__fontFamily) !important; } -:root[style*="--USER__backgroundColor"] * { - background-color: transparent !important; +:root[style*="--USER__fontFamily"] *{ + font-family:revert !important; } -:root[style*="--USER__textColor"] { - color: var(--USER__textColor) !important; +:root[style*="readium-a11y-on"]{ + font-style:normal !important; + font-weight:normal !important; } -:root[style*="--USER__textColor"] *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) { - color: inherit !important; +:root[style*="readium-a11y-on"] body *:not(code):not(var):not(kbd):not(samp){ + font-family:inherit !important; + font-style:inherit !important; + font-weight:inherit !important; } -/* Readium CSS - Text align pref - - A submodule managing text-align for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] { - text-align: var(--USER__textAlign); +:root[style*="readium-a11y-on"] body *:not(a){ + text-decoration:none !important; } -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] body, -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] *:not(blockquote):not(figcaption) p, -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] li { - text-align: inherit !important; - -moz-text-align-last: auto !important; - -epub-text-align-last: auto !important; - text-align-last: auto !important; +:root[style*="readium-a11y-on"] body *{ + font-variant-caps:normal !important; + font-variant-numeric:normal !important; + font-variant-position:normal !important; } -/* In case something goes wrong at the programmatic level + rtl for body + rtl in ltr */ - -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign: left"], -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign:left"], -:root[style*="readium-advanced-on"][style*="--USER__textAlign: left"] *[dir="rtl"], -:root[style*="readium-advanced-on"][style*="--USER__textAlign:left"] *[dir="rtl"] { - text-align: right; +:root[style*="readium-a11y-on"] sup, +:root[style*="readium-a11y-on"] sub{ + font-size:1rem !important; + vertical-align:baseline !important; } -/* Edge, if logical value is used, think of it as a polyfill. For LTR, it will fall back to the default, which is left */ +:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !important; +} -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign: start"], -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign:start"] { - text-align: right; +:root:not([style*="readium-deprecatedFontSize-on"])[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; } -/* Readium CSS - Hyphenation pref +@supports selector(figure:has(> img)){ - A submodule managing hyphens for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> img), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> video), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> svg), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> canvas), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> iframe), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> audio), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> img:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> video:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> svg:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> canvas:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> iframe:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> audio:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] table{ + zoom:calc(100% / var(--USER__fontSize)) !important; + } - Repo: https://github.com/readium/readium-css */ + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figcaption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] caption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] td, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] th{ + zoom:var(--USER__fontSize) !important; + } +} -/* Managing hyphenation automatically for text-align values */ +@supports not (zoom: 1){ -:root[style*="readium-advanced-on"][style*="--USER__textAlign: justify"] body, -:root[style*="readium-advanced-on"][style*="--USER__textAlign:justify"] body { - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - -epub-hyphens: auto; - hyphens: auto; + :root[style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; + } } -:root[style*="readium-advanced-on"][style*="--USER__textAlign: left"] body, -:root[style*="readium-advanced-on"][style*="--USER__textAlign:left"] body, -:root[style*="readium-advanced-on"][style*="--USER__textAlign: right"] body, -:root[style*="readium-advanced-on"][style*="--USER__textAlign:right"] body { - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - -epub-hyphens: none; - hyphens: none; +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; } -/* Managing the user override */ - -:root[style*="readium-advanced-on"][style*="--USER__bodyHyphens"] { - -webkit-hyphens: var(--USER__bodyHyphens) !important; - -moz-hyphens: var(--USER__bodyHyphens) !important; - -ms-hyphens: var(--USER__bodyHyphens) !important; - -epub-hyphens: var(--USER__bodyHyphens) !important; - hyphens: var(--USER__bodyHyphens) !important; +:root[style*="--USER__lineHeight"]{ + line-height:var(--USER__lineHeight) !important; } -/* Sorry, we can’t use `:matches`, `:-moz-any` or `:-webkit-any` because MS doesn’t support it yet */ - -:root[style*="readium-advanced-on"][style*="--USER__bodyHyphens"] body, -:root[style*="readium-advanced-on"][style*="--USER__bodyHyphens"] p, -:root[style*="readium-advanced-on"][style*="--USER__bodyHyphens"] li, -:root[style*="readium-advanced-on"][style*="--USER__bodyHyphens"] div, -:root[style*="readium-advanced-on"][style*="--USER__bodyHyphens"] dd { - -webkit-hyphens: inherit; - -moz-hyphens: inherit; - -ms-hyphens: inherit; - -epub-hyphens: inherit; - hyphens: inherit; +:root[style*="--USER__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:var(--USER__lineHeight) !important; } -/* Readium CSS - Font Family pref - - A submodule managing font-family for user settings - Part of “User Overrides” class – “font override” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-font-on"][style*="--USER__fontFamily"] { - font-family: var(--USER__fontFamily) !important; +:root[style*="--USER__paraSpacing"] p{ + margin-top:var(--USER__paraSpacing) !important; + margin-bottom:var(--USER__paraSpacing) !important; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] body, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] p, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] li, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] div, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dt, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dd { - font-family: inherit !important; +:root[style*="--USER__paraIndent"] p:not( + blockquote p, + figcaption p, + header p, + hgroup p, + :root[style*="readium-experimentalHeaderFiltering-on"] p[class*="title"], + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > h1 + p, + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > p:has(+ h1) +){ + text-indent:var(--USER__paraIndent) !important; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([xml\:lang]) { - font-family: inherit !important; +:root[style*="--USER__paraIndent"] p *{ + text-indent:0 !important; } -/* Readium CSS - A11y font pref - - A submodule managing a11y text normalization for user settings - Part of “User Overrides” class – “font override” flag required. - - Repo: https://github.com/readium/readium-css */ - -/* For AccessibleDfA, we need to normalize font-weight and font-style since only the normal style is available */ - -:root[style*="readium-font-on"][style*="AccessibleDfA"] { - /* We won’t use the variable there since we need fallbacks for missing characters */ - font-family: AccessibleDfA, Verdana, Tahoma, "Trebuchet MS", sans-serif !important; - --RS__lineHeightCompensation: 1.167; +:root[style*="--USER__wordSpacing"] h1, +:root[style*="--USER__wordSpacing"] h2, +:root[style*="--USER__wordSpacing"] h3, +:root[style*="--USER__wordSpacing"] h4, +:root[style*="--USER__wordSpacing"] h5, +:root[style*="--USER__wordSpacing"] h6, +:root[style*="--USER__wordSpacing"] p, +:root[style*="--USER__wordSpacing"] li, +:root[style*="--USER__wordSpacing"] div, +:root[style*="--USER__wordSpacing"] dt, +:root[style*="--USER__wordSpacing"] dd{ + word-spacing:var(--USER__wordSpacing) !important; } -:root[style*="readium-font-on"][style*="IA Writer Duospace"] { - /* We won’t use the variable there since we need fallbacks for missing characters */ - font-family: "IA Writer Duospace", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace !important; - --RS__lineHeightCompensation: 1.167; +:root[style*="--USER__letterSpacing"] h1, +:root[style*="--USER__letterSpacing"] h2, +:root[style*="--USER__letterSpacing"] h3, +:root[style*="--USER__letterSpacing"] h4, +:root[style*="--USER__letterSpacing"] h5, +:root[style*="--USER__letterSpacing"] h6, +:root[style*="--USER__letterSpacing"] p, +:root[style*="--USER__letterSpacing"] li, +:root[style*="--USER__letterSpacing"] div, +:root[style*="--USER__letterSpacing"] dt, +:root[style*="--USER__letterSpacing"] dd{ + letter-spacing:var(--USER__letterSpacing) !important; + font-variant:none !important; } -:root[style*="readium-font-on"][style*="readium-a11y-on"] { - font-family: var(--USER__fontFamily) !important; - --RS__lineHeightCompensation: 1.167; +:root[style*="--USER__ligatures"]{ + font-variant-ligatures:var(--USER__ligatures) !important; } -/* Maybe users want a setting to normalize any font offered so there is a “a11y Normalize” flag for it */ - -:root[style*="readium-font-on"][style*="AccessibleDfA"], -:root[style*="readium-font-on"][style*="IA Writer Duospace"], -:root[style*="readium-font-on"][style*="readium-a11y-on"] { - font-style: normal !important; - font-weight: normal !important; +:root[style*="--USER__ligatures"] *{ + font-variant-ligatures:inherit !important; } -/* Targeting everything except code. Note that Open Dyslexic has a monospaced font for code */ - -:root[style*="readium-font-on"][style*="AccessibleDfA"] *:not(code):not(var):not(kbd):not(samp), -:root[style*="readium-font-on"][style*="IA Writer Duospace"] *:not(code):not(var):not(kbd):not(samp), -:root[style*="readium-font-on"][style*="readium-a11y-on"] *:not(code):not(var):not(kbd):not(samp) { - font-family: inherit !important; - font-style: inherit !important; - font-weight: inherit !important; +:root[style*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; } -/* Normalizing text-decoration, subs and sups */ - -:root[style*="readium-font-on"][style*="AccessibleDfA"] *, -:root[style*="readium-font-on"][style*="IA Writer Duospace"] *, -:root[style*="readium-font-on"][style*="readium-a11y-on"] * { - text-decoration: none !important; - font-variant-caps: normal !important; - font-variant-numeric: normal !important; - font-variant-position: normal !important; +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; } -:root[style*="readium-font-on"][style*="AccessibleDfA"] sup, -:root[style*="readium-font-on"][style*="IA Writer Duospace"] sup, -:root[style*="readium-font-on"][style*="readium-a11y-on"] sup, -:root[style*="readium-font-on"][style*="AccessibleDfA"] sub, -:root[style*="readium-font-on"][style*="IA Writer Duospace"] sub, -:root[style*="readium-font-on"][style*="readium-a11y-on"] sub { - font-size: 1rem !important; - vertical-align: baseline !important; +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; } -/* Readium CSS - Font size pref - - A submodule managing font-size for user settings - Part of “User Overrides” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__fontSize"] { - font-size: var(--USER__fontSize) !important; +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; } -/* Readium CSS - Line height pref - - A submodule managing line-height for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] { - line-height: var(--USER__lineHeight) !important; +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; } -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] body, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] p, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] li, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] div { - line-height: inherit; +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; } -/* Readium CSS - Para spacing pref - - A submodule managing paragraphs’ top and bottom margins for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__paraSpacing"] p { - margin-top: var(--USER__paraSpacing) !important; - margin-bottom: var(--USER__paraSpacing) !important; +:root[style*="readium-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; } -/* Readium CSS - Para indent pref - - A submodule managing paragraphs’ text-indent for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p { - text-indent: var(--USER__paraIndent) !important; +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter:invert(var(--USER__invertImages)) !important; } -/* If there are inline-block elements in paragraphs, text-indent will inherit so we must reset it */ - -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p * { - text-indent: 0 !important; +:root[style*="readium-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -/* Readium CSS - Word spacing pref - - A submodule managing word-spacing for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] h1, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] h2, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] h3, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] h4, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] h5, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] h6, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] p, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] li, -:root[style*="readium-advanced-on"][style*="--USER__wordSpacing"] div { - word-spacing: var(--USER__wordSpacing); +:root[style*="--USER__darkenImages"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; + filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; } -/* Readium CSS - Letter spacing pref - - A submodule managing letter-spacing for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h1, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h2, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h3, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h4, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h5, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] h6, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] p, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] li, -:root[style*="readium-advanced-on"][style*="--USER__letterSpacing"] div { - letter-spacing: var(--USER__letterSpacing); - font-variant: none; +:root[style*="readium-darken-on"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(80%) invert(var(--USER__invertImages)) !important; + filter:brightness(80%) invert(var(--USER__invertImages)) !important; } -/* Readium CSS - Font size normalize - - A stylesheet to normalize font-size - - Repo: https://github.com/readium/readium-css */ - -/* STYLES */ - -/* :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 */ - -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="--USER__darkenImages"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(100%) !important; + filter:brightness(var(--USER__darkenImages)) invert(100%) !important; } -:root[style*="readium-advanced-on"] p, -:root[style*="readium-advanced-on"] li, -:root[style*="readium-advanced-on"] div, -:root[style*="readium-advanced-on"] pre, -:root[style*="readium-advanced-on"] dd { - font-size: 1rem !important; +:root[style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%) invert(100%) !important; + filter:brightness(80%) invert(100%) !important; } -:root[style*="readium-advanced-on"] 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[style*="--USER__invertGaiji"] img[class*="gaiji"]{ + -webkit-filter:invert(var(--USER__invertGaiji)) !important; + filter:invert(var(--USER__invertGaiji)) !important; } -:root[style*="readium-advanced-on"] 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[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -:root[style*="readium-advanced-on"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * var(--USER__typeScale)) !important; +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; } -:root[style*="readium-advanced-on"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - 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-advanced-on"] small { - font-size: smaller !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-advanced-on"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !important; +:root[style*="readium-normalize-on"] h2{ + font-size:1.5rem !important; + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !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[style*="readium-advanced-on"][style*="--USER__typeScale"] h1 { - font-size: calc(((1rem * var(--USER__typeScale)) * 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-advanced-on"][style*="--USER__typeScale"] h2 { - font-size: calc((1rem * var(--USER__typeScale)) * 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-advanced-on"][style*="--USER__typeScale"] h3 { - font-size: calc(1rem * var(--USER__typeScale)) !important; +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; } -/* Readium CSS - Default highlights - - A stylesheet for user highlights - - Repo: https://github.com/readium/readium-css */ - -/* User Highlights */ +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} -.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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !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; +:root[style*="readium-iPadOSPatch-on"] body{ + -webkit-text-size-adjust:none; } -/* Media overlays */ +:root[style*="readium-iPadOSPatch-on"] p, +:root[style*="readium-iPadOSPatch-on"] h1, +:root[style*="readium-iPadOSPatch-on"] h2, +:root[style*="readium-iPadOSPatch-on"] h3, +:root[style*="readium-iPadOSPatch-on"] h4, +:root[style*="readium-iPadOSPatch-on"] h5, +:root[style*="readium-iPadOSPatch-on"] h6, +:root[style*="readium-iPadOSPatch-on"] li, +:root[style*="readium-iPadOSPatch-on"] th, +:root[style*="readium-iPadOSPatch-on"] td, +:root[style*="readium-iPadOSPatch-on"] dt, +:root[style*="readium-iPadOSPatch-on"] dd, +:root[style*="readium-iPadOSPatch-on"] pre, +:root[style*="readium-iPadOSPatch-on"] address, +:root[style*="readium-iPadOSPatch-on"] details, +:root[style*="readium-iPadOSPatch-on"] summary, +:root[style*="readium-iPadOSPatch-on"] figcaption, +:root[style*="readium-iPadOSPatch-on"] div:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)), +:root[style*="readium-iPadOSPatch-on"] aside:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)){ + -webkit-text-zoom:reset; +} -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; +:root[style*="readium-iPadOSPatch-on"] abbr, +:root[style*="readium-iPadOSPatch-on"] b, +:root[style*="readium-iPadOSPatch-on"] bdi, +:root[style*="readium-iPadOSPatch-on"] bdo, +:root[style*="readium-iPadOSPatch-on"] cite, +:root[style*="readium-iPadOSPatch-on"] code, +:root[style*="readium-iPadOSPatch-on"] dfn, +:root[style*="readium-iPadOSPatch-on"] em, +:root[style*="readium-iPadOSPatch-on"] i, +:root[style*="readium-iPadOSPatch-on"] kbd, +:root[style*="readium-iPadOSPatch-on"] mark, +:root[style*="readium-iPadOSPatch-on"] q, +:root[style*="readium-iPadOSPatch-on"] rp, +:root[style*="readium-iPadOSPatch-on"] rt, +:root[style*="readium-iPadOSPatch-on"] ruby, +:root[style*="readium-iPadOSPatch-on"] s, +:root[style*="readium-iPadOSPatch-on"] samp, +:root[style*="readium-iPadOSPatch-on"] small, +:root[style*="readium-iPadOSPatch-on"] span, +:root[style*="readium-iPadOSPatch-on"] strong, +:root[style*="readium-iPadOSPatch-on"] sub, +:root[style*="readium-iPadOSPatch-on"] sup, +:root[style*="readium-iPadOSPatch-on"] time, +:root[style*="readium-iPadOSPatch-on"] u, +:root[style*="readium-iPadOSPatch-on"] var{ + -webkit-text-zoom:normal; } -/*# sourceMappingURL=ReadiumCSS-after.css.map */ + +:root[style*="readium-iPadOSPatch-on"] p:not(:has(b, cite, em, i, q, s, small, span, strong)):first-line{ + -webkit-text-zoom:normal; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-before.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-before.css index 6511e6d589..4271373511 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-before.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-before.css @@ -1,643 +1,526 @@ -/* Readium CSS - Config module +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ - A file allowing implementers to customize flags for reading modes, - user settings, etc. - - Repo: https://github.com/readium/readium-css */ +@namespace url("http://www.w3.org/1999/xhtml"); -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ +@-ms-viewport{ + width:device-width; +} -/* User view = paged | scrolled */ +@viewport{ + width:device-width; + zoom:1; +} -/* Font-family override */ +:root{ -/* Advanced settings */ + --RS__sans-serif-ja-v:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDGothic', 'Yu Gothic', 'ＭＳゴシック', 'MS Gothic', sans-serif; -/* Reading Modes */ + --RS__serif-ja-v:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDMincho', 'Yu Mincho', 'ＭＳ明朝', 'MS Mincho', serif; -/* Filters (images) */ + --RS__sans-serif-ja:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDPGothic', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; -/* Accessibility normalization */ + --RS__serif-ja:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDPMincho', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif; -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Direction i.e. ltr and rtl */ + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; -/* Readium CSS - Namespaces module + --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; - Namespaces to import in all 3 dist stylesheets + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; - Repo: https://github.com/readium/readium-css */ + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__zh-HK-lineHeightCompensation:1.167; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__zh-HK-baseFontFamily:'方體', 'PingFang HK', '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__zh-TW-lineHeightCompensation:1.167; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__zh-TW-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -/* Readium CSS - Base module + --RS__zh-Hant-lineHeightCompensation:1.167; - A minimal stylesheet for all ebooks + --RS__zh-Hant-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; - Repo: https://github.com/readium/readium-css */ + --RS__zh-lineHeightCompensation:1.167; -/* Define viewport, HTML5-style */ + --RS__zh-baseFontFamily:'方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif; -@-ms-viewport { - width: device-width; -} + --RS__th-lineHeightCompensation:1.067; -@viewport { - width: device-width; - zoom: 1; -} + --RS__th-baseFontFamily:Thonburi, 'Leelawadee UI', 'Cordia New', Roboto, Noto, 'Noto Sans Thai', sans-serif; -:root { - /* Default font-stacks */ - --RS__oldStyleTf: "Iowan Old Style", "Sitka Text", Palatino, "Book Antiqua", serif; - --RS__modernTf: Athelas, Constantia, Georgia, serif; - --RS__sansTf: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --RS__humanistTf: Seravek, Calibri, Roboto, Arial, sans-serif; - --RS__monospaceTf: "Andale Mono", Consolas, monospace; + --RS__te-baseFontFamily:'Kohinoor Telugu', 'Telugu Sangam MN', 'Nirmala UI', Gautami, Roboto, Noto, 'Noto Sans Telugu', sans-serif; - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); + --RS__ta-lineHeightCompensation:1.067; - /* 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; + --RS__ta-baseFontFamily:'Tamil Sangam MN', 'Nirmala UI', Latha, Roboto, Noto, 'Noto Sans Tamil', sans-serif; - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); -} + --RS__si-lineHeightCompensation:1.167; -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ + --RS__si-baseFontFamily:'Sinhala Sangam MN', 'Nirmala UI', 'Iskoola Pota', Roboto, Noto, 'Noto Sans Sinhala', sans-serif; -html { - font-family: var(--RS__baseFontFamily); - /* Fallback line-height */ - line-height: 1.6; /* Fits a little bit better for all languages than 1.5 */ - line-height: var(--RS__baseLineHeight); - text-rendering: optimizeLegibility; -} + --RS__pa-lineHeightCompensation:1.1; -/* 1.5 being too loose with larger font-sizes, we reset headings to normal (which value is 1.125–1.375 for our font-stacks) */ + --RS__pa-baseFontFamily:'Gurmukhi MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Gurmukhi', sans-serif; -h1, h2, h3 { - line-height: normal; -} + --RS__or-lineHeightCompensation:1.167; -:lang(ja), -:lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; -} + --RS__or-baseFontFamily:'Oriya Sangam MN', 'Nirmala UI', Kalinga, Roboto, Noto, 'Noto Sans Oriya', sans-serif; -/* Set default font for Math */ + --RS__ml-lineHeightCompensation:1.067; -math { - font-family: "Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; -} + --RS__ml-baseFontFamily:'Malayalam Sangam MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Malayalam', sans-serif; -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ + --RS__lo-baseFontFamily:'Lao Sangam MN', 'Leelawadee UI', 'Lao UI', Roboto, Noto, 'Noto Sans Lao', sans-serif; -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ko-lineHeightCompensation:1.167; -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__ko-baseFontFamily:'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto, 'Noto Sans CJK KR', sans-serif; -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__kn-lineHeightCompensation:1.1; -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; -} + --RS__kn-baseFontFamily:'Kannada Sangam MN', 'Nirmala UI', Tunga, Roboto, Noto, 'Noto Sans Kannada', sans-serif; -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; -} + --RS__km-lineHeightCompensation:1.067; -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__km-baseFontFamily:'Khmer Sangam MN', 'Leelawadee UI', 'Khmer UI', Roboto, Noto, 'Noto Sans Khmer', sans-serif; -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ja-lineHeightCompensation:1.167; -:lang(he) { - --RS__baseFontFamily: "New Peninim MT", "Arial Hebrew", Gisha, "Times New Roman", Roboto, Noto, "Noto Sans Hebrew" sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__ja-baseFontFamily:YuGothic, 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif; -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; + --RS__iu-baseFontFamily:'Euphemia UCAS', Euphemia, Roboto, Noto, 'Noto Sans Canadian Aboriginal', sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__hy-baseFontFamily:Mshtakan, Sylfaen, Roboto, Noto, 'Noto Serif Armenian', serif; -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; -} + --RS__hi-lineHeightCompensation:1.1; -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; -} + --RS__hi-baseFontFamily:'Kohinoor Devanagari', 'Devanagari Sangam MN', Kokila, 'Nirmala UI', Roboto, Noto, 'Noto Sans Devanagari', sans-serif; -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; + --RS__he-lineHeightCompensation:1.1; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + --RS__he-baseFontFamily:'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto, 'Noto Sans Hebrew', sans-serif; - /* Extra variables for Japanese font-stacks as we may want to reuse them for user settings + default */ - --RS__serif-ja: "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja: "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ ゴシック", "MS Gothic", "Hiragino Sans", sans-serif; - --RS__serif-ja-v: "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja-v: "ＭＳ ゴシック", "MS Gothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Sans", sans-serif; -} + --RS__gu-lineHeightCompensation:1.167; -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__gu-baseFontFamily:'Gujarati Sangam MN', 'Nirmala UI', Shruti, Roboto, Noto, 'Noto Sans Gujarati', sans-serif; -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__fa-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; + --RS__chr-lineHeightCompensation:1.167; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__chr-baseFontFamily:'Plantagenet Cherokee', Roboto, Noto, 'Noto Sans Cherokee'; -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; -} + --RS__bo-baseFontFamily:Kailasa, 'Microsoft Himalaya', Roboto, Noto, 'Noto Sans Tibetan', sans-serif; -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__bn-lineHeightCompensation:1.067; -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__bn-baseFontFamily:'Kohinoor Bangla', 'Bangla Sangam MN', Vrinda, Roboto, Noto, 'Noto Sans Bengali', sans-serif; -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__ar-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__am-lineHeightCompensation:1.167; -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__am-baseFontFamily:Kefa, Nyala, Roboto, Noto, 'Noto Sans Ethiopic', serif; -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; -} + --RS__latin-lineHeightCompensation:1; -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__latin-baseFontFamily:var(--RS__oldStyleTf); + --RS__baseFontFamily:var(--RS__latin-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__latin-lineHeightCompensation); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -/* The following will also work for zh-Hans */ + --RS__selectionTextColor:inherit; -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; + --RS__selectionBackgroundColor:#b4d8fe; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__visitedColor:#551A8B; -:lang(zh-Hant), -:lang(zh-TW) { - --RS__baseFontFamily: "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; + --RS__linkColor:#0000EE; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__textColor:#121212; -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + background-color:var(--RS__backgroundColor) !important; } -/* Readium CSS - Day/Default mode - - A preset theme for day mode, which is the default - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); +} -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); +} - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; } -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; +h1, h2, h3{ + line-height:normal; } -/* Note: Though `::selection` was present in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase because its behavior was under-specified (especially with nested elements) and interoperability wasn’t achieved. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */ +:lang(ja), +:lang(zh), +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; +} -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +math{ + font-family:"Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; } -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +:lang(am){ + --RS__baseFontFamily:var(--RS__am-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__am-lineHeightCompensation); } -/* Readium CSS - Fonts module +:lang(ar){ + --RS__baseFontFamily:var(--RS__ar-baseFontFamily); +} - A stylesheet for embedded fonts +:lang(bn){ + --RS__baseFontFamily:var(--RS__bn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__bn-lineHeightCompensation); +} - Repo: https://github.com/readium/readium-css */ +:lang(bo){ + --RS__baseFontFamily:var(--RS__bo-baseFontFamily); +} -/* /!\ Mind the path (relative to the folders in which you have stylesheets and the fonts) */ +:lang(chr){ + --RS__baseFontFamily:var(--RS__chr-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__chr-lineHeightCompensation); +} -@font-face { - font-family: AccessibleDfA; - font-style: normal; - font-weight: normal; - src: local("AccessibleDfA"), - url("fonts/AccessibleDfA.otf") format("opentype"); +:lang(fa){ + --RS__baseFontFamily:var(--RS__fa-baseFontFamily); } -@font-face { - font-family: "IA Writer Duospace"; - font-style: normal; - font-weight: normal; - src: local("iAWriterDuospace-Regular"), - url("fonts/iAWriterDuospace-Regular.ttf") format("truetype"); +:lang(gu){ + --RS__baseFontFamily:var(--RS__gu-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__gu-lineHeightCompensation); } -/* If you have different weights/styles, - use `font-weight` and `font-style`, - not prefixes in the font-family name, - or else it will be a nightmare to manage in user settings. */ +:lang(he){ + --RS__baseFontFamily:var(--RS__he-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__he-lineHeightCompensation); +} -/* Readium CSS - HTML5 SR Patch stylesheet +:lang(hi){ + --RS__baseFontFamily:var(--RS__hi-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__hi-lineHeightCompensation); +} - A set of style to adjust HTML5 Suggested Rendering to paginated content +:lang(hy){ + --RS__baseFontFamily:var(--RS__hy-baseFontFamily); +} - Repo: https://github.com/readium/readium-css */ +:lang(iu){ + --RS__baseFontFamily:var(--RS__iu-baseFontFamily); +} -/* Fragmentation */ +:lang(ja){ + --RS__baseFontFamily:var(--RS__ja-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ja-lineHeightCompensation); +} -body { - widows: 2; - orphans: 2; +:lang(km){ + --RS__baseFontFamily:var(--RS__km-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__km-lineHeightCompensation); } -figcaption, th, td { - widows: 1; - orphans: 1; +:lang(kn){ + --RS__baseFontFamily:var(--RS__kn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__kn-lineHeightCompensation); } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +:lang(ko){ + --RS__baseFontFamily:var(--RS__ko-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ko-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +:lang(lo){ + --RS__baseFontFamily:var(--RS__lo-baseFontFamily); } -/* Hyphenation */ +:lang(ml){ + --RS__baseFontFamily:var(--RS__ml-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ml-lineHeightCompensation); +} -body { - -webkit-hyphenate-character: "\002D"; - -moz-hyphenate-character: "\002D"; - -ms-hyphenate-character: "\002D"; - hyphenate-character: "\002D"; - -webkit-hyphenate-limit-lines: 3; - -ms-hyphenate-limit-lines: 3; - hyphenate-limit-lines: 3; +:lang(or){ + --RS__baseFontFamily:var(--RS__or-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__or-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figcaption, -pre, -caption, -address, -center, -code, -var { - -ms-hyphens: none; - -moz-hyphens: none; - -webkit-hyphens: none; - -epub-hyphens: none; - hyphens: none; -} +:lang(pa){ + --RS__baseFontFamily:var(--RS__pa-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__pa-lineHeightCompensation); +} -/* OTF */ - -body { - font-variant-numeric: oldstyle-nums proportional-nums; +:lang(si){ + --RS__baseFontFamily:var(--RS__si-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__si-lineHeightCompensation); } -:lang(ja) body, -:lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; +:lang(ta){ + --RS__baseFontFamily:var(--RS__ta-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ta-lineHeightCompensation); } -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; +:lang(te){ + --RS__baseFontFamily:var(--RS__te-baseFontFamily); } -table { - font-variant-numeric: lining-nums tabular-nums; +:lang(th){ + --RS__baseFontFamily:var(--RS__th-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__th-lineHeightCompensation); } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +:lang(zh){ + --RS__baseFontFamily:var(--RS__zh-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-lineHeightCompensation); } -rt { - font-variant-east-asian: ruby; +:lang(zh-Hant){ + --RS__baseFontFamily:var(--RS__zh-Hant-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-Hant-lineHeightCompensation); } -:lang(ar) { - font-variant-ligatures: common-ligatures; +:lang(zh-TW){ + --RS__baseFontFamily:var(--RS__zh-TW-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-TW-lineHeightCompensation); } -:lang(ko) { - font-kerning: normal; +:lang(zh-HK){ + --RS__baseFontFamily:var(--RS__zh-HK-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-HK-lineHeightCompensation); } -/* Night mode */ +body{ + widows:2; + orphans:2; +} -hr { - color: inherit; - border-color: currentColor; +figcaption, th, td{ + widows:1; + orphans:1; } -table, th, td { - border-color: currentColor; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -/* Horizontal Spacing */ +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; +} -figure, blockquote { - margin: 1em 5%; +body{ + -webkit-hyphenate-character:"\002D"; + -moz-hyphenate-character:"\002D"; + -ms-hyphenate-character:"\002D"; + hyphenate-character:"\002D"; + -webkit-hyphenate-limit-lines:3; + -ms-hyphenate-limit-lines:3; + hyphenate-limit-lines:3; } -/* +h1, h2, h3, h4, h5, h6, dt, +figcaption, pre, caption, address, +center, code, var{ + -ms-hyphens:none; + -moz-hyphens:none; + -webkit-hyphens:none; + -epub-hyphens:none; + hyphens:none; +} -:lang(ja) figure, :lang(ja) blockquote, -:lang(zh-Hant) figure, :lang(zh-Hant) blockquote, -:lang(zh-TW) figure, :lang(zh-TW) blockquote, -:lang(mn) figure, :lang(mn) blockquote { - margin: 5% 1em; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } -*/ +:lang(ja) body, +:lang(zh) body, +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; +} -ul, ol { - padding-left: 5%; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -/* +table{ + font-variant-numeric:lining-nums tabular-nums; +} -:lang(ja) ul, :lang(ja) ol, -:lang(zh-Hant) ul, :lang(zh-Hant) ol, -:lang(zh-TW) ul, :lang(zh-TW) ol, -:lang(mn) ul, :lang(mn) ol { - padding-top: 5%; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -*/ +rt{ + font-variant-east-asian:ruby; +} -dd { - margin-left: 5%; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -/* +:lang(ko){ + font-kerning:normal; +} -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; +hr{ + color:inherit; + border-color:currentcolor; } -*/ +table, th, td{ + border-color:currentcolor; +} -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; +figure, blockquote{ + margin:1em 5%; } -/* Normalization */ +ul, ol{ + padding-left:5%; +} -abbr[title], acronym[title] { - text-decoration: dotted underline; +dd{ + margin-left:5%; } -nobr wbr { - white-space: normal; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -/* Make ruby text and parentheses non-selectable (TBC) */ +abbr[title], acronym[title]{ + text-decoration:dotted underline; +} -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +nobr wbr{ + white-space:normal; } -/* Internationalization */ +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} -*:lang(ja), -*:lang(zh), -*:lang(ko), -:lang(ja) cite, -:lang(ja) dfn, -:lang(ja) em, -:lang(ja) i, -:lang(zh) cite, -:lang(zh) dfn, -:lang(zh) em, -:lang(zh) i, -:lang(ko) cite, -:lang(ko) dfn, -:lang(ko) em, -:lang(ko) i { - font-style: normal; +*:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)), +*:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)), +*:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)), +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) cite, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) dfn, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) em, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) i, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) cite, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) dfn, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) em, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) i, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) cite, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) dfn, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) em, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) i{ + font-style:normal; } :lang(ja) a, :lang(zh) a, -:lang(ko) a { - text-decoration: none; +:lang(ko) a{ + text-decoration:none; } -/* Readium CSS - Safeguards module - - A set of styles to prevent common issues in pagination - - Repo: https://github.com/readium/readium-css */ - -/* Config */ - -/* We’ll be using an "RS__" prefix so that we can prevent collisions with authors’ CSS */ - -:root { - /* max-width for media, you can override that via JS if not compiled to static */ - --RS__maxMediaWidth: 100%; - - /* max-height for media, you can override that via JS if not compiled to static - Please consider figures might have a figcaption, which is why 95vh in the first place */ - --RS__maxMediaHeight: 95vh; - - /* value for medias’ box-sizing */ - --RS__boxSizingMedia: border-box; - - /* value for table’s box-sizing */ - --RS__boxSizingTable: border-box; +:root{ + --RS__maxMediaWidth:100%; + --RS__maxMediaHeight:95vh; + --RS__boxSizingMedia:border-box; + --RS__boxSizingTable:border-box; } -/* Sanitize line-heights in webkit e.g. raised cap without a declared line-height - See effect by checking this demo in Safari: https://codepen.io/JayPanoz/pen/gRmzrE - Note: glyphs has to be reset to inline for CJK */ - -html { - -webkit-line-box-contain: block glyphs replaced; +a, a span, span a, h1, h2, h3, h4, h5, h6{ + word-wrap:break-word; } -:lang(ja) { - -webkit-line-box-contain: block inline replaced; +div{ + max-width:var(--RS__maxMediaWidth); } -/* Wrap long strings if larger than line-length */ - -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; -} +img, svg|svg, video{ + object-fit:contain; -div { - max-width: var(--RS__maxMediaWidth); + width:auto; + height:auto; + max-width:var(--RS__maxMediaWidth); + max-height:var(--RS__maxMediaHeight) !important; + box-sizing:var(--RS__boxSizingMedia); + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -/* Size medias */ - -/* You can override CSS variables by re-defining it for all elements or a specific one */ - -img, svg, audio, video { +@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){ - /* Object-fit allows us to keep the correct aspect-ratio */ - object-fit: contain; - - width: auto; - height: auto; - - /* Some files don’t have max-width */ - max-width: var(--RS__maxMediaWidth); - - /* We’re setting a max-height, especially for covers */ - max-height: var(--RS__maxMediaHeight) !important; - /* We probably don’t need to use modern box-sizing as auto behaves like it */ - box-sizing: var(--RS__boxSizingMedia); - - /* For page-break, we must use those 3 - We can’t use a variable there, webkit seems to no support them for those properties */ - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video{ + zoom:calc(100% / var(--USER__fontSize)); + } } -/* Try preventing border being cut-off, webkit + blink have content-box by default */ +audio{ + max-width:100%; + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; + } -table { - max-width: var(--RS__maxMediaWidth); - box-sizing: var(--RS__boxSizingTable); -} -/*# sourceMappingURL=ReadiumCSS-before.css.map */ \ No newline at end of file +table{ + max-width:var(--RS__maxMediaWidth); + box-sizing:var(--RS__boxSizingTable); +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-default.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-default.css index 78aa0172b6..b541add35e 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-default.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-default.css @@ -1,189 +1,159 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Default module - - A stylesheet for unstyled ebooks based on HTML5 Suggested Rendering - Note: works in combination with Base module - - Repo: https://github.com/readium/readium-css */ +:root{ + --RS__compFontFamily:var(--RS__baseFontFamily); + --RS__codeFontFamily:var(--RS__monospaceTf); -/* CONFIG */ + --RS__typeScale:1.125; + --RS__baseFontSize:100%; -:root { - --RS__compFontFamily: var(--RS__baseFontFamily); - --RS__codeFontFamily: var(--RS__monospaceTf); + --RS__flowSpacing:1.5rem; + --RS__paraSpacing:0; + --RS__paraIndent:1em; - --RS__typeScale: 1.125; /* 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618 */ - --RS__baseFontSize: 100%; + --RS__linkColor:#0000EE; + --RS__visitedColor:#551A8B; - --RS__flowSpacing: 1.5rem; - --RS__paraSpacing: 0; - --RS__paraIndent: 1em; - - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; - - --RS__primaryColor: ; - --RS__secondaryColor: ; + --RS__primaryColor:; + --RS__secondaryColor:; } -/* STYLES */ - -/* Typo */ - -body { - font-size: var(--RS__baseFontSize); +body{ + font-size:var(--RS__baseFontSize); } -h1, h2, h3, h4, h5, h6 { - font-family: var(--RS__compFontFamily); +h1, h2, h3, h4, h5, h6{ + font-family:var(--RS__compFontFamily); } -/* Flow content */ - -blockquote, -figure, -p, -pre, -aside, -footer, -form, -hr { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); +blockquote, figure, p, pre, +aside, footer, form, hr{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); } -p { - margin-top: var(--RS__paraSpacing); - margin-bottom: var(--RS__paraSpacing); - text-indent: var(--RS__paraIndent); +p{ + margin-top:var(--RS__paraSpacing); + margin-bottom:var(--RS__paraSpacing); + text-indent:var(--RS__paraIndent); } -h1 + p, -h2 + p, -h3 + p, -h4 + p, -h5 + p, -h6 + p, -hr + p { - text-indent: 0; +h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, +hr + p{ + text-indent:0; } -pre { - font-family: var(--RS__codeFontFamily); +pre{ + font-family:var(--RS__codeFontFamily); } -/* Phrasing content */ - -code, kbd, samp, tt { - font-family: var(--RS__codeFontFamily); +code, kbd, samp, tt{ + font-family:var(--RS__codeFontFamily); } -sub, sup { - position: relative; - font-size: 67.5%; - line-height: 1; +sub, sup{ + position:relative; + font-size:67.5%; + line-height:1; } -sub { - bottom: -0.2ex; +sub{ + bottom:-0.2ex; } -sup { - bottom: 0; +sup{ + bottom:0; } -:link { - color: var(--RS__linkColor); +:link{ + color:var(--RS__linkColor); } -:visited { - color: var(--RS__visitedColor); +:visited{ + color:var(--RS__visitedColor); } -/* Headings */ - -h1 { - margin-top: calc(var(--RS__flowSpacing) * 2); - margin-bottom: calc(var(--RS__flowSpacing) * 2); - /* The following is base font size * typescale power of 3 */ - font-size: calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); +h1{ + margin-top:calc(var(--RS__flowSpacing) * 2); + margin-bottom:calc(var(--RS__flowSpacing) * 2); + font-size:calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); } -h2 { - margin-top: calc(var(--RS__flowSpacing) * 2); - margin-bottom: var(--RS__flowSpacing); - /* The following is base font size * typescale power of 2 */ - font-size: calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); +h2{ + margin-top:calc(var(--RS__flowSpacing) * 2); + margin-bottom:var(--RS__flowSpacing); + font-size:calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); } -h3 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-size: calc(1em * var(--RS__typeScale)); +h3{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-size:calc(1em * var(--RS__typeScale)); } -h4 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-size: 1em; +h4{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-size:1em; } -h5 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-size: 1em; - font-variant: small-caps; +h5{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-size:1em; + font-variant:small-caps; } -h6 { - margin-top: var(--RS__flowSpacing); - margin-bottom: 0; - font-size: 1em; - text-transform: lowercase; - font-variant: small-caps; +h6{ + margin-top:var(--RS__flowSpacing); + margin-bottom:0; + font-size:1em; + text-transform:lowercase; + font-variant:small-caps; } -/* Lists */ - -dl, ol, ul { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); +dl, ol, ul{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); } -/* Table */ - -table { - margin: var(--RS__flowSpacing) 0; - border: 1px solid currentColor; - border-collapse: collapse; - empty-cells: show; +table{ + margin:var(--RS__flowSpacing) 0; + border:1px solid currentcolor; + border-collapse:collapse; + empty-cells:show; } -thead, tbody, tfoot, table > tr { - vertical-align: top; +thead, tbody, tfoot, table > tr{ + vertical-align:top; } -th { - text-align: left; +th{ + text-align:left; } -th, td { - padding: 4px; - border: 1px solid currentColor; -} -/*# sourceMappingURL=ReadiumCSS-default.css.map */ \ No newline at end of file +th, td{ + padding:4px; + border:1px solid currentcolor; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-ebpaj_fonts_patch.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-ebpaj_fonts_patch.css index b73eb6744f..16da6be425 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-ebpaj_fonts_patch.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-ebpaj_fonts_patch.css @@ -1,80 +1,79 @@ -/* Readium CSS +/* Readium CSS EBPAJ Fonts Patch module A stylesheet improving EBPAJ @font-face declarations to cover all platforms - Repo: https://github.com/readium/readium-css */ + Repo: https://github.com/readium/css */ /* EBPAJ template only references fonts from MS Windows… - so we must reference fonts from other platforms + so we must reference fonts from other platforms and override authors’ stylesheets. What we do there is keeping their default value and providing fallbacks. - + /!\ /!\ /!\ /!\ /!\ FYI, you might want to load this polyfill only if you find one of the following metadata items in the OPF package: - - version 1: + - version 1: ebpaj-guide-1.0 - - version 1.1: - 1.1 - */ + - version 1.1: + 1.1 +*/ + +/* + Hiragino PostScript Font name lists: + https://www.screen.co.jp/ga_product/sento/support/QA/ss_psname.html +*/ /* 横組み用 (horizontal writing) */ @font-face { font-family: "serif-ja"; - src: local("ＭＳ Ｐ明朝"), - local("MS PMincho"), - local("Hiragino Mincho Pro"), - local("ヒラギノ明朝 Pro W3"), - local("游明朝"), - local("YuMincho"), - local("ＭＳ 明朝"), - local("MS Mincho"), - local("Hiragino Mincho ProN"); + src: local("ＭＳ Ｐ明朝"), /* for IE */ + local("MS PMincho"), /* ＭＳ Ｐ明朝 */ + local("HiraMinProN-W3"), local("Hiragino Mincho ProN"), /* ヒラギノ明朝 ProN W3 */ + local("HiraMinPro-W3"), local("Hiragino Mincho Pro"), /* ヒラギノ明朝 Pro W3 */ + local("YuMin-Medium"), local("YuMincho"), /* 游明朝体(macOS) */ + local("Yu Mincho"), /* 游明朝(Windows) */ + local("BIZ UDPMincho"); /* BIZ UDP明朝 */ } @font-face { font-family: "sans-serif-ja"; - src: local("ＭＳ Ｐゴシック"), - local("MS PGothic"), - local("Hiragino Kaku Gothic Pro W3"), - local("ヒラギノ角ゴ Pro W3"), - local("Hiragino Sans GB"), - local("ヒラギノ角ゴシック W3"), - local("游ゴシック"), - local("YuGothic"), - local("ＭＳ ゴシック"), - local("MS Gothic"), - local("Hiragino Sans"); + src: local("ＭＳ Ｐゴシック"), /* for IE */ + local("MS PGothic"), /* ＭＳ Ｐゴシック */ + local("HiraginoSans-W3"), local("Hiragino Sans"), /* ヒラギノ角ゴシック */ + local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN"), /* ヒラギノ角ゴ ProN W3 */ + local("HiraKakuPro-W3"), local("Hiragino Kaku Gothic Pro"), /* ヒラギノ角ゴ Pro W3 */ + local("ヒラギノ角ゴ W3"), /* for old Safari */ + local("HiraginoKaku-W3-90msp-RKSJ-H"), /* ヒラギノ角ゴ W3(TrueType) */ + local("YuGothic-Medium"), local("YuGothic"), /* 游ゴシック体(macOS) */ + local("Yu Gothic Medium"), local("Yu Gothic"), /* 游ゴシック(Windows) "Yu Gothic" is a fallback. */ + local("BIZ UDPGothic"); /* BIZ UDPゴシック */ } /* 縦組み用 (vertical writing) */ @font-face { font-family: "serif-ja-v"; - src: local("ＭＳ 明朝"), - local("MS Mincho"), - local("Hiragino Mincho Pro"), - local("ヒラギノ明朝 Pro W3"), - local("游明朝"), - local("YuMincho"), - local("ＭＳ Ｐ明朝"), - local("MS PMincho"), - local("Hiragino Mincho ProN"); + src: local("ＭＳ 明朝"), /* for IE */ + local("MS Mincho"), /* ＭＳ 明朝 */ + local("HiraMinProN-W3"), local("Hiragino Mincho ProN"), /* ヒラギノ明朝 ProN W3 */ + local("HiraMinPro-W3"), local("Hiragino Mincho Pro"), /* ヒラギノ明朝 Pro W3 */ + local("YuMin-Medium"), local("YuMincho"), /* 游明朝体(macOS) */ + local("Yu Mincho"), /* 游明朝(Windows) */ + local("BIZ UDMincho"); /* BIZ UD明朝 */ } @font-face { font-family: "sans-serif-ja-v"; - src: local("ＭＳ ゴシック"), - local("MS Gothic"), - local("Hiragino Kaku Gothic Pro W3"), - local("ヒラギノ角ゴ Pro W3"), - local("Hiragino Sans GB"), - local("ヒラギノ角ゴシック W3"), - local("游ゴシック"), - local("YuGothic"), - local("ＭＳ Ｐゴシック"), - local("MS PGothic"), - local("Hiragino Sans"); + src: local("ＭＳ ゴシック"), /* for IE */ + local("MS Gothic"), /* ＭＳ ゴシック */ + local("HiraginoSans-W3"), local("Hiragino Sans"), /* ヒラギノ角ゴシック */ + local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN"), /* ヒラギノ角ゴ ProN W3 */ + local("HiraKakuPro-W3"), local("Hiragino Kaku Gothic Pro"), /* ヒラギノ角ゴ Pro W3 */ + local("ヒラギノ角ゴ W3"), /* for old Safari */ + local("HiraKakuDS-W3-83pv-RKSJ-H"), /* ヒラギノ角ゴ W3(TrueType) */ + local("YuGothic-Medium"), local("YuGothic"), /* 游ゴシック体(macOS) */ + local("Yu Gothic Medium"), local("Yu Gothic"), /* 游ゴシック(Windows) "Yu Gothic" is a fallback. */ + local("BIZ UDGothic"); /* BIZ UDゴシック */ } \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css index 47867bfd54..ec07373a80 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-after.css @@ -1,705 +1,487 @@ -/* Readium CSS - Config module - - A file allowing implementers to customize flags for reading modes, - user settings, etc. - - Repo: https://github.com/readium/readium-css */ - -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ - -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ - -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ - -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ - -/* User view = paged | scrolled */ - -/* Font-family override */ - -/* Advanced settings */ - -/* Reading Modes */ - -/* Filters (images) */ - -/* Accessibility normalization */ - -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ - -/* Direction i.e. ltr and rtl */ - -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Pagination module - - A set of styles to paginate ePublications - - Repo: https://github.com/readium/readium-css */ +:root{ -/* Config */ + --RS__viewportWidth:100%; -/* Columns are responsive by default, even if column-width is set in pixels, - which means two-page spread will switch to single page depending on current font-size. - If you want more control, I’m afraid you’ll have to update colWidth/colGap dynamically, - which is how a significant amount of RS do at the moment. */ + --RS__pageGutter:0; -/* Default for smartphone portrait (small screens) */ + --RS__defaultLineLength:100%; -:root { - /* Your columns’ width floor */ - --RS__colWidth: 45em; /* The width at which we’ll switch to 2 columns by default. PS: you can’t set it in rem */ + --RS__colGap:0; - /* Ideal number of columns (depending on columns’ width floor) */ - --RS__colCount: 1; + --RS__colCount:1; - /* Gap between columns (in pixels so that it won’t resize with font-size) */ - --RS__colGap: 0; - - /* Optimal line-length (rem will take :root font-size into account, whatever the body’s font-size) */ - --RS__maxLineLength: 40rem; - - /* Default page horizontal margins (in pixels so that it won’t resize with font-size) */ - --RS__pageGutter: 20px; /* See if colGap and pageGutter can be the same var */ + --RS__colWidth:100vw; } -/* Reset page margins for Forward compatibility */ - -@page { - margin: 0 !important; +@page{ + margin:0 !important; } -/* :root selector has same specificity as a class i.e. 0010 - We might have to change that to html / context - -> https://css-tricks.com/almanac/selectors/r/root/ */ - -:root { - - /* In case you use left position to scroll, can be removed if using transform: translateX() */ - position: relative; - - -webkit-column-width: var(--RS__colWidth); - -moz-column-width: var(--RS__colWidth); - column-width: var(--RS__colWidth); - - /* Init pagination */ - /* TODO: document columns’ logic cos it might feel weird at first */ - -webkit-column-count: var(--RS__colCount); - -moz-column-count: var(--RS__colCount); - column-count: var(--RS__colCount); - - -webkit-column-gap: var(--RS__colGap); - -moz-column-gap: var(--RS__colGap); - column-gap: var(--RS__colGap); - - /* Default is balance and we want columns to be filled entirely (100vh) */ - -moz-column-fill: auto; - column-fill: auto; - width: 100%; - height: 100vh; - max-width: 100%; - max-height: 100vh; - min-width: 100%; - min-height: 100vh; - padding: 0 !important; - margin: 0 !important; - - /* Column size will depend on this if we want to make it responsive */ - font-size: 100% !important; - - -webkit-text-size-adjust: 100%; +:root{ + position:relative; - /* Switch to newer box model (not inherited by authors’ styles) */ - box-sizing: border-box; + -webkit-column-width:var(--RS__colWidth); + -moz-column-width:var(--RS__colWidth); + column-width:var(--RS__colWidth); + -webkit-column-count:var(--RS__colCount); + -moz-column-count:var(--RS__colCount); + column-count:var(--RS__colCount); - /* Fix bug for older Chrome */ - -webkit-perspective: 1; - /* Prevents options pop-up when long tap in webkit */ - -webkit-touch-callout: none; + -webkit-column-gap:var(--RS__colGap); + -moz-column-gap:var(--RS__colGap); + column-gap:var(--RS__colGap); + -moz-column-fill:auto; + column-fill:auto; + width:var(--RS__viewportWidth); + height:100vh; + max-width:var(--RS__viewportWidth); + max-height:100vh; + min-width:var(--RS__viewportWidth); + min-height:100vh; + padding:0 !important; + margin:0 !important; + font-size:1rem !important; + box-sizing:border-box; + -webkit-touch-callout:none; } -body { - /* overflow: hidden; bugfix: contents won’t paginate in Firefox and one sample in Safari */ - width: 100%; +body{ + width:100%; + max-width:var(--RS__defaultLineLength) !important; + margin:0 auto !important; + box-sizing:border-box; +} - /* Limit line-length but we have to reset when 2 columns and control the viewport. - By using max-width + margin auto, margins will shrink when font-size increases, - which is what would be expected in terms of typography. */ - max-width: var(--RS__maxLineLength) !important; - padding: 0 var(--RS__pageGutter) !important; - margin: 0 auto !important; +:root:not([style*="readium-scroll-on"]) body{ + padding:0 var(--RS__pageGutter) !important; +} - /* We need a minimum padding on body so that descandants/ascendants in italic/script are not cut-off. - Drawback: we have to use border-box so that it doesn’t screw the box model, - which means it impacts colWidth and max-width */ - box-sizing: border-box; +:root:not([style*="readium-noOverflow-on"]) body{ + overflow:hidden; } -/* We’ll now redefine margins and columns depending on the minimum width available - The goal is having the simplest model possible and avoid targeting devices */ +@supports (overflow: clip){ -/* Smartphone landscape */ + :root:not([style*="readium-noOverflow-on"]){ + overflow:clip; + } -@media screen and (min-width: 35em) { - :root { - --RS__pageGutter: 30px; - } + :root:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; + overflow-clip-margin:content-box; + } } -/* Tablet portrait */ - -@media screen and (min-width: 45em) { - :root { - --RS__pageGutter: 40px; - } +:root[style*="readium-scroll-on"]{ + -webkit-columns:auto auto !important; + -moz-columns:auto auto !important; + columns:auto auto !important; + width:auto !important; + height:auto !important; + max-width:none !important; + max-height:none !important; + min-width:0 !important; + min-height:0 !important; } -/* Desktop + tablet large */ - -/* We get the previous settings, we just change the margins */ +:root[style*="readium-scroll-on"] body{ + max-width:var(--RS__defaultLineLength) !important; + box-sizing:border-box !important; +} -@media screen and (min-width: 75em) { - :root { - --RS__pageGutter: 50px; - } +:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{ + overflow:auto; } -/* At this point (80em or so), constraining line length must be done at the web view/iframe level, or by limiting the size of :root itself */ +@supports (overflow: clip){ -/* Responsive columns */ + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){ + overflow:auto; + } -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { - :root { - /* The size at which we want 2 columns to switch to 1 (depending on font-size) */ - --RS__colWidth: 20em; /* 20 * 16 = 320px but 20 * 28 = 560px so it will switch to 1 col @ 175% font-size (user-setting) on an iPad */ - /* We constrain to 2 columns so that we can never get 3 or 4, etc. */ - --RS__colCount: 2; - --RS__maxLineLength: 39.99rem; /* If we don’t use this, colNumber user setting won’t work in Safari… */ + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; } } -/* Readium CSS - Scroll module - - A set of styles to scroll ePublications - This module overrides pagination - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-scroll-on"] { - - /* Reset columns, auto + auto = columns can’t be created */ - -webkit-columns: auto auto !important; - -moz-columns: auto auto !important; - columns: auto auto !important; - width: auto !important; - height: auto !important; - max-width: none !important; - max-height: none !important; - /* Reset html size so that the user can scroll */ - min-width: 0 !important; - min-height: 0 !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingTop"] body{ + padding-top:var(--RS__scrollPaddingTop) !important; } -/* Make sure line-length is limited in all configs */ - -:root[style*="readium-scroll-on"] body { - --RS__maxLineLength: 40rem !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingBottom"] body{ + padding-bottom:var(--RS__scrollPaddingBottom) !important; } -/* Readium CSS - Night mode - - A preset theme for night mode - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ - -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; - - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; } -/* 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-night-on"] *:not(a) { - color: inherit !important; - background-color: transparent !important; - border-color: currentColor !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="--USER__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !important; } -:root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="--USER__backgroundColor"] *{ + background-color:transparent !important; } -:root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="--USER__textColor"]{ + color:var(--USER__textColor) !important; } -/* For epub:type, in case the contents are served as text/html, namespaces won’t work hence why we’re using both syntax */ - -:root[style*="readium-night-on"] img[class*="gaiji"], -:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, -:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -/* Darken all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); +:root[style*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !important; } -/* Invert all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !important; } -/* Darken and invert on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%) invert(100%); - filter: brightness(80%) invert(100%); +:root[style*="--USER__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !important; } -/* Readium CSS - Sepia mode - - A preset theme for sepia mode - - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; +} -/* CONFIG */ +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; +} -:root[style*="readium-sepia-on"] { - --RS__backgroundColor: #faf4e8; - --RS__textColor: #121212; +:root[style*="--USER__colCount"]{ + -webkit-column-count:var(--USER__colCount); + -moz-column-count:var(--USER__colCount); + column-count:var(--USER__colCount); - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; + --RS__colWidth:auto; +} - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"]{ + -webkit-column-count:1; + -moz-column-count:1; + column-count:1; +} - --RS__maxLineLength: 40.01rem; /* Forcing a reflow in Blink/Webkit so that blend mode can work */ +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"], +:root[style*="--USER__colCount: 1"], +:root[style*="--USER__colCount:1"]{ + --RS__colWidth:100vw; } -/* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ +:root[style*="--USER__lineLength"] body{ + max-width:var(--USER__lineLength) !important; + } -:root[style*="readium-sepia-on"] *:not(a) { - color: inherit !important; - background-color: transparent !important; +:root[style*="--USER__fontFamily"]{ + font-family:var(--USER__fontFamily) !important; } -:root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="--USER__fontFamily"] *{ + font-family:revert !important; } -:root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); +:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !important; } -:root[style*="readium-sepia-on"] svg, -:root[style*="readium-sepia-on"] img { - /* Make sure the proper bg-color is used for the blend mode */ - background-color: transparent !important; - mix-blend-mode: multiply; +:root:not([style*="readium-deprecatedFontSize-on"])[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; } -/* Readium CSS - OS Accessibility Modes - - A stylesheet to deal with OS accessibility settings - - Repo: https://github.com/readium/readium-css */ - -/* Windows high contrast colors are mapped to CSS system color keywords - See http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast */ - -@media screen and (-ms-high-contrast: active) { - :root { - color: windowText !important; - background-color: window !important; - } +@supports selector(figure:has(> img)){ - /* The following selectors are super funky but it makes sure everything is inherited, this is indeed critical for this mode */ - :root :not(#\#):not(#\#):not(#\#), - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) { - color: inherit !important; - background-color: inherit !important; + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> img), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> video), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> svg), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> canvas), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> iframe), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> audio), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> img:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> video:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> svg:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> canvas:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> iframe:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> audio:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] table{ + zoom:calc(100% / var(--USER__fontSize)) !important; } - .readiumCSS-mo-active-default { - color: highlightText !important; - background-color: highlight !important; - } - - /* For links, hyperlink keyword is automatically set */ - - /* Should we also set user highlights? */ -} - -@media screen and (-ms-high-contrast: white-on-black) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figcaption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] caption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] td, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] th{ + zoom:var(--USER__fontSize) !important; } } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ +@supports not (zoom: 1){ -@media screen and (inverted-colors) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); + :root[style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; } } -@media screen and (monochrome) { - /* Grayscale (Implemented in Safari, what about eInk?) */ - /* Must deal with anything color (contrast) so must be managed at the night/sepia/theme level :( */ +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +:root[style*="--USER__lineHeight"]{ + line-height:var(--USER__lineHeight) !important; } -/* Readium CSS - Columns number pref - - A submodule managing columns number for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Number of columns = 1 | 2 */ - -/* We still need to see if we allow users to force number of columns for all configs, currently it behaves as an "auto" setting */ - -/* apply col setting except for mobile portrait */ - -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { - :root[style*="--USER__colCount: 1"], - :root[style*="--USER__colCount:1"], - :root[style*="--USER__colCount: 2"], - :root[style*="--USER__colCount:2"] { - -webkit-column-count: var(--USER__colCount); - -moz-column-count: var(--USER__colCount); - column-count: var(--USER__colCount); - } - - /* If one column, make sure we limit line-length */ - :root[style*="--USER__colCount: 1"], - :root[style*="--USER__colCount:1"] { - --RS__maxLineLength: 40rem !important; /* This is the only way for the user setting to work in webkit… */ - --RS__colWidth: 100vw; - } - - /* If smartphone landscape, and 2 columns, col width the same as iPad landscape + desktop */ - :root[style*="--USER__colCount: 2"], - :root[style*="--USER__colCount:2"] { - --RS__colWidth: auto; /* User explicitely tells he/she wants 2 columns, we reset floor value */ - } +:root[style*="--USER__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:var(--USER__lineHeight) !important; } -/* Readium CSS - Page margins pref - - A submodule managing page margins for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Page Margins: the user margin is a factor of the page gutter e.g. 0.5, 0.75, 1, 1.25, 1.5, etc. */ - -:root[style*="--USER__pageMargins"] body { - padding: 0 calc(var(--RS__pageGutter) * var(--USER__pageMargins)) !important; +:root[style*="--USER__paraSpacing"] p{ + margin-top:var(--USER__paraSpacing) !important; + margin-bottom:var(--USER__paraSpacing) !important; } -/* Readium CSS - Custom colors pref - - A submodule managing custom colors for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__backgroundColor"] { - background-color: var(--USER__backgroundColor) !important; +:root[style*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; } -:root[style*="--USER__backgroundColor"] * { - background-color: transparent !important; +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; } -:root[style*="--USER__textColor"] { - color: var(--USER__textColor) !important; +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; } -:root[style*="--USER__textColor"] *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) { - color: inherit !important; +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; } -/* Readium CSS - Font Family pref - - A submodule managing font-family for user settings - Part of “User Overrides” class – “font override” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-font-on"][style*="--USER__fontFamily"] { - font-family: var(--USER__fontFamily) !important; +:root[style*="--USER__letterSpacing"] h1, +:root[style*="--USER__letterSpacing"] h2, +:root[style*="--USER__letterSpacing"] h3, +:root[style*="--USER__letterSpacing"] h4, +:root[style*="--USER__letterSpacing"] h5, +:root[style*="--USER__letterSpacing"] h6, +:root[style*="--USER__letterSpacing"] p, +:root[style*="--USER__letterSpacing"] li, +:root[style*="--USER__letterSpacing"] div, +:root[style*="--USER__letterSpacing"] dt, +:root[style*="--USER__letterSpacing"] dd{ + letter-spacing:var(--USER__letterSpacing) !important; + font-variant:none !important; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] body, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] p, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] li, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] div, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dt, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dd { - font-family: inherit !important; +:root[style*="readium-noRuby-on"] body rt, +:root[style*="readium-noRuby-on"] body rp{ + display:none; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([xml\:lang]) { - font-family: inherit !important; +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; } -/* Readium CSS - Font size pref - - A submodule managing font-size for user settings - Part of “User Overrides” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__fontSize"] { - font-size: var(--USER__fontSize) !important; +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; } -/* Readium CSS - Line height pref - - A submodule managing line-height for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] { - line-height: var(--USER__lineHeight) !important; +:root[style*="readium-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; } -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] body, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] p, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] li, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] div { - line-height: inherit; +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter:invert(var(--USER__invertImages)) !important; } -/* Readium CSS - Para spacing pref - - A submodule managing paragraphs’ top and bottom margins for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__paraSpacing"] p { - margin-top: var(--USER__paraSpacing) !important; - margin-bottom: var(--USER__paraSpacing) !important; +:root[style*="readium-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -/* Readium CSS - Font size normalize - - A stylesheet to normalize font-size - - Repo: https://github.com/readium/readium-css */ - -/* STYLES */ - -/* :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 */ - -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="--USER__darkenImages"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; + filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; } -:root[style*="readium-advanced-on"] p, -:root[style*="readium-advanced-on"] li, -:root[style*="readium-advanced-on"] div, -:root[style*="readium-advanced-on"] pre, -:root[style*="readium-advanced-on"] dd { - font-size: 1rem !important; +:root[style*="readium-darken-on"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(80%) invert(var(--USER__invertImages)) !important; + filter:brightness(80%) invert(var(--USER__invertImages)) !important; } -:root[style*="readium-advanced-on"] 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[style*="--USER__darkenImages"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(100%) !important; + filter:brightness(var(--USER__darkenImages)) invert(100%) !important; } -:root[style*="readium-advanced-on"] 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[style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%) invert(100%) !important; + filter:brightness(80%) invert(100%) !important; } -:root[style*="readium-advanced-on"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * var(--USER__typeScale)) !important; +:root[style*="--USER__invertGaiji"] img[class*="gaiji"]{ + -webkit-filter:invert(var(--USER__invertGaiji)) !important; + filter:invert(var(--USER__invertGaiji)) !important; } -:root[style*="readium-advanced-on"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - font-size: 1rem !important; +:root[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -:root[style*="readium-advanced-on"] small { - font-size: smaller !important; +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; } -:root[style*="readium-advanced-on"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !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; } -/* 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[style*="readium-advanced-on"][style*="--USER__typeScale"] h1 { - 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-advanced-on"][style*="--USER__typeScale"] h2 { - 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-advanced-on"][style*="--USER__typeScale"] h3 { - 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; } -/* Readium CSS - Default highlights - - A stylesheet for user highlights +:root[style*="readium-normalize-on"] h4, +:root[style*="readium-normalize-on"] h5, +:root[style*="readium-normalize-on"] h6{ + font-size:1rem !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; +} -/* User Highlights */ +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} -.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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !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; +:root[style*="readium-iPadOSPatch-on"] body{ + -webkit-text-size-adjust:none; } -/* Media overlays */ +:root[style*="readium-iPadOSPatch-on"] p, +:root[style*="readium-iPadOSPatch-on"] h1, +:root[style*="readium-iPadOSPatch-on"] h2, +:root[style*="readium-iPadOSPatch-on"] h3, +:root[style*="readium-iPadOSPatch-on"] h4, +:root[style*="readium-iPadOSPatch-on"] h5, +:root[style*="readium-iPadOSPatch-on"] h6, +:root[style*="readium-iPadOSPatch-on"] li, +:root[style*="readium-iPadOSPatch-on"] th, +:root[style*="readium-iPadOSPatch-on"] td, +:root[style*="readium-iPadOSPatch-on"] dt, +:root[style*="readium-iPadOSPatch-on"] dd, +:root[style*="readium-iPadOSPatch-on"] pre, +:root[style*="readium-iPadOSPatch-on"] address, +:root[style*="readium-iPadOSPatch-on"] details, +:root[style*="readium-iPadOSPatch-on"] summary, +:root[style*="readium-iPadOSPatch-on"] figcaption, +:root[style*="readium-iPadOSPatch-on"] div:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)), +:root[style*="readium-iPadOSPatch-on"] aside:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)){ + -webkit-text-zoom:reset; +} -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; +:root[style*="readium-iPadOSPatch-on"] abbr, +:root[style*="readium-iPadOSPatch-on"] b, +:root[style*="readium-iPadOSPatch-on"] bdi, +:root[style*="readium-iPadOSPatch-on"] bdo, +:root[style*="readium-iPadOSPatch-on"] cite, +:root[style*="readium-iPadOSPatch-on"] code, +:root[style*="readium-iPadOSPatch-on"] dfn, +:root[style*="readium-iPadOSPatch-on"] em, +:root[style*="readium-iPadOSPatch-on"] i, +:root[style*="readium-iPadOSPatch-on"] kbd, +:root[style*="readium-iPadOSPatch-on"] mark, +:root[style*="readium-iPadOSPatch-on"] q, +:root[style*="readium-iPadOSPatch-on"] rp, +:root[style*="readium-iPadOSPatch-on"] rt, +:root[style*="readium-iPadOSPatch-on"] ruby, +:root[style*="readium-iPadOSPatch-on"] s, +:root[style*="readium-iPadOSPatch-on"] samp, +:root[style*="readium-iPadOSPatch-on"] small, +:root[style*="readium-iPadOSPatch-on"] span, +:root[style*="readium-iPadOSPatch-on"] strong, +:root[style*="readium-iPadOSPatch-on"] sub, +:root[style*="readium-iPadOSPatch-on"] sup, +:root[style*="readium-iPadOSPatch-on"] time, +:root[style*="readium-iPadOSPatch-on"] u, +:root[style*="readium-iPadOSPatch-on"] var{ + -webkit-text-zoom:normal; } -/*# sourceMappingURL=ReadiumCSS-after.css.map */ \ No newline at end of file + +:root[style*="readium-iPadOSPatch-on"] p:not(:has(b, cite, em, i, q, s, small, span, strong)):first-line{ + -webkit-text-zoom:normal; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-before.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-before.css index dcb79fffdd..4271373511 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-before.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-before.css @@ -1,615 +1,526 @@ -/* Readium CSS - Config module +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ - A file allowing implementers to customize flags for reading modes, - user settings, etc. +@namespace url("http://www.w3.org/1999/xhtml"); - Repo: https://github.com/readium/readium-css */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ +@-ms-viewport{ + width:device-width; +} -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ +@viewport{ + width:device-width; + zoom:1; +} -/* User view = paged | scrolled */ +:root{ -/* Font-family override */ + --RS__sans-serif-ja-v:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDGothic', 'Yu Gothic', 'ＭＳゴシック', 'MS Gothic', sans-serif; -/* Advanced settings */ + --RS__serif-ja-v:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDMincho', 'Yu Mincho', 'ＭＳ明朝', 'MS Mincho', serif; -/* Reading Modes */ + --RS__sans-serif-ja:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDPGothic', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; -/* Filters (images) */ + --RS__serif-ja:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDPMincho', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif; -/* Accessibility normalization */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; -/* Direction i.e. ltr and rtl */ + --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; -/* Readium CSS - Namespaces module + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; - Namespaces to import in all 3 dist stylesheets + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; - Repo: https://github.com/readium/readium-css */ + --RS__zh-HK-lineHeightCompensation:1.167; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__zh-HK-baseFontFamily:'方體', 'PingFang HK', '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__zh-TW-lineHeightCompensation:1.167; -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__zh-TW-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__zh-Hant-lineHeightCompensation:1.167; -/* Readium CSS - Base module + --RS__zh-Hant-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; - A minimal stylesheet for all ebooks + --RS__zh-lineHeightCompensation:1.167; - Repo: https://github.com/readium/readium-css */ + --RS__zh-baseFontFamily:'方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif; -/* Define viewport, HTML5-style */ + --RS__th-lineHeightCompensation:1.067; -@-ms-viewport { - width: device-width; -} + --RS__th-baseFontFamily:Thonburi, 'Leelawadee UI', 'Cordia New', Roboto, Noto, 'Noto Sans Thai', sans-serif; -@viewport { - width: device-width; - zoom: 1; -} + --RS__te-baseFontFamily:'Kohinoor Telugu', 'Telugu Sangam MN', 'Nirmala UI', Gautami, Roboto, Noto, 'Noto Sans Telugu', sans-serif; -:root { - /* Default font-stacks */ - --RS__oldStyleTf: "Iowan Old Style", "Sitka Text", Palatino, "Book Antiqua", serif; - --RS__modernTf: Athelas, Constantia, Georgia, serif; - --RS__sansTf: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --RS__humanistTf: Seravek, Calibri, Roboto, Arial, sans-serif; - --RS__monospaceTf: "Andale Mono", Consolas, monospace; + --RS__ta-lineHeightCompensation:1.067; - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); + --RS__ta-baseFontFamily:'Tamil Sangam MN', 'Nirmala UI', Latha, Roboto, Noto, 'Noto Sans Tamil', sans-serif; - /* 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; + --RS__si-lineHeightCompensation:1.167; - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); -} + --RS__si-baseFontFamily:'Sinhala Sangam MN', 'Nirmala UI', 'Iskoola Pota', Roboto, Noto, 'Noto Sans Sinhala', sans-serif; -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ + --RS__pa-lineHeightCompensation:1.1; -html { - font-family: var(--RS__baseFontFamily); - /* Fallback line-height */ - line-height: 1.6; /* Fits a little bit better for all languages than 1.5 */ - line-height: var(--RS__baseLineHeight); - text-rendering: optimizeLegibility; -} + --RS__pa-baseFontFamily:'Gurmukhi MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Gurmukhi', sans-serif; -/* 1.5 being too loose with larger font-sizes, we reset headings to normal (which value is 1.125–1.375 for our font-stacks) */ + --RS__or-lineHeightCompensation:1.167; -h1, h2, h3 { - line-height: normal; -} + --RS__or-baseFontFamily:'Oriya Sangam MN', 'Nirmala UI', Kalinga, Roboto, Noto, 'Noto Sans Oriya', sans-serif; -:lang(ja), -:lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; -} + --RS__ml-lineHeightCompensation:1.067; -/* Set default font for Math */ + --RS__ml-baseFontFamily:'Malayalam Sangam MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Malayalam', sans-serif; -math { - font-family: "Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; -} + --RS__lo-baseFontFamily:'Lao Sangam MN', 'Leelawadee UI', 'Lao UI', Roboto, Noto, 'Noto Sans Lao', sans-serif; -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ + --RS__ko-lineHeightCompensation:1.167; -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ko-baseFontFamily:'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto, 'Noto Sans CJK KR', sans-serif; -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__kn-lineHeightCompensation:1.1; -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__kn-baseFontFamily:'Kannada Sangam MN', 'Nirmala UI', Tunga, Roboto, Noto, 'Noto Sans Kannada', sans-serif; -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; -} + --RS__km-lineHeightCompensation:1.067; -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; -} + --RS__km-baseFontFamily:'Khmer Sangam MN', 'Leelawadee UI', 'Khmer UI', Roboto, Noto, 'Noto Sans Khmer', sans-serif; -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__ja-lineHeightCompensation:1.167; -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ja-baseFontFamily:YuGothic, 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif; -:lang(he) { - --RS__baseFontFamily: "New Peninim MT", "Arial Hebrew", Gisha, "Times New Roman", Roboto, Noto, "Noto Sans Hebrew" sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__iu-baseFontFamily:'Euphemia UCAS', Euphemia, Roboto, Noto, 'Noto Sans Canadian Aboriginal', sans-serif; -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; + --RS__hy-baseFontFamily:Mshtakan, Sylfaen, Roboto, Noto, 'Noto Serif Armenian', serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__hi-lineHeightCompensation:1.1; -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; -} + --RS__hi-baseFontFamily:'Kohinoor Devanagari', 'Devanagari Sangam MN', Kokila, 'Nirmala UI', Roboto, Noto, 'Noto Sans Devanagari', sans-serif; -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; -} + --RS__he-lineHeightCompensation:1.1; -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; + --RS__he-baseFontFamily:'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto, 'Noto Sans Hebrew', sans-serif; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + --RS__gu-lineHeightCompensation:1.167; - /* Extra variables for Japanese font-stacks as we may want to reuse them for user settings + default */ - --RS__serif-ja: "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja: "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ ゴシック", "MS Gothic", "Hiragino Sans", sans-serif; - --RS__serif-ja-v: "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja-v: "ＭＳ ゴシック", "MS Gothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Sans", sans-serif; -} + --RS__gu-baseFontFamily:'Gujarati Sangam MN', 'Nirmala UI', Shruti, Roboto, Noto, 'Noto Sans Gujarati', sans-serif; -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__fa-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__chr-lineHeightCompensation:1.167; -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; + --RS__chr-baseFontFamily:'Plantagenet Cherokee', Roboto, Noto, 'Noto Sans Cherokee'; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__bo-baseFontFamily:Kailasa, 'Microsoft Himalaya', Roboto, Noto, 'Noto Sans Tibetan', sans-serif; -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; -} + --RS__bn-lineHeightCompensation:1.067; -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__bn-baseFontFamily:'Kohinoor Bangla', 'Bangla Sangam MN', Vrinda, Roboto, Noto, 'Noto Sans Bengali', sans-serif; -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ar-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__am-lineHeightCompensation:1.167; -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__am-baseFontFamily:Kefa, Nyala, Roboto, Noto, 'Noto Sans Ethiopic', serif; -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__latin-lineHeightCompensation:1; -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; -} + --RS__latin-baseFontFamily:var(--RS__oldStyleTf); + --RS__baseFontFamily:var(--RS__latin-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__latin-lineHeightCompensation); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__selectionTextColor:inherit; -/* The following will also work for zh-Hans */ + --RS__selectionBackgroundColor:#b4d8fe; -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; + --RS__visitedColor:#551A8B; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__linkColor:#0000EE; -:lang(zh-Hant), -:lang(zh-TW) { - --RS__baseFontFamily: "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; + --RS__textColor:#121212; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; + + background-color:var(--RS__backgroundColor) !important; } -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); +} - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -/* Readium CSS - Day/Default mode +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; +} - A preset theme for day mode, which is the default +h1, h2, h3{ + line-height:normal; +} - Repo: https://github.com/readium/readium-css */ +:lang(ja), +:lang(zh), +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; +} -/* CONFIG */ +math{ + font-family:"Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; +} -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; +:lang(am){ + --RS__baseFontFamily:var(--RS__am-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__am-lineHeightCompensation); +} - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:lang(ar){ + --RS__baseFontFamily:var(--RS__ar-baseFontFamily); } -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; +:lang(bn){ + --RS__baseFontFamily:var(--RS__bn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__bn-lineHeightCompensation); } -/* Note: Though `::selection` was present in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase because its behavior was under-specified (especially with nested elements) and interoperability wasn’t achieved. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */ +:lang(bo){ + --RS__baseFontFamily:var(--RS__bo-baseFontFamily); +} -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +:lang(chr){ + --RS__baseFontFamily:var(--RS__chr-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__chr-lineHeightCompensation); } -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +:lang(fa){ + --RS__baseFontFamily:var(--RS__fa-baseFontFamily); } -/* @import "modules/ReadiumCSS-fonts.css"; */ +:lang(gu){ + --RS__baseFontFamily:var(--RS__gu-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__gu-lineHeightCompensation); +} -/* Readium CSS - HTML5 SR Patch stylesheet +:lang(he){ + --RS__baseFontFamily:var(--RS__he-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__he-lineHeightCompensation); +} - A set of style to adjust HTML5 Suggested Rendering to paginated content +:lang(hi){ + --RS__baseFontFamily:var(--RS__hi-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__hi-lineHeightCompensation); +} - Repo: https://github.com/readium/readium-css */ +:lang(hy){ + --RS__baseFontFamily:var(--RS__hy-baseFontFamily); +} -/* Fragmentation */ +:lang(iu){ + --RS__baseFontFamily:var(--RS__iu-baseFontFamily); +} -body { - widows: 2; - orphans: 2; +:lang(ja){ + --RS__baseFontFamily:var(--RS__ja-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ja-lineHeightCompensation); } -figcaption, th, td { - widows: 1; - orphans: 1; +:lang(km){ + --RS__baseFontFamily:var(--RS__km-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__km-lineHeightCompensation); } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +:lang(kn){ + --RS__baseFontFamily:var(--RS__kn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__kn-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +:lang(ko){ + --RS__baseFontFamily:var(--RS__ko-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ko-lineHeightCompensation); } -/* Hyphenation */ +:lang(lo){ + --RS__baseFontFamily:var(--RS__lo-baseFontFamily); +} -body { - -webkit-hyphenate-character: "\002D"; - -moz-hyphenate-character: "\002D"; - -ms-hyphenate-character: "\002D"; - hyphenate-character: "\002D"; - -webkit-hyphenate-limit-lines: 3; - -ms-hyphenate-limit-lines: 3; - hyphenate-limit-lines: 3; +:lang(ml){ + --RS__baseFontFamily:var(--RS__ml-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ml-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figcaption, -pre, -caption, -address, -center, -code, -var { - -ms-hyphens: none; - -moz-hyphens: none; - -webkit-hyphens: none; - -epub-hyphens: none; - hyphens: none; +:lang(or){ + --RS__baseFontFamily:var(--RS__or-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__or-lineHeightCompensation); } -/* OTF */ +:lang(pa){ + --RS__baseFontFamily:var(--RS__pa-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__pa-lineHeightCompensation); +} -body { - font-variant-numeric: oldstyle-nums proportional-nums; +:lang(si){ + --RS__baseFontFamily:var(--RS__si-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__si-lineHeightCompensation); } -:lang(ja) body, -:lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; +:lang(ta){ + --RS__baseFontFamily:var(--RS__ta-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ta-lineHeightCompensation); } -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; +:lang(te){ + --RS__baseFontFamily:var(--RS__te-baseFontFamily); } -table { - font-variant-numeric: lining-nums tabular-nums; +:lang(th){ + --RS__baseFontFamily:var(--RS__th-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__th-lineHeightCompensation); } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +:lang(zh){ + --RS__baseFontFamily:var(--RS__zh-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-lineHeightCompensation); } -rt { - font-variant-east-asian: ruby; +:lang(zh-Hant){ + --RS__baseFontFamily:var(--RS__zh-Hant-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-Hant-lineHeightCompensation); } -:lang(ar) { - font-variant-ligatures: common-ligatures; +:lang(zh-TW){ + --RS__baseFontFamily:var(--RS__zh-TW-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-TW-lineHeightCompensation); } -:lang(ko) { - font-kerning: normal; +:lang(zh-HK){ + --RS__baseFontFamily:var(--RS__zh-HK-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-HK-lineHeightCompensation); } -/* Night mode */ +body{ + widows:2; + orphans:2; +} -hr { - color: inherit; - border-color: currentColor; +figcaption, th, td{ + widows:1; + orphans:1; } -table, th, td { - border-color: currentColor; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -/* Horizontal Spacing */ +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; +} -figure, blockquote { - margin: 1em 5%; +body{ + -webkit-hyphenate-character:"\002D"; + -moz-hyphenate-character:"\002D"; + -ms-hyphenate-character:"\002D"; + hyphenate-character:"\002D"; + -webkit-hyphenate-limit-lines:3; + -ms-hyphenate-limit-lines:3; + hyphenate-limit-lines:3; } -/* +h1, h2, h3, h4, h5, h6, dt, +figcaption, pre, caption, address, +center, code, var{ + -ms-hyphens:none; + -moz-hyphens:none; + -webkit-hyphens:none; + -epub-hyphens:none; + hyphens:none; +} -:lang(ja) figure, :lang(ja) blockquote, -:lang(zh-Hant) figure, :lang(zh-Hant) blockquote, -:lang(zh-TW) figure, :lang(zh-TW) blockquote, -:lang(mn) figure, :lang(mn) blockquote { - margin: 5% 1em; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } -*/ +:lang(ja) body, +:lang(zh) body, +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; +} -ul, ol { - padding-left: 5%; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -/* +table{ + font-variant-numeric:lining-nums tabular-nums; +} -:lang(ja) ul, :lang(ja) ol, -:lang(zh-Hant) ul, :lang(zh-Hant) ol, -:lang(zh-TW) ul, :lang(zh-TW) ol, -:lang(mn) ul, :lang(mn) ol { - padding-top: 5%; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -*/ +rt{ + font-variant-east-asian:ruby; +} -dd { - margin-left: 5%; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -/* +:lang(ko){ + font-kerning:normal; +} -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; +hr{ + color:inherit; + border-color:currentcolor; } -*/ +table, th, td{ + border-color:currentcolor; +} -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; +figure, blockquote{ + margin:1em 5%; } -/* Normalization */ +ul, ol{ + padding-left:5%; +} -abbr[title], acronym[title] { - text-decoration: dotted underline; +dd{ + margin-left:5%; } -nobr wbr { - white-space: normal; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -/* Make ruby text and parentheses non-selectable (TBC) */ +abbr[title], acronym[title]{ + text-decoration:dotted underline; +} -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +nobr wbr{ + white-space:normal; } -/* Internationalization */ +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} -*:lang(ja), -*:lang(zh), -*:lang(ko), -:lang(ja) cite, -:lang(ja) dfn, -:lang(ja) em, -:lang(ja) i, -:lang(zh) cite, -:lang(zh) dfn, -:lang(zh) em, -:lang(zh) i, -:lang(ko) cite, -:lang(ko) dfn, -:lang(ko) em, -:lang(ko) i { - font-style: normal; +*:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)), +*:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)), +*:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)), +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) cite, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) dfn, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) em, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) i, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) cite, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) dfn, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) em, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) i, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) cite, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) dfn, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) em, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) i{ + font-style:normal; } :lang(ja) a, :lang(zh) a, -:lang(ko) a { - text-decoration: none; +:lang(ko) a{ + text-decoration:none; } -/* Readium CSS - Safeguards module - - A set of styles to prevent common issues in pagination - - Repo: https://github.com/readium/readium-css */ - -/* Config */ - -/* We’ll be using an "RS__" prefix so that we can prevent collisions with authors’ CSS */ - -:root { - /* max-width for media, you can override that via JS if not compiled to static */ - --RS__maxMediaWidth: 100%; - - /* max-height for media, you can override that via JS if not compiled to static - Please consider figures might have a figcaption, which is why 95vh in the first place */ - --RS__maxMediaHeight: 95vh; - - /* value for medias’ box-sizing */ - --RS__boxSizingMedia: border-box; - - /* value for table’s box-sizing */ - --RS__boxSizingTable: border-box; +:root{ + --RS__maxMediaWidth:100%; + --RS__maxMediaHeight:95vh; + --RS__boxSizingMedia:border-box; + --RS__boxSizingTable:border-box; } -/* Sanitize line-heights in webkit e.g. raised cap without a declared line-height - See effect by checking this demo in Safari: https://codepen.io/JayPanoz/pen/gRmzrE - Note: glyphs has to be reset to inline for CJK */ - -html { - -webkit-line-box-contain: block glyphs replaced; +a, a span, span a, h1, h2, h3, h4, h5, h6{ + word-wrap:break-word; } -:lang(ja) { - -webkit-line-box-contain: block inline replaced; +div{ + max-width:var(--RS__maxMediaWidth); } -/* Wrap long strings if larger than line-length */ - -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; -} +img, svg|svg, video{ + object-fit:contain; -div { - max-width: var(--RS__maxMediaWidth); + width:auto; + height:auto; + max-width:var(--RS__maxMediaWidth); + max-height:var(--RS__maxMediaHeight) !important; + box-sizing:var(--RS__boxSizingMedia); + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -/* Size medias */ - -/* You can override CSS variables by re-defining it for all elements or a specific one */ - -img, svg, audio, video { +@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){ - /* Object-fit allows us to keep the correct aspect-ratio */ - object-fit: contain; - - width: auto; - height: auto; - - /* Some files don’t have max-width */ - max-width: var(--RS__maxMediaWidth); - - /* We’re setting a max-height, especially for covers */ - max-height: var(--RS__maxMediaHeight) !important; - /* We probably don’t need to use modern box-sizing as auto behaves like it */ - box-sizing: var(--RS__boxSizingMedia); - - /* For page-break, we must use those 3 - We can’t use a variable there, webkit seems to no support them for those properties */ - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video{ + zoom:calc(100% / var(--USER__fontSize)); + } } -/* Try preventing border being cut-off, webkit + blink have content-box by default */ +audio{ + max-width:100%; + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; + } -table { - max-width: var(--RS__maxMediaWidth); - box-sizing: var(--RS__boxSizingTable); -} -/*# sourceMappingURL=ReadiumCSS-before.css.map */ \ No newline at end of file +table{ + max-width:var(--RS__maxMediaWidth); + box-sizing:var(--RS__boxSizingTable); +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-default.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-default.css index 37530d830a..2cef48fd2e 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-default.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-default.css @@ -1,207 +1,177 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Default module for CJK horizontal writing - - A stylesheet for unstyled ebooks based on HTML5 Suggested Rendering - Note: works in combination with Base module - - Repo: https://github.com/readium/readium-css */ +:root{ -/* CONFIG */ + --RS__compFontFamily:var(--RS__baseFontFamily); + --RS__codeFontFamily:var(--RS__monospaceTf); -:root { - /* Extra variables for Japanese font-stacks: - • --RS__serif-ja; - • --RS__sans-serif-ja. + --RS__typeScale:1.125; + --RS__baseFontSize:87.5%; - They can be used instead of --RS__baseFontFamily and --RS__compFontFamily */ + --RS__flowSpacing:1.5rem; + --RS__paraSpacing:0; + --RS__paraIndent:1em; - --RS__compFontFamily: var(--RS__baseFontFamily); - --RS__codeFontFamily: var(--RS__monospaceTf); + --RS__linkColor:#0000EE; + --RS__visitedColor:#551A8B; - --RS__typeScale: 1.125; /* 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618 */ - --RS__baseFontSize: 87.5%; - - --RS__flowSpacing: 1.5rem; - --RS__paraSpacing: 0; - --RS__paraIndent: 1em; - - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; - - --RS__primaryColor: ; - --RS__secondaryColor: ; + --RS__primaryColor:; + --RS__secondaryColor:; } -:root:lang(zh) { - --RS__paraIndent: 2em; +:root:lang(zh){ + --RS__paraIndent:2em; } -/* STYLES */ - -/* Typo */ - -:root { - quotes: "\201c" "\201d" "\2018" "\2019"; +:root{ + quotes:"\201c" "\201d" "\2018" "\2019"; } -body { - font-size: var(--RS__baseFontSize); - text-align: justify; - text-justify: inter-character; +body{ + font-size:var(--RS__baseFontSize); + text-align:justify; + text-justify:inter-character; } -h1, h2, h3, h4, h5, h6 { - font-family: var(--RS__baseFontFamily); - text-align: left; - text-align: start; +h1, h2, h3, h4, h5, h6{ + font-family:var(--RS__baseFontFamily); + text-align:left; + text-align:start; } -/* Flow content */ - -blockquote, -figure, -p, -pre, -aside, -footer, -form, -hr { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); +blockquote, figure, p, pre, +aside, footer, form, hr{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); } -p { - margin-top: var(--RS__paraSpacing); - margin-bottom: var(--RS__paraSpacing); - text-indent: var(--RS__paraIndent); +p{ + margin-top:var(--RS__paraSpacing); + margin-bottom:var(--RS__paraSpacing); + text-indent:var(--RS__paraIndent); } -pre { - font-family: var(--RS__codeFontFamily); +pre{ + font-family:var(--RS__codeFontFamily); } -/* Phrasing content */ - -code, kbd, samp, tt { - font-family: var(--RS__codeFontFamily); +code, kbd, samp, tt{ + font-family:var(--RS__codeFontFamily); } -sub, sup { - position: relative; - font-size: 67.5%; - line-height: 1; +sub, sup{ + position:relative; + font-size:67.5%; + line-height:1; } -sub { - bottom: -0.2ex; +sub{ + bottom:-0.2ex; } -sup { - bottom: 0; +sup{ + bottom:0; } -em { - -webkit-text-emphasis: dot; - -epub-text-emphasis: dot; - text-emphasis: dot; +em{ + -webkit-text-emphasis:dot; + -epub-text-emphasis:dot; + text-emphasis:dot; } -:link { - color: var(--RS__linkColor); +:link{ + color:var(--RS__linkColor); } -:visited { - color: var(--RS__visitedColor); +:visited{ + color:var(--RS__visitedColor); } -/* Headings */ - -h1 { - margin-top: calc(var(--RS__flowSpacing) * 2); - margin-bottom: calc(var(--RS__flowSpacing) * 2); - /* The following is base font size * typescale power of 3 */ - font-size: calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); - text-align: center; +h1{ + margin-top:calc(var(--RS__flowSpacing) * 2); + margin-bottom:calc(var(--RS__flowSpacing) * 2); + font-size:calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); + text-align:center; } -h2 { - margin-top: calc(var(--RS__flowSpacing) * 2); - margin-bottom: var(--RS__flowSpacing); - /* The following is base font size * typescale power of 2 */ - font-size: calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); - text-align: center; +h2{ + margin-top:calc(var(--RS__flowSpacing) * 2); + margin-bottom:var(--RS__flowSpacing); + font-size:calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); + text-align:center; } -h3 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-size: calc(1em * var(--RS__typeScale)); - text-align: center; +h3{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-size:calc(1em * var(--RS__typeScale)); + text-align:center; } -h4 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-family: var(--RS__compFontFamily); - font-size: 1em; +h4{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-family:var(--RS__compFontFamily); + font-size:1em; } -h5 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-family: var(--RS__compFontFamily); - font-size: smaller; +h5{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-family:var(--RS__compFontFamily); + font-size:smaller; } -h6 { - margin-top: var(--RS__flowSpacing); - margin-bottom: 0; - font-family: var(--RS__compFontFamily); - font-size: smaller; - font-weight: normal; +h6{ + margin-top:var(--RS__flowSpacing); + margin-bottom:0; + font-family:var(--RS__compFontFamily); + font-size:smaller; + font-weight:normal; } -/* Lists */ - -dl, ol, ul { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); +dl, ol, ul{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); } -/* Table */ - -table { - margin: var(--RS__flowSpacing) 0; - border: 1px solid currentColor; - border-collapse: collapse; - empty-cells: show; +table{ + margin:var(--RS__flowSpacing) 0; + border:1px solid currentcolor; + border-collapse:collapse; + empty-cells:show; } -thead, tbody, tfoot, table > tr { - vertical-align: top; +thead, tbody, tfoot, table > tr{ + vertical-align:top; } -th { - text-align: left; +th{ + text-align:left; } -th, td { - padding: 4px; - border: 1px solid currentColor; -} -/*# sourceMappingURL=ReadiumCSS-default.css.map */ \ No newline at end of file +th, td{ + padding:4px; + border:1px solid currentcolor; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-after.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-after.css index d60d264dca..5b8d2e2749 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-after.css @@ -1,680 +1,472 @@ -/* Readium CSS - Config module - - A file allowing implementers to customize flags for reading modes, - user settings, etc. - - Repo: https://github.com/readium/readium-css */ - -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ - -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ - -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ - -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ - -/* User view = paged | scrolled */ - -/* Font-family override */ - -/* Advanced settings */ - -/* Reading Modes */ - -/* Filters (images) */ - -/* Accessibility normalization */ - -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ - -/* Direction i.e. ltr and rtl */ - -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Pagination module for vertical writing - - A set of styles to paginate ePublications in “writing-mode: vertical-*” - - Repo: https://github.com/readium/readium-css */ +:root{ -/* Config */ + --RS__viewportWidth:100%; -/* We must simplify the pagination model for vertical writing, and can’t fake spreads. */ + --RS__pageGutter:0; -/* Default for smartphone portrait (small screens) */ + --RS__defaultLineLength:100%; -:root { - /* The column will be the height of the web view/iframe */ - --RS__colWidth: 100vh; + --RS__colGap:0; - /* Since columns are laid out on the y-axis in vertical-*, we can only use 1 */ - --RS__colCount: 1; + --RS__colCount:1; - /* Gap between columns (in pixels so that it won’t resize with font-size) */ - --RS__colGap: 0; - - /* Optimal line-length (rem will take :root font-size into account, whatever the body’s font-size) */ - --RS__maxLineLength: 40rem; - - /* Default page vertical margins (in pixels so that it won’t resize with font-size) */ - --RS__pageGutter: 20px; /* See if colGap and pageGutter can be the same var */ + --RS__colWidth:100vw; } -/* Reset page margins for Forward compatibility */ - -@page { - margin: 0 !important; +@page{ + margin:0 !important; } -/* :root selector has same specificity as a class i.e. 0010 - We might have to change that to html / context - -> https://css-tricks.com/almanac/selectors/r/root/ */ - -:root { - - /* In case you use left position to scroll, can be removed if using transform: translateX() */ - position: relative; - - -webkit-column-width: var(--RS__colWidth); - -moz-column-width: var(--RS__colWidth); - column-width: var(--RS__colWidth); - - /* Init pagination */ - /* TODO: document columns’ logic cos it might feel weird at first */ - -webkit-column-count: var(--RS__colCount); - -moz-column-count: var(--RS__colCount); - column-count: var(--RS__colCount); - - -webkit-column-gap: var(--RS__colGap); - -moz-column-gap: var(--RS__colGap); - column-gap: var(--RS__colGap); - - /* Default is balance and we want columns to be filled entirely (100vh) */ - -moz-column-fill: auto; - column-fill: auto; - width: 100%; - height: 100vh; - max-width: 100%; - max-height: 100vh; - min-width: 100%; - min-height: 100vh; - padding: 0 var(--RS__pageGutter) !important; - margin: 0 !important; - - /* Column size will depend on this if we want to make it responsive */ - font-size: 100% !important; +:root{ + position:relative; - -webkit-text-size-adjust: 100%; + -webkit-column-width:var(--RS__colWidth); + -moz-column-width:var(--RS__colWidth); + column-width:var(--RS__colWidth); + -webkit-column-count:var(--RS__colCount); + -moz-column-count:var(--RS__colCount); + column-count:var(--RS__colCount); - /* Switch to newer box model (not inherited by authors’ styles) */ - box-sizing: border-box; + -webkit-column-gap:var(--RS__colGap); + -moz-column-gap:var(--RS__colGap); + column-gap:var(--RS__colGap); + -moz-column-fill:auto; + column-fill:auto; + width:100%; + height:100vh; + max-width:100%; + max-height:100vh; + min-width:100%; + min-height:100vh; + padding:0 !important; + margin:0 !important; + font-size:1rem !important; + box-sizing:border-box; - hanging-punctuation: last allow-end; - - /* Fix bug for older Chrome */ - -webkit-perspective: 1; - /* Prevents options pop-up when long tap in webkit */ - -webkit-touch-callout: none; - - /* The reason why we don’t force -webkit-column-axis is that it switches the column-box model to a paged overflow model. - In other words, columns become useless, the sizing of the :root itself will be used for pagination */ - - /* Ensure the correct writing-mode is used */ - -ms-writing-mode: tb-rl; - -webkit-writing-mode: vertical-rl; - writing-mode: vertical-rl; + hanging-punctuation:last allow-end; + -webkit-touch-callout:none; + -ms-writing-mode:tb-rl; + -webkit-writing-mode:vertical-rl; + writing-mode:vertical-rl; } -:root:lang(mn-Mong) { - /* Ensure the correct writing-mode is used for mongolian if vertical */ - -ms-writing-mode: tb; - -webkit-writing-mode: vertical-lr; - writing-mode: vertical-lr; +:root:lang(mn-Mong){ + -ms-writing-mode:tb; + -webkit-writing-mode:vertical-lr; + writing-mode:vertical-lr; } -body { - /* overflow: hidden; bugfix: contents won’t paginate in Firefox and one sample in Safari */ - width: 100%; - - /* Limit line-length but we have to reset when 2 columns and control the viewport. - By using max-width + margin auto, margins will shrink when font-size increases, - which is what would be expected in terms of typography. */ - max-height: var(--RS__maxLineLength) !important; - padding: var(--RS__pageGutter) 0 !important; - margin: auto 0 !important; +body{ + width:100%; + max-height:var(--RS__defaultLineLength) !important; + margin:auto 0 !important; + box-sizing:border-box; +} - /* We need a minimum padding on body so that descandants/ascendants in italic/script are not cut-off. - Drawback: we have to use border-box so that it doesn’t screw the box model, - which means it impacts colWidth and max-width */ - box-sizing: border-box; +:root:not([style*="readium-scroll-on"]) body{ + padding:var(--RS__pageGutter) 0 !important; } -/* We’ll now redefine margins and columns depending on the minimum width available - The goal is having the simplest model possible and avoid targeting devices */ +:root:not([style*="readium-noOverflow-on"]) body{ + overflow:hidden; +} -/* Smartphone landscape */ +@supports (overflow: clip){ -@media screen and (min-width: 35em) { - :root { - --RS__pageGutter: 30px; + :root:not([style*="readium-noOverflow-on"]){ + overflow:clip; } -} -/* Tablet portrait */ - -@media screen and (min-width: 45em) { - :root { - --RS__pageGutter: 40px; + :root:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; + overflow-clip-margin:content-box; } } -/* Desktop small + phablet + tablet landscape */ +:root[style*="readium-scroll-on"], +:root[style*="readium-noVerticalPagination-on"]{ + -webkit-columns:auto auto !important; + -moz-columns:auto auto !important; + columns:auto auto !important; + width:auto !important; + max-width:none !important; + max-height:100vh !important; + min-width:0 !important; +} -@media screen and (min-width: 60em) { - :root { - --RS__pageGutter: 50px; - } +:root[style*="readium-scroll-on"] body, +:root[style*="readium-noVerticalPagination-on"] body{ + max-width:var(--RS__defaultLineLength) !important; + box-sizing:border-box !important; } -/* Desktop + tablet large */ +@supports (overflow: clip){ -/* We get the previous settings, we just change the margins */ + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){ + overflow:auto; + } -@media screen and (min-width: 75em) { - :root { - --RS__pageGutter: 60px; + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; } } -/* At this point (80em or so), constraining line length must be done at the web view/iframe level, or by limiting the size of :root itself */ - -/* Readium CSS - Scroll module for vertical-writing - - A set of styles to scroll ePublications in “writing-mode: vertical-*” - This module overrides pagination - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-scroll-on"] { - - /* Reset columns, auto + auto = columns can’t be created */ - /* There is a weird gap in Safari/Webkit, as if overflow paged-x… */ - -webkit-columns: auto auto !important; - -moz-columns: auto auto !important; - columns: auto auto !important; - width: auto !important; - max-width: none !important; - max-height: 100vh !important; - /* Reset html size so that the user can scroll */ - min-width: 0 !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingTop"] body{ + padding-top:var(--RS__scrollPaddingTop) !important; } -/* Make sure line-length is limited in all configs */ - -:root[style*="readium-scroll-on"] body { - --RS__maxLineLength: 40.01rem !important; /* Fixes fragmentation update issues in Webkit i.e. value must be slightly different than the one for pagination */ +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingBottom"] body{ + padding-bottom:var(--RS__scrollPaddingBottom) !important; } -/* Scroll mode horizontal */ - -/* Do we add a top/bottom margin for body in vertical scroll or not? */ - -/* Readium CSS - Night mode - - A preset theme for night mode - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ - -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; - - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; } -/* 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-night-on"] *:not(a) { - color: inherit !important; - background-color: transparent !important; - border-color: currentColor !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="--USER__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !important; } -:root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="--USER__backgroundColor"] *{ + background-color:transparent !important; } -:root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="--USER__textColor"]{ + color:var(--USER__textColor) !important; } -/* For epub:type, in case the contents are served as text/html, namespaces won’t work hence why we’re using both syntax */ - -:root[style*="readium-night-on"] img[class*="gaiji"], -:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, -:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -/* Darken all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); +:root[style*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !important; } -/* Invert all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !important; } -/* Darken and invert on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%) invert(100%); - filter: brightness(80%) invert(100%); +:root[style*="--USER__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !important; } -/* Readium CSS - Sepia mode - - A preset theme for sepia mode - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -:root[style*="readium-sepia-on"] { - --RS__backgroundColor: #faf4e8; - --RS__textColor: #121212; - - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; +} - --RS__maxLineLength: 40.01rem; /* Forcing a reflow in Blink/Webkit so that blend mode can work */ +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; } -/* we don’t need to redeclare bg-color and color for :root since we will inherit and update from day/default mode */ +:root[style*="--USER__lineLength"] body{ + max-height:var(--USER__lineLength) !important; + } -:root[style*="readium-sepia-on"] *:not(a) { - color: inherit !important; - background-color: transparent !important; +:root[style*="--USER__fontFamily"]{ + font-family:var(--USER__fontFamily) !important; } -:root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="--USER__fontFamily"] *{ + font-family:revert !important; } -:root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); +:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !important; } -:root[style*="readium-sepia-on"] svg, -:root[style*="readium-sepia-on"] img { - /* Make sure the proper bg-color is used for the blend mode */ - background-color: transparent !important; - mix-blend-mode: multiply; +:root:not([style*="readium-deprecatedFontSize-on"])[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; } -/* Readium CSS - OS Accessibility Modes - - A stylesheet to deal with OS accessibility settings +@supports selector(figure:has(> img)){ - Repo: https://github.com/readium/readium-css */ - -/* Windows high contrast colors are mapped to CSS system color keywords - See http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast */ - -@media screen and (-ms-high-contrast: active) { - :root { - color: windowText !important; - background-color: window !important; + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> img), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> video), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> svg), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> canvas), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> iframe), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> audio), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> img:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> video:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> svg:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> canvas:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> iframe:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> audio:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] table{ + zoom:calc(100% / var(--USER__fontSize)) !important; } - /* The following selectors are super funky but it makes sure everything is inherited, this is indeed critical for this mode */ - :root :not(#\#):not(#\#):not(#\#), - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) { - color: inherit !important; - background-color: inherit !important; - } - - .readiumCSS-mo-active-default { - color: highlightText !important; - background-color: highlight !important; - } - - /* For links, hyperlink keyword is automatically set */ - - /* Should we also set user highlights? */ -} - -@media screen and (-ms-high-contrast: white-on-black) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figcaption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] caption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] td, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] th{ + zoom:var(--USER__fontSize) !important; } } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ +@supports not (zoom: 1){ -@media screen and (inverted-colors) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); + :root[style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; } } -@media screen and (monochrome) { - /* Grayscale (Implemented in Safari, what about eInk?) */ - /* Must deal with anything color (contrast) so must be managed at the night/sepia/theme level :( */ +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +:root[style*="--USER__lineHeight"]{ + line-height:var(--USER__lineHeight) !important; } -/* Readium CSS - Page margins pref - - A submodule managing page margins for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Page Margins: the user margin is a factor of the page gutter e.g. 0.5, 0.75, 1, 1.25, 1.5, etc. */ - -:root[style*="--USER__pageMargins"] body { - padding: calc(var(--RS__pageGutter) * var(--USER__pageMargins)) 0 !important; +:root[style*="--USER__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:var(--USER__lineHeight) !important; } -/* Readium CSS - Custom colors pref - - A submodule managing custom colors for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__backgroundColor"] { - background-color: var(--USER__backgroundColor) !important; +:root[style*="--USER__paraSpacing"] p{ + margin-right:var(--USER__paraSpacing) !important; + margin-left:var(--USER__paraSpacing) !important; } -:root[style*="--USER__backgroundColor"] * { - background-color: transparent !important; +:root[style*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; } -:root[style*="--USER__textColor"] { - color: var(--USER__textColor) !important; +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; } -:root[style*="--USER__textColor"] *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) { - color: inherit !important; +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; } -/* Readium CSS - Font Family pref - - A submodule managing font-family for user settings - Part of “User Overrides” class – “font override” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-font-on"][style*="--USER__fontFamily"] { - font-family: var(--USER__fontFamily) !important; +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] body, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] p, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] li, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] div, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dt, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dd { - font-family: inherit !important; +:root[style*="--USER__letterSpacing"] h1, +:root[style*="--USER__letterSpacing"] h2, +:root[style*="--USER__letterSpacing"] h3, +:root[style*="--USER__letterSpacing"] h4, +:root[style*="--USER__letterSpacing"] h5, +:root[style*="--USER__letterSpacing"] h6, +:root[style*="--USER__letterSpacing"] p, +:root[style*="--USER__letterSpacing"] li, +:root[style*="--USER__letterSpacing"] div, +:root[style*="--USER__letterSpacing"] dt, +:root[style*="--USER__letterSpacing"] dd{ + letter-spacing:var(--USER__letterSpacing) !important; + font-variant:none !important; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([xml\:lang]) { - font-family: inherit !important; +:root[style*="readium-noRuby-on"] body rt, +:root[style*="readium-noRuby-on"] body rp{ + display:none; } -/* Readium CSS - Font size pref - - A submodule managing font-size for user settings - Part of “User Overrides” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__fontSize"] { - font-size: var(--USER__fontSize) !important; +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; } -/* Readium CSS - Line height pref - - A submodule managing line-height for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] { - line-height: var(--USER__lineHeight) !important; +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; } -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] body, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] p, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] li, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] div { - line-height: inherit; +:root[style*="readium-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; } -/* Readium CSS - Para spacing pref - - A submodule managing paragraphs’ top and bottom margins for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__paraSpacing"] p { - margin-right: var(--USER__paraSpacing) !important; - margin-left: var(--USER__paraSpacing) !important; +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter:invert(var(--USER__invertImages)) !important; } -/* Readium CSS - Font size normalize - - A stylesheet to normalize font-size - - Repo: https://github.com/readium/readium-css */ - -/* STYLES */ - -/* :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 */ - -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="readium-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -:root[style*="readium-advanced-on"] p, -:root[style*="readium-advanced-on"] li, -:root[style*="readium-advanced-on"] div, -:root[style*="readium-advanced-on"] pre, -:root[style*="readium-advanced-on"] dd { - font-size: 1rem !important; +:root[style*="--USER__darkenImages"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; + filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; } -:root[style*="readium-advanced-on"] 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[style*="readium-darken-on"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(80%) invert(var(--USER__invertImages)) !important; + filter:brightness(80%) invert(var(--USER__invertImages)) !important; } -:root[style*="readium-advanced-on"] 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[style*="--USER__darkenImages"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(100%) !important; + filter:brightness(var(--USER__darkenImages)) invert(100%) !important; } -:root[style*="readium-advanced-on"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * var(--USER__typeScale)) !important; +:root[style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%) invert(100%) !important; + filter:brightness(80%) invert(100%) !important; } -:root[style*="readium-advanced-on"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - font-size: 1rem !important; +:root[style*="--USER__invertGaiji"] img[class*="gaiji"]{ + -webkit-filter:invert(var(--USER__invertGaiji)) !important; + filter:invert(var(--USER__invertGaiji)) !important; } -:root[style*="readium-advanced-on"] small { - font-size: smaller !important; +:root[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -:root[style*="readium-advanced-on"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !important; +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; } -/* 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[style*="readium-advanced-on"][style*="--USER__typeScale"] h1 { - font-size: calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !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-advanced-on"][style*="--USER__typeScale"] h2 { - font-size: calc((1rem * 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-advanced-on"][style*="--USER__typeScale"] h3 { - font-size: calc(1rem * 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; } -/* Readium CSS - Default highlights +:root[style*="readium-normalize-on"] h3{ + font-size:1.25rem !important; + font-size:calc(1rem * var(--USER__typeScale)) !important; +} - A stylesheet for user highlights +:root[style*="readium-normalize-on"] h4, +:root[style*="readium-normalize-on"] h5, +:root[style*="readium-normalize-on"] h6{ + font-size:1rem !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; +} -/* User Highlights */ +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} -.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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !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; +:root[style*="readium-iPadOSPatch-on"] body{ + -webkit-text-size-adjust:none; } -/* Media overlays */ +:root[style*="readium-iPadOSPatch-on"] p, +:root[style*="readium-iPadOSPatch-on"] h1, +:root[style*="readium-iPadOSPatch-on"] h2, +:root[style*="readium-iPadOSPatch-on"] h3, +:root[style*="readium-iPadOSPatch-on"] h4, +:root[style*="readium-iPadOSPatch-on"] h5, +:root[style*="readium-iPadOSPatch-on"] h6, +:root[style*="readium-iPadOSPatch-on"] li, +:root[style*="readium-iPadOSPatch-on"] th, +:root[style*="readium-iPadOSPatch-on"] td, +:root[style*="readium-iPadOSPatch-on"] dt, +:root[style*="readium-iPadOSPatch-on"] dd, +:root[style*="readium-iPadOSPatch-on"] pre, +:root[style*="readium-iPadOSPatch-on"] address, +:root[style*="readium-iPadOSPatch-on"] details, +:root[style*="readium-iPadOSPatch-on"] summary, +:root[style*="readium-iPadOSPatch-on"] figcaption, +:root[style*="readium-iPadOSPatch-on"] div:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)), +:root[style*="readium-iPadOSPatch-on"] aside:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)){ + -webkit-text-zoom:reset; +} -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; +:root[style*="readium-iPadOSPatch-on"] abbr, +:root[style*="readium-iPadOSPatch-on"] b, +:root[style*="readium-iPadOSPatch-on"] bdi, +:root[style*="readium-iPadOSPatch-on"] bdo, +:root[style*="readium-iPadOSPatch-on"] cite, +:root[style*="readium-iPadOSPatch-on"] code, +:root[style*="readium-iPadOSPatch-on"] dfn, +:root[style*="readium-iPadOSPatch-on"] em, +:root[style*="readium-iPadOSPatch-on"] i, +:root[style*="readium-iPadOSPatch-on"] kbd, +:root[style*="readium-iPadOSPatch-on"] mark, +:root[style*="readium-iPadOSPatch-on"] q, +:root[style*="readium-iPadOSPatch-on"] rp, +:root[style*="readium-iPadOSPatch-on"] rt, +:root[style*="readium-iPadOSPatch-on"] ruby, +:root[style*="readium-iPadOSPatch-on"] s, +:root[style*="readium-iPadOSPatch-on"] samp, +:root[style*="readium-iPadOSPatch-on"] small, +:root[style*="readium-iPadOSPatch-on"] span, +:root[style*="readium-iPadOSPatch-on"] strong, +:root[style*="readium-iPadOSPatch-on"] sub, +:root[style*="readium-iPadOSPatch-on"] sup, +:root[style*="readium-iPadOSPatch-on"] time, +:root[style*="readium-iPadOSPatch-on"] u, +:root[style*="readium-iPadOSPatch-on"] var{ + -webkit-text-zoom:normal; } -/*# sourceMappingURL=ReadiumCSS-after.css.map */ \ No newline at end of file + +:root[style*="readium-iPadOSPatch-on"] p:not(:has(b, cite, em, i, q, s, small, span, strong)):first-line{ + -webkit-text-zoom:normal; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-before.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-before.css index 2c8d03df4c..b6708f486b 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-before.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-before.css @@ -1,614 +1,527 @@ -/* Readium CSS - Config module +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ - A file allowing implementers to customize flags for reading modes, - user settings, etc. +@namespace url("http://www.w3.org/1999/xhtml"); - Repo: https://github.com/readium/readium-css */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ +@-ms-viewport{ + width:device-width; +} -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ +@viewport{ + width:device-width; + zoom:1; +} -/* User view = paged | scrolled */ +:root{ -/* Font-family override */ + --RS__sans-serif-ja-v:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDGothic', 'Yu Gothic', 'ＭＳゴシック', 'MS Gothic', sans-serif; -/* Advanced settings */ + --RS__serif-ja-v:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDMincho', 'Yu Mincho', 'ＭＳ明朝', 'MS Mincho', serif; -/* Reading Modes */ + --RS__sans-serif-ja:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDPGothic', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; -/* Filters (images) */ + --RS__serif-ja:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDPMincho', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif; -/* Accessibility normalization */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; -/* Direction i.e. ltr and rtl */ + --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; -/* Readium CSS - Namespaces module + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; - Namespaces to import in all 3 dist stylesheets + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; - Repo: https://github.com/readium/readium-css */ + --RS__zh-HK-lineHeightCompensation:1.167; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__zh-HK-baseFontFamily:'方體', 'PingFang HK', '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__zh-TW-lineHeightCompensation:1.167; -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__zh-TW-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__zh-Hant-lineHeightCompensation:1.167; -/* Readium CSS - Base module + --RS__zh-Hant-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; - A minimal stylesheet for all ebooks + --RS__zh-lineHeightCompensation:1.167; - Repo: https://github.com/readium/readium-css */ + --RS__zh-baseFontFamily:'方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif; -/* Define viewport, HTML5-style */ + --RS__th-lineHeightCompensation:1.067; -@-ms-viewport { - width: device-width; -} + --RS__th-baseFontFamily:Thonburi, 'Leelawadee UI', 'Cordia New', Roboto, Noto, 'Noto Sans Thai', sans-serif; -@viewport { - width: device-width; - zoom: 1; -} + --RS__te-baseFontFamily:'Kohinoor Telugu', 'Telugu Sangam MN', 'Nirmala UI', Gautami, Roboto, Noto, 'Noto Sans Telugu', sans-serif; -:root { - /* Default font-stacks */ - --RS__oldStyleTf: "Iowan Old Style", "Sitka Text", Palatino, "Book Antiqua", serif; - --RS__modernTf: Athelas, Constantia, Georgia, serif; - --RS__sansTf: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --RS__humanistTf: Seravek, Calibri, Roboto, Arial, sans-serif; - --RS__monospaceTf: "Andale Mono", Consolas, monospace; + --RS__ta-lineHeightCompensation:1.067; - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); + --RS__ta-baseFontFamily:'Tamil Sangam MN', 'Nirmala UI', Latha, Roboto, Noto, 'Noto Sans Tamil', sans-serif; - /* 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; + --RS__si-lineHeightCompensation:1.167; - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); -} + --RS__si-baseFontFamily:'Sinhala Sangam MN', 'Nirmala UI', 'Iskoola Pota', Roboto, Noto, 'Noto Sans Sinhala', sans-serif; -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ + --RS__pa-lineHeightCompensation:1.1; -html { - font-family: var(--RS__baseFontFamily); - /* Fallback line-height */ - line-height: 1.6; /* Fits a little bit better for all languages than 1.5 */ - line-height: var(--RS__baseLineHeight); - text-rendering: optimizeLegibility; -} + --RS__pa-baseFontFamily:'Gurmukhi MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Gurmukhi', sans-serif; -/* 1.5 being too loose with larger font-sizes, we reset headings to normal (which value is 1.125–1.375 for our font-stacks) */ + --RS__or-lineHeightCompensation:1.167; -h1, h2, h3 { - line-height: normal; -} + --RS__or-baseFontFamily:'Oriya Sangam MN', 'Nirmala UI', Kalinga, Roboto, Noto, 'Noto Sans Oriya', sans-serif; -:lang(ja), -:lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; -} + --RS__ml-lineHeightCompensation:1.067; -/* Set default font for Math */ + --RS__ml-baseFontFamily:'Malayalam Sangam MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Malayalam', sans-serif; -math { - font-family: "Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; -} + --RS__lo-baseFontFamily:'Lao Sangam MN', 'Leelawadee UI', 'Lao UI', Roboto, Noto, 'Noto Sans Lao', sans-serif; -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ + --RS__ko-lineHeightCompensation:1.167; -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ko-baseFontFamily:'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto, 'Noto Sans CJK KR', sans-serif; -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__kn-lineHeightCompensation:1.1; -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__kn-baseFontFamily:'Kannada Sangam MN', 'Nirmala UI', Tunga, Roboto, Noto, 'Noto Sans Kannada', sans-serif; -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; -} + --RS__km-lineHeightCompensation:1.067; -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; -} + --RS__km-baseFontFamily:'Khmer Sangam MN', 'Leelawadee UI', 'Khmer UI', Roboto, Noto, 'Noto Sans Khmer', sans-serif; -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__ja-lineHeightCompensation:1.167; -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ja-baseFontFamily:YuGothic, 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif; -:lang(he) { - --RS__baseFontFamily: "New Peninim MT", "Arial Hebrew", Gisha, "Times New Roman", Roboto, Noto, "Noto Sans Hebrew" sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__iu-baseFontFamily:'Euphemia UCAS', Euphemia, Roboto, Noto, 'Noto Sans Canadian Aboriginal', sans-serif; -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; + --RS__hy-baseFontFamily:Mshtakan, Sylfaen, Roboto, Noto, 'Noto Serif Armenian', serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__hi-lineHeightCompensation:1.1; -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; -} + --RS__hi-baseFontFamily:'Kohinoor Devanagari', 'Devanagari Sangam MN', Kokila, 'Nirmala UI', Roboto, Noto, 'Noto Sans Devanagari', sans-serif; -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; -} + --RS__he-lineHeightCompensation:1.1; -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; + --RS__he-baseFontFamily:'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto, 'Noto Sans Hebrew', sans-serif; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + --RS__gu-lineHeightCompensation:1.167; - /* Extra variables for Japanese font-stacks as we may want to reuse them for user settings + default */ - --RS__serif-ja: "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja: "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ ゴシック", "MS Gothic", "Hiragino Sans", sans-serif; - --RS__serif-ja-v: "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja-v: "ＭＳ ゴシック", "MS Gothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Sans", sans-serif; -} + --RS__gu-baseFontFamily:'Gujarati Sangam MN', 'Nirmala UI', Shruti, Roboto, Noto, 'Noto Sans Gujarati', sans-serif; -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__fa-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__chr-lineHeightCompensation:1.167; -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; + --RS__chr-baseFontFamily:'Plantagenet Cherokee', Roboto, Noto, 'Noto Sans Cherokee'; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__bo-baseFontFamily:Kailasa, 'Microsoft Himalaya', Roboto, Noto, 'Noto Sans Tibetan', sans-serif; -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; -} + --RS__bn-lineHeightCompensation:1.067; -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__bn-baseFontFamily:'Kohinoor Bangla', 'Bangla Sangam MN', Vrinda, Roboto, Noto, 'Noto Sans Bengali', sans-serif; -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ar-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__am-lineHeightCompensation:1.167; -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__am-baseFontFamily:Kefa, Nyala, Roboto, Noto, 'Noto Sans Ethiopic', serif; -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__latin-lineHeightCompensation:1; -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; -} + --RS__latin-baseFontFamily:var(--RS__oldStyleTf); + --RS__baseFontFamily:var(--RS__latin-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__latin-lineHeightCompensation); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__selectionTextColor:inherit; -/* The following will also work for zh-Hans */ + --RS__selectionBackgroundColor:#b4d8fe; -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; + --RS__visitedColor:#551A8B; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__linkColor:#0000EE; -:lang(zh-Hant), -:lang(zh-TW) { - --RS__baseFontFamily: "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; + --RS__textColor:#121212; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; + + background-color:var(--RS__backgroundColor) !important; } -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); +} - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -/* Readium CSS - Day/Default mode +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; +} - A preset theme for day mode, which is the default +h1, h2, h3{ + line-height:normal; +} - Repo: https://github.com/readium/readium-css */ +:lang(ja), +:lang(zh), +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; +} -/* CONFIG */ +math{ + font-family:"Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; +} -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; +:lang(am){ + --RS__baseFontFamily:var(--RS__am-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__am-lineHeightCompensation); +} - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:lang(ar){ + --RS__baseFontFamily:var(--RS__ar-baseFontFamily); } -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; +:lang(bn){ + --RS__baseFontFamily:var(--RS__bn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__bn-lineHeightCompensation); } -/* Note: Though `::selection` was present in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase because its behavior was under-specified (especially with nested elements) and interoperability wasn’t achieved. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */ +:lang(bo){ + --RS__baseFontFamily:var(--RS__bo-baseFontFamily); +} -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +:lang(chr){ + --RS__baseFontFamily:var(--RS__chr-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__chr-lineHeightCompensation); } -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +:lang(fa){ + --RS__baseFontFamily:var(--RS__fa-baseFontFamily); } -/* @import "modules/ReadiumCSS-fonts.css"; */ +:lang(gu){ + --RS__baseFontFamily:var(--RS__gu-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__gu-lineHeightCompensation); +} -/* Readium CSS - HTML5 SR Patch stylesheet +:lang(he){ + --RS__baseFontFamily:var(--RS__he-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__he-lineHeightCompensation); +} - A set of style to adjust HTML5 Suggested Rendering to paginated content +:lang(hi){ + --RS__baseFontFamily:var(--RS__hi-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__hi-lineHeightCompensation); +} - Repo: https://github.com/readium/readium-css */ +:lang(hy){ + --RS__baseFontFamily:var(--RS__hy-baseFontFamily); +} -/* Fragmentation */ +:lang(iu){ + --RS__baseFontFamily:var(--RS__iu-baseFontFamily); +} -body { - widows: 2; - orphans: 2; +:lang(ja){ + --RS__baseFontFamily:var(--RS__ja-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ja-lineHeightCompensation); } -figcaption, th, td { - widows: 1; - orphans: 1; +:lang(km){ + --RS__baseFontFamily:var(--RS__km-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__km-lineHeightCompensation); } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +:lang(kn){ + --RS__baseFontFamily:var(--RS__kn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__kn-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +:lang(ko){ + --RS__baseFontFamily:var(--RS__ko-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ko-lineHeightCompensation); } -/* Hyphenation */ +:lang(lo){ + --RS__baseFontFamily:var(--RS__lo-baseFontFamily); +} -body { - -webkit-hyphenate-character: "\002D"; - -moz-hyphenate-character: "\002D"; - -ms-hyphenate-character: "\002D"; - hyphenate-character: "\002D"; - -webkit-hyphenate-limit-lines: 3; - -ms-hyphenate-limit-lines: 3; - hyphenate-limit-lines: 3; +:lang(ml){ + --RS__baseFontFamily:var(--RS__ml-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ml-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figcaption, -pre, -caption, -address, -center, -code, -var { - -ms-hyphens: none; - -moz-hyphens: none; - -webkit-hyphens: none; - -epub-hyphens: none; - hyphens: none; +:lang(or){ + --RS__baseFontFamily:var(--RS__or-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__or-lineHeightCompensation); } -/* OTF */ +:lang(pa){ + --RS__baseFontFamily:var(--RS__pa-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__pa-lineHeightCompensation); +} -body { - font-variant-numeric: oldstyle-nums proportional-nums; +:lang(si){ + --RS__baseFontFamily:var(--RS__si-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__si-lineHeightCompensation); } -:lang(ja) body, -:lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; +:lang(ta){ + --RS__baseFontFamily:var(--RS__ta-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ta-lineHeightCompensation); } -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; +:lang(te){ + --RS__baseFontFamily:var(--RS__te-baseFontFamily); } -table { - font-variant-numeric: lining-nums tabular-nums; +:lang(th){ + --RS__baseFontFamily:var(--RS__th-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__th-lineHeightCompensation); } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +:lang(zh){ + --RS__baseFontFamily:var(--RS__zh-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-lineHeightCompensation); } -rt { - font-variant-east-asian: ruby; +:lang(zh-Hant){ + --RS__baseFontFamily:var(--RS__zh-Hant-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-Hant-lineHeightCompensation); } -:lang(ar) { - font-variant-ligatures: common-ligatures; +:lang(zh-TW){ + --RS__baseFontFamily:var(--RS__zh-TW-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-TW-lineHeightCompensation); } -:lang(ko) { - font-kerning: normal; +:lang(zh-HK){ + --RS__baseFontFamily:var(--RS__zh-HK-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-HK-lineHeightCompensation); } -/* Night mode */ +body{ + widows:2; + orphans:2; +} -hr { - color: inherit; - border-color: currentColor; +figcaption, th, td{ + widows:1; + orphans:1; } -table, th, td { - border-color: currentColor; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -/* Horizontal Spacing */ +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; +} -figure, blockquote { - margin: 1em 5%; +body{ + -webkit-hyphenate-character:"\002D"; + -moz-hyphenate-character:"\002D"; + -ms-hyphenate-character:"\002D"; + hyphenate-character:"\002D"; + -webkit-hyphenate-limit-lines:3; + -ms-hyphenate-limit-lines:3; + hyphenate-limit-lines:3; } -/* +h1, h2, h3, h4, h5, h6, dt, +figcaption, pre, caption, address, +center, code, var{ + -ms-hyphens:none; + -moz-hyphens:none; + -webkit-hyphens:none; + -epub-hyphens:none; + hyphens:none; +} -:lang(ja) figure, :lang(ja) blockquote, -:lang(zh-Hant) figure, :lang(zh-Hant) blockquote, -:lang(zh-TW) figure, :lang(zh-TW) blockquote, -:lang(mn) figure, :lang(mn) blockquote { - margin: 5% 1em; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } -*/ +:lang(ja) body, +:lang(zh) body, +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; +} -ul, ol { - padding-left: 5%; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -/* +table{ + font-variant-numeric:lining-nums tabular-nums; +} -:lang(ja) ul, :lang(ja) ol, -:lang(zh-Hant) ul, :lang(zh-Hant) ol, -:lang(zh-TW) ul, :lang(zh-TW) ol, -:lang(mn) ul, :lang(mn) ol { - padding-top: 5%; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -*/ +rt{ + font-variant-east-asian:ruby; +} -dd { - margin-left: 5%; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -/* +:lang(ko){ + font-kerning:normal; +} -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; +hr{ + color:inherit; + border-color:currentcolor; } -*/ +table, th, td{ + border-color:currentcolor; +} -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; +figure, blockquote{ + margin:1em 5%; } -/* Normalization */ +ul, ol{ + padding-left:5%; +} -abbr[title], acronym[title] { - text-decoration: dotted underline; +dd{ + margin-left:5%; } -nobr wbr { - white-space: normal; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -/* Make ruby text and parentheses non-selectable (TBC) */ +abbr[title], acronym[title]{ + text-decoration:dotted underline; +} -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +nobr wbr{ + white-space:normal; } -/* Internationalization */ +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} -*:lang(ja), -*:lang(zh), -*:lang(ko), -:lang(ja) cite, -:lang(ja) dfn, -:lang(ja) em, -:lang(ja) i, -:lang(zh) cite, -:lang(zh) dfn, -:lang(zh) em, -:lang(zh) i, -:lang(ko) cite, -:lang(ko) dfn, -:lang(ko) em, -:lang(ko) i { - font-style: normal; +*:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)), +*:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)), +*:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)), +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) cite, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) dfn, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) em, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) i, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) cite, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) dfn, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) em, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) i, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) cite, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) dfn, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) em, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) i{ + font-style:normal; } :lang(ja) a, :lang(zh) a, -:lang(ko) a { - text-decoration: none; +:lang(ko) a{ + text-decoration:none; } -/* Readium CSS - Safeguards module for vertical writing - - A set of styles to prevent common issues in pagination - - Repo: https://github.com/readium/readium-css */ - -/* Config */ - -/* We’ll be using an "RS__" prefix so that we can prevent collisions with authors’ CSS */ - -:root { - /* max-width for media, you can override that via JS if not compiled to static */ - --RS__maxMediaWidth: 100%; - - /* max-height for media, you can override that via JS if not compiled to static */ - --RS__maxMediaHeight: 100vw; - - /* value for medias’ box-sizing */ - --RS__boxSizingMedia: border-box; - - /* value for table’s box-sizing */ - --RS__boxSizingTable: border-box; +:root{ + --RS__maxMediaWidth:100%; + --RS__maxMediaHeight:100vw; + --RS__boxSizingMedia:border-box; + --RS__boxSizingTable:border-box; } -/* Sanitize line-heights in webkit e.g. raised cap without a declared line-height - See effect by checking this demo in Safari: https://codepen.io/JayPanoz/pen/gRmzrE - Note: glyphs has to be reset to inline for CJK */ - -html { - -webkit-line-box-contain: block glyphs replaced; +a, a span, span a, h1, h2, h3, h4, h5, h6{ + word-wrap:break-word; } -:lang(ja) { - -webkit-line-box-contain: block inline replaced; +div{ + max-width:var(--RS__maxMediaHeight); } -/* Wrap long strings if larger than line-length */ - -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; -} +img, svg|svg, video{ + object-fit:contain; -div { - max-width: var(--RS__maxMediaHeight); + width:auto; + height:auto; + max-width:var(--RS__maxMediaHeight); + max-height:var(--RS__maxMediaWidth) !important; + box-sizing:var(--RS__boxSizingMedia); + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -/* Size medias */ - -/* You can override CSS variables by re-defining it for all elements or a specific one */ - -img, svg, audio, video { - - /* Object-fit allows us to keep the correct aspect-ratio */ - object-fit: contain; +@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){ - width: auto; - height: auto; - - /* We’re setting a max-height, especially for covers */ - max-width: var(--RS__maxMediaHeight); - - /* Some files don’t have max-width */ - max-height: var(--RS__maxMediaWidth) !important; - /* We probably don’t need to use modern box-sizing as auto behaves like it */ - box-sizing: var(--RS__boxSizingMedia); - - /* For page-break, we must use those 3 - We can’t use a variable there, webkit seems to no support them for those properties */ - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div{ + zoom:calc(100% / var(--USER__fontSize)); + } } -/* Try preventing border being cut-off, webkit + blink have content-box by default */ - -table { - max-height: var(--RS__maxMediaWidth); - box-sizing: var(--RS__boxSizingTable) +audio{ + max-width:100%; + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -/*# sourceMappingURL=ReadiumCSS-before.css.map */ \ No newline at end of file + +table{ + max-height:var(--RS__maxMediaWidth); + box-sizing:var(--RS__boxSizingTable); +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-default.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-default.css index 7122cfa6cc..d2fe289cc5 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-default.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-vertical/ReadiumCSS-default.css @@ -1,210 +1,180 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Default module for CJK vertical writing - - A stylesheet for unstyled ebooks based on HTML5 Suggested Rendering - Note: works in combination with Base module - - Repo: https://github.com/readium/readium-css */ +:root{ -/* CONFIG */ + --RS__compFontFamily:var(--RS__baseFontFamily); + --RS__codeFontFamily:var(--RS__monospaceTf); -:root { - /* Extra variables for Japanese font-stacks: - • --RS__serif-ja-v; - • --RS__sans-serif-ja-v. + --RS__typeScale:1.125; + --RS__baseFontSize:87.5%; - They can be used instead of --RS__baseFontFamily and --RS__compFontFamily */ + --RS__flowSpacing:1.5rem; + --RS__paraSpacing:0; + --RS__paraIndent:1em; - --RS__compFontFamily: var(--RS__baseFontFamily); - --RS__codeFontFamily: var(--RS__monospaceTf); + --RS__linkColor:#0000EE; + --RS__visitedColor:#551A8B; - --RS__typeScale: 1.125; /* 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618 */ - --RS__baseFontSize: 87.5%; - - --RS__flowSpacing: 1.5rem; - --RS__paraSpacing: 0; - --RS__paraIndent: 1em; - - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; - - --RS__primaryColor: ; - --RS__secondaryColor: ; + --RS__primaryColor:; + --RS__secondaryColor:; } -:root:lang(zh) { - --RS__paraIndent: 2em; +:root:lang(zh){ + --RS__paraIndent:2em; } -:lang("mn-Mong") { - --RS__baseFontSize: 100%; +:lang("mn-Mong"){ + --RS__baseFontSize:100%; } -/* STYLES */ - -/* Typo */ - -body { - font-size: var(--RS__baseFontSize); - text-align: justify; - text-justify: inter-character; +body{ + font-size:var(--RS__baseFontSize); + text-align:justify; + text-justify:inter-character; } -h1, h2, h3, h4, h5, h6 { - font-family: var(--RS__baseFontFamily); - text-align: left; - text-align: start; +h1, h2, h3, h4, h5, h6{ + font-family:var(--RS__baseFontFamily); + text-align:left; + text-align:start; } -/* Flow content */ - -blockquote, -figure, -p, -pre, -aside, -footer, -form, -hr { - margin-right: var(--RS__flowSpacing); - margin-left: var(--RS__flowSpacing); +blockquote, figure, p, pre, +aside, footer, form, hr{ + margin-right:var(--RS__flowSpacing); + margin-left:var(--RS__flowSpacing); } -p { - margin-right: var(--RS__paraSpacing); - margin-left: var(--RS__paraSpacing); - text-indent: var(--RS__paraIndent); +p{ + margin-right:var(--RS__paraSpacing); + margin-left:var(--RS__paraSpacing); + text-indent:var(--RS__paraIndent); } -pre { - font-family: var(--RS__codeFontFamily); +pre{ + font-family:var(--RS__codeFontFamily); } -/* Phrasing content */ - -code, kbd, samp, tt { - font-family: var(--RS__codeFontFamily); +code, kbd, samp, tt{ + font-family:var(--RS__codeFontFamily); } -sub, sup { - position: relative; - font-size: 67.5%; - line-height: 1; +sub, sup{ + position:relative; + font-size:67.5%; + line-height:1; } -sub { - left: -0.2ex; +sub{ + left:-0.2ex; } -sup { - right: 0; +sup{ + right:0; } -em { - -webkit-text-emphasis: sesame; - -epub-text-emphasis: sesame; - text-emphasis: sesame; +em{ + -webkit-text-emphasis:sesame; + -epub-text-emphasis:sesame; + text-emphasis:sesame; } -:link { - color: var(--RS__linkColor); +:link{ + color:var(--RS__linkColor); } -:visited { - color: var(--RS__visitedColor); +:visited{ + color:var(--RS__visitedColor); } -/* Headings */ - -h1 { - margin-right: calc(var(--RS__flowSpacing) * 2); - margin-left: calc(var(--RS__flowSpacing) * 2); - /* The following is base font size * typescale power of 3 */ - font-size: calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); - text-indent: 2rem; +h1{ + margin-right:calc(var(--RS__flowSpacing) * 2); + margin-left:calc(var(--RS__flowSpacing) * 2); + font-size:calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); + text-indent:2rem; } -h2 { - margin-right: calc(var(--RS__flowSpacing) * 2); - margin-left: var(--RS__flowSpacing); - /* The following is base font size * typescale power of 2 */ - font-size: calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); - text-indent: 3rem; +h2{ + margin-right:calc(var(--RS__flowSpacing) * 2); + margin-left:var(--RS__flowSpacing); + font-size:calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); + text-indent:3rem; } -h3 { - margin-right: var(--RS__flowSpacing); - margin-left: var(--RS__flowSpacing); - font-size: calc(1em * var(--RS__typeScale)); - text-indent: 4rem; +h3{ + margin-right:var(--RS__flowSpacing); + margin-left:var(--RS__flowSpacing); + font-size:calc(1em * var(--RS__typeScale)); + text-indent:4rem; } -h4 { - margin-right: var(--RS__flowSpacing); - margin-left: var(--RS__flowSpacing); - font-family: var(--RS__compFontFamily); - font-size: 1em; - text-indent: 4rem; +h4{ + margin-right:var(--RS__flowSpacing); + margin-left:var(--RS__flowSpacing); + font-family:var(--RS__compFontFamily); + font-size:1em; + text-indent:4rem; } -h5 { - margin-right: var(--RS__flowSpacing); - margin-left: var(--RS__flowSpacing); - font-family: var(--RS__compFontFamily); - font-size: smaller; - text-indent: 4rem; +h5{ + margin-right:var(--RS__flowSpacing); + margin-left:var(--RS__flowSpacing); + font-family:var(--RS__compFontFamily); + font-size:smaller; + text-indent:4rem; } -h6 { - margin-right: var(--RS__flowSpacing); - margin-left: 0; - font-family: var(--RS__compFontFamily); - font-size: smaller; - font-weight: normal; - text-indent: 4rem; +h6{ + margin-right:var(--RS__flowSpacing); + margin-left:0; + font-family:var(--RS__compFontFamily); + font-size:smaller; + font-weight:normal; + text-indent:4rem; } -/* Lists */ - -dl, ol, ul { - margin-right: var(--RS__flowSpacing); - margin-left: var(--RS__flowSpacing); +dl, ol, ul{ + margin-right:var(--RS__flowSpacing); + margin-left:var(--RS__flowSpacing); } -/* Table */ - -table { - margin: 0 var(--RS__flowSpacing); - border: 1px solid currentColor; - border-collapse: collapse; - empty-cells: show; +table{ + margin:0 var(--RS__flowSpacing); + border:1px solid currentcolor; + border-collapse:collapse; + empty-cells:show; } -thead, tbody, tfoot, table > tr { - vertical-align: top; +thead, tbody, tfoot, table > tr{ + vertical-align:top; } -th { - text-align: left; +th{ + text-align:left; } -th, td { - padding: 4px; - border: 1px solid currentColor; -} -/*# sourceMappingURL=ReadiumCSS-default.css.map */ \ No newline at end of file +th, td{ + padding:4px; + border:1px solid currentcolor; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css index 92ea61f138..3d6a5eb03d 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-after.css @@ -1,776 +1,527 @@ -/* Readium CSS - Config module - - A file allowing implementers to customize flags for reading modes, - user settings, etc. - - Repo: https://github.com/readium/readium-css */ - -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ - -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ - -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ - -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ - -/* User view = paged | scrolled */ - -/* Font-family override */ - -/* Advanced settings */ - -/* Reading Modes */ - -/* Filters (images) */ - -/* Accessibility normalization */ - -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ - -/* Direction i.e. ltr and rtl */ - -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Pagination module +:root{ - A set of styles to paginate ePublications + --RS__viewportWidth:100%; - Repo: https://github.com/readium/readium-css */ + --RS__pageGutter:0; -/* Config */ + --RS__defaultLineLength:100%; -/* Columns are responsive by default, even if column-width is set in pixels, - which means two-page spread will switch to single page depending on current font-size. - If you want more control, I’m afraid you’ll have to update colWidth/colGap dynamically, - which is how a significant amount of RS do at the moment. */ + --RS__colGap:0; -/* Default for smartphone portrait (small screens) */ + --RS__colCount:1; -:root { - /* Your columns’ width floor */ - --RS__colWidth: 45em; /* The width at which we’ll switch to 2 columns by default. PS: you can’t set it in rem */ - - /* Ideal number of columns (depending on columns’ width floor) */ - --RS__colCount: 1; - - /* Gap between columns (in pixels so that it won’t resize with font-size) */ - --RS__colGap: 0; - - /* Optimal line-length (rem will take :root font-size into account, whatever the body’s font-size) */ - --RS__maxLineLength: 40rem; - - /* Default page horizontal margins (in pixels so that it won’t resize with font-size) */ - --RS__pageGutter: 20px; /* See if colGap and pageGutter can be the same var */ + --RS__colWidth:100vw; } -/* Reset page margins for Forward compatibility */ - -@page { - margin: 0 !important; +@page{ + margin:0 !important; } -/* :root selector has same specificity as a class i.e. 0010 - We might have to change that to html / context - -> https://css-tricks.com/almanac/selectors/r/root/ */ - -:root { - - /* In case you use left position to scroll, can be removed if using transform: translateX() */ - position: relative; - - -webkit-column-width: var(--RS__colWidth); - -moz-column-width: var(--RS__colWidth); - column-width: var(--RS__colWidth); +:root{ + position:relative; - /* Init pagination */ - /* TODO: document columns’ logic cos it might feel weird at first */ - -webkit-column-count: var(--RS__colCount); - -moz-column-count: var(--RS__colCount); - column-count: var(--RS__colCount); + -webkit-column-width:var(--RS__colWidth); + -moz-column-width:var(--RS__colWidth); + column-width:var(--RS__colWidth); + -webkit-column-count:var(--RS__colCount); + -moz-column-count:var(--RS__colCount); + column-count:var(--RS__colCount); - -webkit-column-gap: var(--RS__colGap); - -moz-column-gap: var(--RS__colGap); - column-gap: var(--RS__colGap); - - /* Default is balance and we want columns to be filled entirely (100vh) */ - -moz-column-fill: auto; - column-fill: auto; - width: 100%; - height: 100vh; - max-width: 100%; - max-height: 100vh; - min-width: 100%; - min-height: 100vh; - padding: 0 !important; - margin: 0 !important; - - /* Column size will depend on this if we want to make it responsive */ - font-size: 100% !important; - - -webkit-text-size-adjust: 100%; - - /* Switch to newer box model (not inherited by authors’ styles) */ - box-sizing: border-box; - - /* Fix bug for older Chrome */ - -webkit-perspective: 1; - /* Prevents options pop-up when long tap in webkit */ - -webkit-touch-callout: none; + -webkit-column-gap:var(--RS__colGap); + -moz-column-gap:var(--RS__colGap); + column-gap:var(--RS__colGap); + -moz-column-fill:auto; + column-fill:auto; + width:var(--RS__viewportWidth); + height:100vh; + max-width:var(--RS__viewportWidth); + max-height:100vh; + min-width:var(--RS__viewportWidth); + min-height:100vh; + padding:0 !important; + margin:0 !important; + font-size:1rem !important; + box-sizing:border-box; + -webkit-touch-callout:none; } -body { - /* overflow: hidden; bugfix: contents won’t paginate in Firefox and one sample in Safari */ - width: 100%; - - /* Limit line-length but we have to reset when 2 columns and control the viewport. - By using max-width + margin auto, margins will shrink when font-size increases, - which is what would be expected in terms of typography. */ - max-width: var(--RS__maxLineLength) !important; - padding: 0 var(--RS__pageGutter) !important; - margin: 0 auto !important; - - /* We need a minimum padding on body so that descandants/ascendants in italic/script are not cut-off. - Drawback: we have to use border-box so that it doesn’t screw the box model, - which means it impacts colWidth and max-width */ - box-sizing: border-box; +body{ + width:100%; + max-width:var(--RS__defaultLineLength) !important; + margin:0 auto !important; + box-sizing:border-box; } -/* We’ll now redefine margins and columns depending on the minimum width available - The goal is having the simplest model possible and avoid targeting devices */ - -/* Smartphone landscape */ - -@media screen and (min-width: 35em) { - :root { - --RS__pageGutter: 30px; - } +:root:not([style*="readium-scroll-on"]) body{ + padding:0 var(--RS__pageGutter) !important; } -/* Tablet portrait */ - -@media screen and (min-width: 45em) { - :root { - --RS__pageGutter: 40px; - } +:root:not([style*="readium-noOverflow-on"]) body{ + overflow:hidden; } -/* Desktop + tablet large */ +@supports (overflow: clip){ -/* We get the previous settings, we just change the margins */ + :root:not([style*="readium-noOverflow-on"]){ + overflow:clip; + } -@media screen and (min-width: 75em) { - :root { - --RS__pageGutter: 50px; - } + :root:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; + overflow-clip-margin:content-box; + } } -/* At this point (80em or so), constraining line length must be done at the web view/iframe level, or by limiting the size of :root itself */ - -/* Responsive columns */ - -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { - :root { - /* The size at which we want 2 columns to switch to 1 (depending on font-size) */ - --RS__colWidth: 20em; /* 20 * 16 = 320px but 20 * 28 = 560px so it will switch to 1 col @ 175% font-size (user-setting) on an iPad */ - /* We constrain to 2 columns so that we can never get 3 or 4, etc. */ - --RS__colCount: 2; - --RS__maxLineLength: 39.99rem; /* If we don’t use this, colNumber user setting won’t work in Safari… */ - } +:root[style*="readium-scroll-on"]{ + -webkit-columns:auto auto !important; + -moz-columns:auto auto !important; + columns:auto auto !important; + width:auto !important; + height:auto !important; + max-width:none !important; + max-height:none !important; + min-width:0 !important; + min-height:0 !important; } -/* Readium CSS - Scroll module - - A set of styles to scroll ePublications - This module overrides pagination - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-scroll-on"] { - - /* Reset columns, auto + auto = columns can’t be created */ - -webkit-columns: auto auto !important; - -moz-columns: auto auto !important; - columns: auto auto !important; - width: auto !important; - height: auto !important; - max-width: none !important; - max-height: none !important; - /* Reset html size so that the user can scroll */ - min-width: 0 !important; - min-height: 0 !important; +:root[style*="readium-scroll-on"] body{ + max-width:var(--RS__defaultLineLength) !important; + box-sizing:border-box !important; } -/* Make sure line-length is limited in all configs */ - -:root[style*="readium-scroll-on"] body { - --RS__maxLineLength: 40rem !important; +:root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{ + overflow:auto; } -/* Readium CSS - Night mode - - A preset theme for night mode - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ +@supports (overflow: clip){ -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; - - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]){ + overflow:auto; + } - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; + :root[style*="readium-scroll-on"]:not([style*="readium-noOverflow-on"]) body{ + overflow:clip; + } } -/* 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-night-on"] *:not(a) { - color: inherit !important; - background-color: transparent !important; - border-color: currentColor !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingTop"] body{ + padding-top:var(--RS__scrollPaddingTop) !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingBottom"] body{ + padding-bottom:var(--RS__scrollPaddingBottom) !important; } -:root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; } -:root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; } -/* For epub:type, in case the contents are served as text/html, namespaces won’t work hence why we’re using both syntax */ - -:root[style*="readium-night-on"] img[class*="gaiji"], -:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, -:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !important; } -/* Darken all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); +:root[style*="--USER__backgroundColor"] *{ + background-color:transparent !important; } -/* Invert all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); +:root[style*="--USER__textColor"]{ + color:var(--USER__textColor) !important; } -/* Darken and invert on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%) invert(100%); - filter: brightness(80%) invert(100%); +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -/* Readium CSS - Sepia mode - - A preset theme for sepia mode - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -:root[style*="readium-sepia-on"] { - --RS__backgroundColor: #faf4e8; - --RS__textColor: #121212; - - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; - - --RS__maxLineLength: 40.01rem; /* Forcing a reflow in Blink/Webkit so that blend mode can work */ +:root[style*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !important; } -/* 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"] *:not(a) { - color: inherit !important; - background-color: transparent !important; +:root[style*="--USER__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !important; } -:root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="--USER__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !important; } -:root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; } -:root[style*="readium-sepia-on"] svg, -:root[style*="readium-sepia-on"] img { - /* Make sure the proper bg-color is used for the blend mode */ - background-color: transparent !important; - mix-blend-mode: multiply; +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; } -/* Readium CSS - OS Accessibility Modes +:root[style*="--USER__colCount"]{ + -webkit-column-count:var(--USER__colCount); + -moz-column-count:var(--USER__colCount); + column-count:var(--USER__colCount); - A stylesheet to deal with OS accessibility settings - - Repo: https://github.com/readium/readium-css */ - -/* Windows high contrast colors are mapped to CSS system color keywords - See http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast */ + --RS__colWidth:auto; +} -@media screen and (-ms-high-contrast: active) { - :root { - color: windowText !important; - background-color: window !important; - } +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"]{ + -webkit-column-count:1; + -moz-column-count:1; + column-count:1; +} - /* The following selectors are super funky but it makes sure everything is inherited, this is indeed critical for this mode */ - :root :not(#\#):not(#\#):not(#\#), - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) - :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) { - color: inherit !important; - background-color: inherit !important; - } +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"], +:root[style*="--USER__colCount: 1"], +:root[style*="--USER__colCount:1"]{ + --RS__colWidth:100vw; +} - .readiumCSS-mo-active-default { - color: highlightText !important; - background-color: highlight !important; +:root[style*="--USER__lineLength"] body{ + max-width:var(--USER__lineLength) !important; } - /* For links, hyperlink keyword is automatically set */ - - /* Should we also set user highlights? */ +:root[style*="--USER__textAlign"]{ + text-align:var(--USER__textAlign); } -@media screen and (-ms-high-contrast: white-on-black) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); - } +:root[style*="--USER__textAlign"] body, +:root[style*="--USER__textAlign"] p:not( + blockquote p, + figcaption p, + header p, + hgroup p, + :root[style*="readium-experimentalHeaderFiltering-on"] p[class*="title"], + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > h1 + p, + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > p:has(+ h1) +), +:root[style*="--USER__textAlign"] li, +:root[style*="--USER__textAlign"] dd{ + text-align:var(--USER__textAlign) !important; + -moz-text-align-last:auto !important; + -epub-text-align-last:auto !important; + text-align-last:auto !important; } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ - -@media screen and (inverted-colors) { - :root[style*="readium-night-on"] img[class*="gaiji"], - :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child, - :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: none !important; - filter: none !important; - } - :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); - } +:root[style*="--USER__fontFamily"]{ + font-family:var(--USER__fontFamily) !important; } -@media screen and (monochrome) { - /* Grayscale (Implemented in Safari, what about eInk?) */ - /* Must deal with anything color (contrast) so must be managed at the night/sepia/theme level :( */ +:root[style*="--USER__fontFamily"] *{ + font-family:revert !important; } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +:root:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !important; } -/* Readium CSS - Columns number pref - - A submodule managing columns number for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Number of columns = 1 | 2 */ - -/* We still need to see if we allow users to force number of columns for all configs, currently it behaves as an "auto" setting */ - -/* apply col setting except for mobile portrait */ +:root:not([style*="readium-deprecatedFontSize-on"])[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; +} -@media screen and (min-width: 60em), screen and (min-device-width: 36em) and (max-device-width: 47em) and (orientation: landscape) { - :root[style*="--USER__colCount: 1"], - :root[style*="--USER__colCount:1"], - :root[style*="--USER__colCount: 2"], - :root[style*="--USER__colCount:2"] { - -webkit-column-count: var(--USER__colCount); - -moz-column-count: var(--USER__colCount); - column-count: var(--USER__colCount); - } +@supports selector(figure:has(> img)){ - /* If one column, make sure we limit line-length */ - :root[style*="--USER__colCount: 1"], - :root[style*="--USER__colCount:1"] { - --RS__maxLineLength: 40rem !important; /* This is the only way for the user setting to work in webkit… */ - --RS__colWidth: 100vw; + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> img), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> video), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> svg), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> canvas), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> iframe), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figure:has(> audio), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> img:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> video:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> svg:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> canvas:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> iframe:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] div:has(> audio:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] table{ + zoom:calc(100% / var(--USER__fontSize)) !important; } - /* If smartphone landscape, and 2 columns, col width the same as iPad landscape + desktop */ - :root[style*="--USER__colCount: 2"], - :root[style*="--USER__colCount:2"] { - --RS__colWidth: auto; /* User explicitely tells he/she wants 2 columns, we reset floor value */ + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] figcaption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] caption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] td, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] th{ + zoom:var(--USER__fontSize) !important; } } -/* Readium CSS - Page margins pref - - A submodule managing page margins for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Page Margins: the user margin is a factor of the page gutter e.g. 0.5, 0.75, 1, 1.25, 1.5, etc. */ +@supports not (zoom: 1){ -:root[style*="--USER__pageMargins"] body { - padding: 0 calc(var(--RS__pageGutter) * var(--USER__pageMargins)) !important; + :root[style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; + } } -/* Readium CSS - Custom colors pref - - A submodule managing custom colors for user settings - Part of “Chrome Advanced” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__backgroundColor"] { - background-color: var(--USER__backgroundColor) !important; +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; } -:root[style*="--USER__backgroundColor"] * { - background-color: transparent !important; +:root[style*="--USER__lineHeight"]{ + line-height:var(--USER__lineHeight) !important; } -:root[style*="--USER__textColor"] { - color: var(--USER__textColor) !important; +:root[style*="--USER__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:var(--USER__lineHeight) !important; } -:root[style*="--USER__textColor"] *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) { - color: inherit !important; +:root[style*="--USER__paraSpacing"] p{ + margin-top:var(--USER__paraSpacing) !important; + margin-bottom:var(--USER__paraSpacing) !important; } -/* Readium CSS - Text align pref - - A submodule managing text-align for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] { - text-align: var(--USER__textAlign); +:root[style*="--USER__paraIndent"] p:not( + blockquote p, + figcaption p, + header p, + hgroup p, + :root[style*="readium-experimentalHeaderFiltering-on"] p[class*="title"], + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > h1 + p, + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > p:has(+ h1) +){ + text-indent:var(--USER__paraIndent) !important; } -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] body, -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] *:not(blockquote):not(figcaption) p, -:root[style*="readium-advanced-on"][style*="--USER__textAlign"] li { - text-align: inherit !important; - -moz-text-align-last: auto !important; - -epub-text-align-last: auto !important; - text-align-last: auto !important; +:root[style*="--USER__paraIndent"] p *{ + text-indent:0 !important; } -/* In case something goes wrong at the programmatic level + rtl for body + rtl in ltr */ - -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign: left"], -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign:left"], -:root[style*="readium-advanced-on"][style*="--USER__textAlign: left"] *[dir="rtl"], -:root[style*="readium-advanced-on"][style*="--USER__textAlign:left"] *[dir="rtl"] { - text-align: right; +:root[style*="--USER__wordSpacing"] h1, +:root[style*="--USER__wordSpacing"] h2, +:root[style*="--USER__wordSpacing"] h3, +:root[style*="--USER__wordSpacing"] h4, +:root[style*="--USER__wordSpacing"] h5, +:root[style*="--USER__wordSpacing"] h6, +:root[style*="--USER__wordSpacing"] p, +:root[style*="--USER__wordSpacing"] li, +:root[style*="--USER__wordSpacing"] div, +:root[style*="--USER__wordSpacing"] dt, +:root[style*="--USER__wordSpacing"] dd{ + word-spacing:var(--USER__wordSpacing) !important; } -/* Edge, if logical value is used, think of it as a polyfill. For LTR, it will fall back to the default, which is left */ - -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign: start"], -:root[style*="readium-advanced-on"][dir="rtl"][style*="--USER__textAlign:start"] { - text-align: right; +:root[style*="--USER__ligatures"]{ + font-variant-ligatures:var(--USER__ligatures) !important; } -/* Readium CSS - Font Family pref - - A submodule managing font-family for user settings - Part of “User Overrides” class – “font override” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-font-on"][style*="--USER__fontFamily"] { - font-family: var(--USER__fontFamily) !important; +:root[style*="--USER__ligatures"] *{ + font-variant-ligatures:inherit !important; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] body, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] p, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] li, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] div, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dt, -:root[style*="readium-font-on"][style*="--USER__fontFamily"] dd { - font-family: inherit !important; +:root[style*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] i:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] em:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] cite:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] b:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] strong:not([xml\:lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([lang]), -:root[style*="readium-font-on"][style*="--USER__fontFamily"] span:not([xml\:lang]) { - font-family: inherit !important; +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; } -/* Readium CSS - Font size pref - - A submodule managing font-size for user settings - Part of “User Overrides” class – no flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="--USER__fontSize"] { - font-size: var(--USER__fontSize) !important; +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; } -/* Readium CSS - Line height pref - - A submodule managing line-height for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] { - line-height: var(--USER__lineHeight) !important; +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; } -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] body, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] p, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] li, -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] div { - line-height: inherit; +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; } -/* Readium CSS - Para spacing pref - - A submodule managing paragraphs’ top and bottom margins for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__paraSpacing"] p { - margin-top: var(--USER__paraSpacing) !important; - margin-bottom: var(--USER__paraSpacing) !important; +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; } -/* Readium CSS - Para indent pref - - A submodule managing paragraphs’ text-indent for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p { - text-indent: var(--USER__paraIndent) !important; +:root[style*="readium-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; } -/* If there are inline-block elements in paragraphs, text-indent will inherit so we must reset it */ - -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p * { - text-indent: 0 !important; +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter:invert(var(--USER__invertImages)) !important; } -/* Readium CSS - Ligatures pref - - A submodule managing ligatures for user settings in the Arabic Script (can help with a11y) - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-advanced-on"][style*="--USER__arabicLigatures"] { - font-variant-ligatures: var(--USER__ligatures) !important; +:root[style*="readium-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -:root[style*="readium-advanced-on"][style*="--USER__arabicLigatures"] * { - font-variant-ligatures: inherit !important; +:root[style*="--USER__darkenImages"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; + filter:brightness(var(--USER__darkenImages)) invert(var(--USER__invertImages)) !important; } -/* Readium CSS - Font size normalize - - A stylesheet to normalize font-size - - Repo: https://github.com/readium/readium-css */ - -/* STYLES */ - -/* :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 */ - -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="readium-darken-on"][style*="--USER__invertImages"] img{ + -webkit-filter:brightness(80%) invert(var(--USER__invertImages)) !important; + filter:brightness(80%) invert(var(--USER__invertImages)) !important; } -:root[style*="readium-advanced-on"] p, -:root[style*="readium-advanced-on"] li, -:root[style*="readium-advanced-on"] div, -:root[style*="readium-advanced-on"] pre, -:root[style*="readium-advanced-on"] dd { - font-size: 1rem !important; +:root[style*="--USER__darkenImages"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) invert(100%) !important; + filter:brightness(var(--USER__darkenImages)) invert(100%) !important; } -:root[style*="readium-advanced-on"] 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[style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%) invert(100%) !important; + filter:brightness(80%) invert(100%) !important; } -:root[style*="readium-advanced-on"] 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[style*="--USER__invertGaiji"] img[class*="gaiji"]{ + -webkit-filter:invert(var(--USER__invertGaiji)) !important; + filter:invert(var(--USER__invertGaiji)) !important; } -:root[style*="readium-advanced-on"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * var(--USER__typeScale)) !important; +:root[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !important; } -:root[style*="readium-advanced-on"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - font-size: 1rem !important; +:root[style*="readium-normalize-on"]{ + --USER__typeScale:1.2; } -:root[style*="readium-advanced-on"] small { - font-size: smaller !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-advanced-on"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !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; } -/* 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[style*="readium-advanced-on"][style*="--USER__typeScale"] h1 { - 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-advanced-on"][style*="--USER__typeScale"] h2 { - 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-advanced-on"][style*="--USER__typeScale"] h3 { - 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; } -/* Readium CSS - Default highlights - - A stylesheet for user highlights - - Repo: https://github.com/readium/readium-css */ +:root[style*="readium-normalize-on"] small{ + font-size:smaller !important; +} -/* User Highlights */ +:root[style*="readium-normalize-on"] sub, +:root[style*="readium-normalize-on"] sup{ + font-size:67.5% !important; +} -.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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h1{ + font-size:calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h2{ + font-size:calc((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) !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; +:root[style*="readium-normalize-on"][style*="--USER__typeScale"] h3{ + font-size:calc(1rem * var(--USER__typeScale)) !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; +:root[style*="readium-iPadOSPatch-on"] body{ + -webkit-text-size-adjust:none; } -/* Media overlays */ +:root[style*="readium-iPadOSPatch-on"] p, +:root[style*="readium-iPadOSPatch-on"] h1, +:root[style*="readium-iPadOSPatch-on"] h2, +:root[style*="readium-iPadOSPatch-on"] h3, +:root[style*="readium-iPadOSPatch-on"] h4, +:root[style*="readium-iPadOSPatch-on"] h5, +:root[style*="readium-iPadOSPatch-on"] h6, +:root[style*="readium-iPadOSPatch-on"] li, +:root[style*="readium-iPadOSPatch-on"] th, +:root[style*="readium-iPadOSPatch-on"] td, +:root[style*="readium-iPadOSPatch-on"] dt, +:root[style*="readium-iPadOSPatch-on"] dd, +:root[style*="readium-iPadOSPatch-on"] pre, +:root[style*="readium-iPadOSPatch-on"] address, +:root[style*="readium-iPadOSPatch-on"] details, +:root[style*="readium-iPadOSPatch-on"] summary, +:root[style*="readium-iPadOSPatch-on"] figcaption, +:root[style*="readium-iPadOSPatch-on"] div:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)), +:root[style*="readium-iPadOSPatch-on"] aside:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)){ + -webkit-text-zoom:reset; +} -.readiumCSS-mo-active-default { - color: black !important; - background-color: yellow !important; +:root[style*="readium-iPadOSPatch-on"] abbr, +:root[style*="readium-iPadOSPatch-on"] b, +:root[style*="readium-iPadOSPatch-on"] bdi, +:root[style*="readium-iPadOSPatch-on"] bdo, +:root[style*="readium-iPadOSPatch-on"] cite, +:root[style*="readium-iPadOSPatch-on"] code, +:root[style*="readium-iPadOSPatch-on"] dfn, +:root[style*="readium-iPadOSPatch-on"] em, +:root[style*="readium-iPadOSPatch-on"] i, +:root[style*="readium-iPadOSPatch-on"] kbd, +:root[style*="readium-iPadOSPatch-on"] mark, +:root[style*="readium-iPadOSPatch-on"] q, +:root[style*="readium-iPadOSPatch-on"] rp, +:root[style*="readium-iPadOSPatch-on"] rt, +:root[style*="readium-iPadOSPatch-on"] ruby, +:root[style*="readium-iPadOSPatch-on"] s, +:root[style*="readium-iPadOSPatch-on"] samp, +:root[style*="readium-iPadOSPatch-on"] small, +:root[style*="readium-iPadOSPatch-on"] span, +:root[style*="readium-iPadOSPatch-on"] strong, +:root[style*="readium-iPadOSPatch-on"] sub, +:root[style*="readium-iPadOSPatch-on"] sup, +:root[style*="readium-iPadOSPatch-on"] time, +:root[style*="readium-iPadOSPatch-on"] u, +:root[style*="readium-iPadOSPatch-on"] var{ + -webkit-text-zoom:normal; } -/*# sourceMappingURL=ReadiumCSS-after.css.map */ + +:root[style*="readium-iPadOSPatch-on"] p:not(:has(b, cite, em, i, q, s, small, span, strong)):first-line{ + -webkit-text-zoom:normal; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-before.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-before.css index dcb79fffdd..4271373511 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-before.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-before.css @@ -1,615 +1,526 @@ -/* Readium CSS - Config module +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ - A file allowing implementers to customize flags for reading modes, - user settings, etc. +@namespace url("http://www.w3.org/1999/xhtml"); - Repo: https://github.com/readium/readium-css */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Custom medias - Syntax: @custom-media --variable (prop: value) */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Responsive columns - The minimum width for which responsive columns (2 -> 1 and vice versa, - depending on the current font-size) must be enabled */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Mobile columns - The minimum and maximum width for mobile devices. - We’re forcing the landscape orientation by default, - and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */ +@-ms-viewport{ + width:device-width; +} -/* Custom selectors - Syntax: @custom-selector :--variable selector - The selectors you will use for flags/switches - You can alternatively use classes or custom data-* attributes */ +@viewport{ + width:device-width; + zoom:1; +} -/* User view = paged | scrolled */ +:root{ -/* Font-family override */ + --RS__sans-serif-ja-v:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDGothic', 'Yu Gothic', 'ＭＳゴシック', 'MS Gothic', sans-serif; -/* Advanced settings */ + --RS__serif-ja-v:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDMincho', 'Yu Mincho', 'ＭＳ明朝', 'MS Mincho', serif; -/* Reading Modes */ + --RS__sans-serif-ja:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ W3', 'YuGothic', 'Yu Gothic Medium', 'BIZ UDPGothic', 'Yu Gothic', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; -/* Filters (images) */ + --RS__serif-ja:'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'YuMincho', 'BIZ UDPMincho', 'Yu Mincho', 'ＭＳ Ｐ明朝', 'MS PMincho', serif; -/* Accessibility normalization */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; -/* Direction i.e. ltr and rtl */ + --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; -/* Readium CSS - Namespaces module + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; - Namespaces to import in all 3 dist stylesheets + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; - Repo: https://github.com/readium/readium-css */ + --RS__zh-HK-lineHeightCompensation:1.167; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__zh-HK-baseFontFamily:'方體', 'PingFang HK', '方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__zh-TW-lineHeightCompensation:1.167; -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__zh-TW-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__zh-Hant-lineHeightCompensation:1.167; -/* Readium CSS - Base module + --RS__zh-Hant-baseFontFamily:'方體', 'PingFang TC', '黑體', 'Heiti TC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK TC', sans-serif; - A minimal stylesheet for all ebooks + --RS__zh-lineHeightCompensation:1.167; - Repo: https://github.com/readium/readium-css */ + --RS__zh-baseFontFamily:'方体', 'PingFang SC', '黑体', 'Heiti SC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Roboto, Noto, 'Noto Sans CJK SC', sans-serif; -/* Define viewport, HTML5-style */ + --RS__th-lineHeightCompensation:1.067; -@-ms-viewport { - width: device-width; -} + --RS__th-baseFontFamily:Thonburi, 'Leelawadee UI', 'Cordia New', Roboto, Noto, 'Noto Sans Thai', sans-serif; -@viewport { - width: device-width; - zoom: 1; -} + --RS__te-baseFontFamily:'Kohinoor Telugu', 'Telugu Sangam MN', 'Nirmala UI', Gautami, Roboto, Noto, 'Noto Sans Telugu', sans-serif; -:root { - /* Default font-stacks */ - --RS__oldStyleTf: "Iowan Old Style", "Sitka Text", Palatino, "Book Antiqua", serif; - --RS__modernTf: Athelas, Constantia, Georgia, serif; - --RS__sansTf: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --RS__humanistTf: Seravek, Calibri, Roboto, Arial, sans-serif; - --RS__monospaceTf: "Andale Mono", Consolas, monospace; + --RS__ta-lineHeightCompensation:1.067; - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); + --RS__ta-baseFontFamily:'Tamil Sangam MN', 'Nirmala UI', Latha, Roboto, Noto, 'Noto Sans Tamil', sans-serif; - /* 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; + --RS__si-lineHeightCompensation:1.167; - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); -} + --RS__si-baseFontFamily:'Sinhala Sangam MN', 'Nirmala UI', 'Iskoola Pota', Roboto, Noto, 'Noto Sans Sinhala', sans-serif; -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ + --RS__pa-lineHeightCompensation:1.1; -html { - font-family: var(--RS__baseFontFamily); - /* Fallback line-height */ - line-height: 1.6; /* Fits a little bit better for all languages than 1.5 */ - line-height: var(--RS__baseLineHeight); - text-rendering: optimizeLegibility; -} + --RS__pa-baseFontFamily:'Gurmukhi MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Gurmukhi', sans-serif; -/* 1.5 being too loose with larger font-sizes, we reset headings to normal (which value is 1.125–1.375 for our font-stacks) */ + --RS__or-lineHeightCompensation:1.167; -h1, h2, h3 { - line-height: normal; -} + --RS__or-baseFontFamily:'Oriya Sangam MN', 'Nirmala UI', Kalinga, Roboto, Noto, 'Noto Sans Oriya', sans-serif; -:lang(ja), -:lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; -} + --RS__ml-lineHeightCompensation:1.067; -/* Set default font for Math */ + --RS__ml-baseFontFamily:'Malayalam Sangam MN', 'Nirmala UI', Kartika, Roboto, Noto, 'Noto Sans Malayalam', sans-serif; -math { - font-family: "Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; -} + --RS__lo-baseFontFamily:'Lao Sangam MN', 'Leelawadee UI', 'Lao UI', Roboto, Noto, 'Noto Sans Lao', sans-serif; -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ + --RS__ko-lineHeightCompensation:1.167; -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ko-baseFontFamily:'Nanum Gothic', 'Apple SD Gothic Neo', 'Malgun Gothic', Roboto, Noto, 'Noto Sans CJK KR', sans-serif; -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__kn-lineHeightCompensation:1.1; -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__kn-baseFontFamily:'Kannada Sangam MN', 'Nirmala UI', Tunga, Roboto, Noto, 'Noto Sans Kannada', sans-serif; -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; -} + --RS__km-lineHeightCompensation:1.067; -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; -} + --RS__km-baseFontFamily:'Khmer Sangam MN', 'Leelawadee UI', 'Khmer UI', Roboto, Noto, 'Noto Sans Khmer', sans-serif; -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; -} + --RS__ja-lineHeightCompensation:1.167; -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ja-baseFontFamily:YuGothic, 'Hiragino Maru Gothic ProN', 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo UI', 'MS Gothic', Roboto, Noto, 'Noto Sans CJK JP', sans-serif; -:lang(he) { - --RS__baseFontFamily: "New Peninim MT", "Arial Hebrew", Gisha, "Times New Roman", Roboto, Noto, "Noto Sans Hebrew" sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__iu-baseFontFamily:'Euphemia UCAS', Euphemia, Roboto, Noto, 'Noto Sans Canadian Aboriginal', sans-serif; -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; + --RS__hy-baseFontFamily:Mshtakan, Sylfaen, Roboto, Noto, 'Noto Serif Armenian', serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__hi-lineHeightCompensation:1.1; -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; -} + --RS__hi-baseFontFamily:'Kohinoor Devanagari', 'Devanagari Sangam MN', Kokila, 'Nirmala UI', Roboto, Noto, 'Noto Sans Devanagari', sans-serif; -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; -} + --RS__he-lineHeightCompensation:1.1; -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; + --RS__he-baseFontFamily:'New Peninim MT', 'Arial Hebrew', Gisha, 'Times New Roman', Roboto, Noto, 'Noto Sans Hebrew', sans-serif; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + --RS__gu-lineHeightCompensation:1.167; - /* Extra variables for Japanese font-stacks as we may want to reuse them for user settings + default */ - --RS__serif-ja: "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja: "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ ゴシック", "MS Gothic", "Hiragino Sans", sans-serif; - --RS__serif-ja-v: "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho ProN", serif; - --RS__sans-serif-ja-v: "ＭＳ ゴシック", "MS Gothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Sans", sans-serif; -} + --RS__gu-baseFontFamily:'Gujarati Sangam MN', 'Nirmala UI', Shruti, Roboto, Noto, 'Noto Sans Gujarati', sans-serif; -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__fa-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__chr-lineHeightCompensation:1.167; -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; + --RS__chr-baseFontFamily:'Plantagenet Cherokee', Roboto, Noto, 'Noto Sans Cherokee'; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__bo-baseFontFamily:Kailasa, 'Microsoft Himalaya', Roboto, Noto, 'Noto Sans Tibetan', sans-serif; -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; -} + --RS__bn-lineHeightCompensation:1.067; -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__bn-baseFontFamily:'Kohinoor Bangla', 'Bangla Sangam MN', Vrinda, Roboto, Noto, 'Noto Sans Bengali', sans-serif; -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__ar-baseFontFamily:'Geeza Pro', 'Arabic Typesetting', Roboto, Noto, 'Noto Naskh Arabic', 'Times New Roman', serif; -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; -} + --RS__am-lineHeightCompensation:1.167; -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__lineHeightCompensation: 1.167; -} + --RS__am-baseFontFamily:Kefa, Nyala, Roboto, Noto, 'Noto Sans Ethiopic', serif; -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__latin-lineHeightCompensation:1; -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; -} + --RS__latin-baseFontFamily:var(--RS__oldStyleTf); + --RS__baseFontFamily:var(--RS__latin-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__latin-lineHeightCompensation); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; -} + --RS__selectionTextColor:inherit; -/* The following will also work for zh-Hans */ + --RS__selectionBackgroundColor:#b4d8fe; -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; + --RS__visitedColor:#551A8B; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} + --RS__linkColor:#0000EE; -:lang(zh-Hant), -:lang(zh-TW) { - --RS__baseFontFamily: "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; + --RS__textColor:#121212; - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; + + background-color:var(--RS__backgroundColor) !important; } -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); +} - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -/* Readium CSS - Day/Default mode +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; +} - A preset theme for day mode, which is the default +h1, h2, h3{ + line-height:normal; +} - Repo: https://github.com/readium/readium-css */ +:lang(ja), +:lang(zh), +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; +} -/* CONFIG */ +math{ + font-family:"Latin Modern Math", "STIX Two Math", "XITS Math", "STIX Math", "Libertinus Math", "TeX Gyre Termes Math", "TeX Gyre Bonum Math", "TeX Gyre Schola", "DejaVu Math TeX Gyre", "TeX Gyre Pagella Math", "Asana Math", "Cambria Math", "Lucida Bright Math", "Minion Math", STIXGeneral, STIXSizeOneSym, Symbol, "Times New Roman", serif; +} -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; +:lang(am){ + --RS__baseFontFamily:var(--RS__am-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__am-lineHeightCompensation); +} - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:lang(ar){ + --RS__baseFontFamily:var(--RS__ar-baseFontFamily); } -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; +:lang(bn){ + --RS__baseFontFamily:var(--RS__bn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__bn-lineHeightCompensation); } -/* Note: Though `::selection` was present in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase because its behavior was under-specified (especially with nested elements) and interoperability wasn’t achieved. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */ +:lang(bo){ + --RS__baseFontFamily:var(--RS__bo-baseFontFamily); +} -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +:lang(chr){ + --RS__baseFontFamily:var(--RS__chr-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__chr-lineHeightCompensation); } -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +:lang(fa){ + --RS__baseFontFamily:var(--RS__fa-baseFontFamily); } -/* @import "modules/ReadiumCSS-fonts.css"; */ +:lang(gu){ + --RS__baseFontFamily:var(--RS__gu-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__gu-lineHeightCompensation); +} -/* Readium CSS - HTML5 SR Patch stylesheet +:lang(he){ + --RS__baseFontFamily:var(--RS__he-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__he-lineHeightCompensation); +} - A set of style to adjust HTML5 Suggested Rendering to paginated content +:lang(hi){ + --RS__baseFontFamily:var(--RS__hi-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__hi-lineHeightCompensation); +} - Repo: https://github.com/readium/readium-css */ +:lang(hy){ + --RS__baseFontFamily:var(--RS__hy-baseFontFamily); +} -/* Fragmentation */ +:lang(iu){ + --RS__baseFontFamily:var(--RS__iu-baseFontFamily); +} -body { - widows: 2; - orphans: 2; +:lang(ja){ + --RS__baseFontFamily:var(--RS__ja-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ja-lineHeightCompensation); } -figcaption, th, td { - widows: 1; - orphans: 1; +:lang(km){ + --RS__baseFontFamily:var(--RS__km-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__km-lineHeightCompensation); } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +:lang(kn){ + --RS__baseFontFamily:var(--RS__kn-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__kn-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +:lang(ko){ + --RS__baseFontFamily:var(--RS__ko-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ko-lineHeightCompensation); } -/* Hyphenation */ +:lang(lo){ + --RS__baseFontFamily:var(--RS__lo-baseFontFamily); +} -body { - -webkit-hyphenate-character: "\002D"; - -moz-hyphenate-character: "\002D"; - -ms-hyphenate-character: "\002D"; - hyphenate-character: "\002D"; - -webkit-hyphenate-limit-lines: 3; - -ms-hyphenate-limit-lines: 3; - hyphenate-limit-lines: 3; +:lang(ml){ + --RS__baseFontFamily:var(--RS__ml-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ml-lineHeightCompensation); } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figcaption, -pre, -caption, -address, -center, -code, -var { - -ms-hyphens: none; - -moz-hyphens: none; - -webkit-hyphens: none; - -epub-hyphens: none; - hyphens: none; +:lang(or){ + --RS__baseFontFamily:var(--RS__or-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__or-lineHeightCompensation); } -/* OTF */ +:lang(pa){ + --RS__baseFontFamily:var(--RS__pa-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__pa-lineHeightCompensation); +} -body { - font-variant-numeric: oldstyle-nums proportional-nums; +:lang(si){ + --RS__baseFontFamily:var(--RS__si-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__si-lineHeightCompensation); } -:lang(ja) body, -:lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; +:lang(ta){ + --RS__baseFontFamily:var(--RS__ta-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__ta-lineHeightCompensation); } -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; +:lang(te){ + --RS__baseFontFamily:var(--RS__te-baseFontFamily); } -table { - font-variant-numeric: lining-nums tabular-nums; +:lang(th){ + --RS__baseFontFamily:var(--RS__th-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__th-lineHeightCompensation); } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +:lang(zh){ + --RS__baseFontFamily:var(--RS__zh-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-lineHeightCompensation); } -rt { - font-variant-east-asian: ruby; +:lang(zh-Hant){ + --RS__baseFontFamily:var(--RS__zh-Hant-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-Hant-lineHeightCompensation); } -:lang(ar) { - font-variant-ligatures: common-ligatures; +:lang(zh-TW){ + --RS__baseFontFamily:var(--RS__zh-TW-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-TW-lineHeightCompensation); } -:lang(ko) { - font-kerning: normal; +:lang(zh-HK){ + --RS__baseFontFamily:var(--RS__zh-HK-baseFontFamily); + --RS__lineHeightCompensation:var(--RS__zh-HK-lineHeightCompensation); } -/* Night mode */ +body{ + widows:2; + orphans:2; +} -hr { - color: inherit; - border-color: currentColor; +figcaption, th, td{ + widows:1; + orphans:1; } -table, th, td { - border-color: currentColor; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -/* Horizontal Spacing */ +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; +} -figure, blockquote { - margin: 1em 5%; +body{ + -webkit-hyphenate-character:"\002D"; + -moz-hyphenate-character:"\002D"; + -ms-hyphenate-character:"\002D"; + hyphenate-character:"\002D"; + -webkit-hyphenate-limit-lines:3; + -ms-hyphenate-limit-lines:3; + hyphenate-limit-lines:3; } -/* +h1, h2, h3, h4, h5, h6, dt, +figcaption, pre, caption, address, +center, code, var{ + -ms-hyphens:none; + -moz-hyphens:none; + -webkit-hyphens:none; + -epub-hyphens:none; + hyphens:none; +} -:lang(ja) figure, :lang(ja) blockquote, -:lang(zh-Hant) figure, :lang(zh-Hant) blockquote, -:lang(zh-TW) figure, :lang(zh-TW) blockquote, -:lang(mn) figure, :lang(mn) blockquote { - margin: 5% 1em; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } -*/ +:lang(ja) body, +:lang(zh) body, +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; +} -ul, ol { - padding-left: 5%; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -/* +table{ + font-variant-numeric:lining-nums tabular-nums; +} -:lang(ja) ul, :lang(ja) ol, -:lang(zh-Hant) ul, :lang(zh-Hant) ol, -:lang(zh-TW) ul, :lang(zh-TW) ol, -:lang(mn) ul, :lang(mn) ol { - padding-top: 5%; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -*/ +rt{ + font-variant-east-asian:ruby; +} -dd { - margin-left: 5%; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -/* +:lang(ko){ + font-kerning:normal; +} -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; +hr{ + color:inherit; + border-color:currentcolor; } -*/ +table, th, td{ + border-color:currentcolor; +} -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; +figure, blockquote{ + margin:1em 5%; } -/* Normalization */ +ul, ol{ + padding-left:5%; +} -abbr[title], acronym[title] { - text-decoration: dotted underline; +dd{ + margin-left:5%; } -nobr wbr { - white-space: normal; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -/* Make ruby text and parentheses non-selectable (TBC) */ +abbr[title], acronym[title]{ + text-decoration:dotted underline; +} -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +nobr wbr{ + white-space:normal; } -/* Internationalization */ +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; +} -*:lang(ja), -*:lang(zh), -*:lang(ko), -:lang(ja) cite, -:lang(ja) dfn, -:lang(ja) em, -:lang(ja) i, -:lang(zh) cite, -:lang(zh) dfn, -:lang(zh) em, -:lang(zh) i, -:lang(ko) cite, -:lang(ko) dfn, -:lang(ko) em, -:lang(ko) i { - font-style: normal; +*:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)), +*:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)), +*:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)), +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) cite, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) dfn, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) em, +:lang(ja):not(:lang(ja-Latn)):not(:lang(ja-Cyrl)) i, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) cite, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) dfn, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) em, +:lang(zh):not(:lang(zh-Latn)):not(:lang(zh-Cyrl)) i, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) cite, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) dfn, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) em, +:lang(ko):not(:lang(ko-Latn)):not(:lang(ko-Cyrl)) i{ + font-style:normal; } :lang(ja) a, :lang(zh) a, -:lang(ko) a { - text-decoration: none; +:lang(ko) a{ + text-decoration:none; } -/* Readium CSS - Safeguards module - - A set of styles to prevent common issues in pagination - - Repo: https://github.com/readium/readium-css */ - -/* Config */ - -/* We’ll be using an "RS__" prefix so that we can prevent collisions with authors’ CSS */ - -:root { - /* max-width for media, you can override that via JS if not compiled to static */ - --RS__maxMediaWidth: 100%; - - /* max-height for media, you can override that via JS if not compiled to static - Please consider figures might have a figcaption, which is why 95vh in the first place */ - --RS__maxMediaHeight: 95vh; - - /* value for medias’ box-sizing */ - --RS__boxSizingMedia: border-box; - - /* value for table’s box-sizing */ - --RS__boxSizingTable: border-box; +:root{ + --RS__maxMediaWidth:100%; + --RS__maxMediaHeight:95vh; + --RS__boxSizingMedia:border-box; + --RS__boxSizingTable:border-box; } -/* Sanitize line-heights in webkit e.g. raised cap without a declared line-height - See effect by checking this demo in Safari: https://codepen.io/JayPanoz/pen/gRmzrE - Note: glyphs has to be reset to inline for CJK */ - -html { - -webkit-line-box-contain: block glyphs replaced; +a, a span, span a, h1, h2, h3, h4, h5, h6{ + word-wrap:break-word; } -:lang(ja) { - -webkit-line-box-contain: block inline replaced; +div{ + max-width:var(--RS__maxMediaWidth); } -/* Wrap long strings if larger than line-length */ - -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; -} +img, svg|svg, video{ + object-fit:contain; -div { - max-width: var(--RS__maxMediaWidth); + width:auto; + height:auto; + max-width:var(--RS__maxMediaWidth); + max-height:var(--RS__maxMediaHeight) !important; + box-sizing:var(--RS__boxSizingMedia); + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -/* Size medias */ - -/* You can override CSS variables by re-defining it for all elements or a specific one */ - -img, svg, audio, video { +@supports (zoom: 1) and (not ((-webkit-column-axis: horizontal) and (-webkit-column-progression: normal))){ - /* Object-fit allows us to keep the correct aspect-ratio */ - object-fit: contain; - - width: auto; - height: auto; - - /* Some files don’t have max-width */ - max-width: var(--RS__maxMediaWidth); - - /* We’re setting a max-height, especially for covers */ - max-height: var(--RS__maxMediaHeight) !important; - /* We probably don’t need to use modern box-sizing as auto behaves like it */ - box-sizing: var(--RS__boxSizingMedia); - - /* For page-break, we must use those 3 - We can’t use a variable there, webkit seems to no support them for those properties */ - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] img, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] svg|svg, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] video{ + zoom:calc(100% / var(--USER__fontSize)); + } } -/* Try preventing border being cut-off, webkit + blink have content-box by default */ +audio{ + max-width:100%; + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; + } -table { - max-width: var(--RS__maxMediaWidth); - box-sizing: var(--RS__boxSizingTable); -} -/*# sourceMappingURL=ReadiumCSS-before.css.map */ \ No newline at end of file +table{ + max-width:var(--RS__maxMediaWidth); + box-sizing:var(--RS__boxSizingTable); +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-default.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-default.css index 18bb89311d..bf36c4669a 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-default.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-default.css @@ -1,189 +1,159 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ @namespace url("http://www.w3.org/1999/xhtml"); @namespace epub url("http://www.idpf.org/2007/ops"); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); +@namespace m url("http://www.w3.org/1998/Math/MathML"); @namespace svg url("http://www.w3.org/2000/svg"); -/* Readium CSS - Default module for RTL scripts - - A stylesheet for unstyled ebooks based on HTML5 Suggested Rendering - Note: works in combination with Base module - - Repo: https://github.com/readium/readium-css */ +:root{ + --RS__compFontFamily:var(--RS__baseFontFamily); + --RS__codeFontFamily:var(--RS__monospaceTf); -/* CONFIG */ + --RS__typeScale:1.125; + --RS__baseFontSize:100%; -:root { - --RS__compFontFamily: var(--RS__baseFontFamily); - --RS__codeFontFamily: var(--RS__monospaceTf); + --RS__flowSpacing:1.5rem; + --RS__paraSpacing:0; + --RS__paraIndent:1em; - --RS__typeScale: 1.125; /* 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618 */ - --RS__baseFontSize: 100%; + --RS__linkColor:#0000EE; + --RS__visitedColor:#551A8B; - --RS__flowSpacing: 1.5rem; - --RS__paraSpacing: 0; - --RS__paraIndent: 1em; - - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; - - --RS__primaryColor: ; - --RS__secondaryColor: ; + --RS__primaryColor:; + --RS__secondaryColor:; } -/* STYLES */ - -/* Typo */ - -body { - font-size: var(--RS__baseFontSize); - text-align: justify; +body{ + font-size:var(--RS__baseFontSize); + text-align:justify; } -h1, h2, h3, h4, h5, h6 { - font-family: var(--RS__compFontFamily); - text-align: right; +h1, h2, h3, h4, h5, h6{ + font-family:var(--RS__compFontFamily); + text-align:right; } -/* Flow content */ - -blockquote, -figure, -p, -pre, -aside, -footer, -form, -hr { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); +blockquote, figure, p, pre, +aside, footer, form, hr{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); } -p { - margin-top: var(--RS__paraSpacing); - margin-bottom: var(--RS__paraSpacing); - text-indent: var(--RS__paraIndent); +p{ + margin-top:var(--RS__paraSpacing); + margin-bottom:var(--RS__paraSpacing); + text-indent:var(--RS__paraIndent); } -h1 + p, -h2 + p, -h3 + p, -h4 + p, -h5 + p, -h6 + p, -hr + p { - text-indent: 0; +h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, +hr + p{ + text-indent:0; } -pre { - font-family: var(--RS__codeFontFamily); +pre{ + font-family:var(--RS__codeFontFamily); } -/* Phrasing content */ - -code, kbd, samp, tt { - font-family: var(--RS__codeFontFamily); +code, kbd, samp, tt{ + font-family:var(--RS__codeFontFamily); } -sub, sup { - position: relative; - font-size: 67.5%; - line-height: 1; +sub, sup{ + position:relative; + font-size:67.5%; + line-height:1; } -sub { - bottom: -0.2ex; +sub{ + bottom:-0.2ex; } -sup { - bottom: 0; +sup{ + bottom:0; } -:link { - color: var(--RS__linkColor); +:link{ + color:var(--RS__linkColor); } -:visited { - color: var(--RS__visitedColor); +:visited{ + color:var(--RS__visitedColor); } -/* Headings */ - -h1 { - margin-top: calc(var(--RS__flowSpacing) * 2); - margin-bottom: calc(var(--RS__flowSpacing) * 2); - /* The following is base font size * typescale power of 3 */ - font-size: calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); +h1{ + margin-top:calc(var(--RS__flowSpacing) * 2); + margin-bottom:calc(var(--RS__flowSpacing) * 2); + font-size:calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale)); } -h2 { - margin-top: calc(var(--RS__flowSpacing) * 2); - margin-bottom: var(--RS__flowSpacing); - /* The following is base font size * typescale power of 2 */ - font-size: calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); +h2{ + margin-top:calc(var(--RS__flowSpacing) * 2); + margin-bottom:var(--RS__flowSpacing); + font-size:calc((1em * var(--RS__typeScale)) * var(--RS__typeScale)); } -h3 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-size: calc(1em * var(--RS__typeScale)); +h3{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-size:calc(1em * var(--RS__typeScale)); } -h4 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-size: 1em; +h4{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-size:1em; } -h5 { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); - font-size: smaller; +h5{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); + font-size:smaller; } -h6 { - margin-top: var(--RS__flowSpacing); - margin-bottom: 0; - font-size: smaller; - font-weight: normal; +h6{ + margin-top:var(--RS__flowSpacing); + margin-bottom:0; + font-size:smaller; + font-weight:normal; } -/* Lists */ - -dl, ol, ul { - margin-top: var(--RS__flowSpacing); - margin-bottom: var(--RS__flowSpacing); +dl, ol, ul{ + margin-top:var(--RS__flowSpacing); + margin-bottom:var(--RS__flowSpacing); } -/* Table */ - -table { - margin: var(--RS__flowSpacing) 0; - border: 1px solid currentColor; - border-collapse: collapse; - empty-cells: show; +table{ + margin:var(--RS__flowSpacing) 0; + border:1px solid currentcolor; + border-collapse:collapse; + empty-cells:show; } -thead, tbody, tfoot, table > tr { - vertical-align: top; +thead, tbody, tfoot, table > tr{ + vertical-align:top; } -th { - text-align: initial; +th{ + text-align:initial; } -th, td { - padding: 4px; - border: 1px solid currentColor; -} -/*# sourceMappingURL=ReadiumCSS-default.css.map */ \ No newline at end of file +th, td{ + padding:4px; + border:1px solid currentcolor; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/webPub/ReadiumCSS-webPub.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/webPub/ReadiumCSS-webPub.css new file mode 100644 index 0000000000..e2cf6277b3 --- /dev/null +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/webPub/ReadiumCSS-webPub.css @@ -0,0 +1,274 @@ +/*! + * Readium CSS v.2.0.5 + * Copyright (c) 2017–2026. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. + * Core maintainer: Jiminy Panoz + * Contributors: + * Daniel Weck + * Hadrien Gardeur + * Innovimax + * L. Le Meur + * Mickaël Menu + * k_taka + */ + +:root[style*="--USER__textAlign"]{ + text-align:var(--USER__textAlign); +} + +:root[style*="--USER__textAlign"] body, +:root[style*="--USER__textAlign"] p:not( + blockquote p, + figcaption p, + header p, + hgroup p, + :root[style*="readium-experimentalHeaderFiltering-on"] p[class*="title"], + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > h1 + p, + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > p:has(+ h1) +), +:root[style*="--USER__textAlign"] li, +:root[style*="--USER__textAlign"] dd{ + text-align:var(--USER__textAlign) !important; + -moz-text-align-last:auto !important; + -epub-text-align-last:auto !important; + text-align-last:auto !important; +} + +:root[style*="--USER__bodyHyphens"]{ + -webkit-hyphens:var(--USER__bodyHyphens) !important; + -moz-hyphens:var(--USER__bodyHyphens) !important; + -ms-hyphens:var(--USER__bodyHyphens) !important; + -epub-hyphens:var(--USER__bodyHyphens) !important; + hyphens:var(--USER__bodyHyphens) !important; +} + +:root[style*="--USER__bodyHyphens"] body, +:root[style*="--USER__bodyHyphens"] p, +:root[style*="--USER__bodyHyphens"] li, +:root[style*="--USER__bodyHyphens"] div, +:root[style*="--USER__bodyHyphens"] dd{ + -webkit-hyphens:var(--USER__bodyHyphens) !important; + -moz-hyphens:var(--USER__bodyHyphens) !important; + -ms-hyphens:var(--USER__bodyHyphens) !important; + -epub-hyphens:var(--USER__bodyHyphens) !important; + hyphens:var(--USER__bodyHyphens) !important; +} + +:root[style*="--USER__fontFamily"]{ + font-family:var(--USER__fontFamily) !important; +} + +:root[style*="--USER__fontFamily"] *{ + font-family:revert !important; +} + +:root[style*="readium-a11y-on"]{ + font-style:normal !important; + font-weight:normal !important; +} + +:root[style*="readium-a11y-on"] body *:not(code):not(var):not(kbd):not(samp){ + font-family:inherit !important; + font-style:inherit !important; + font-weight:inherit !important; +} + +:root[style*="readium-a11y-on"] body *:not(a){ + text-decoration:none !important; +} + +:root[style*="readium-a11y-on"] body *{ + font-variant-caps:normal !important; + font-variant-numeric:normal !important; + font-variant-position:normal !important; +} + +:root[style*="readium-a11y-on"] sup, +:root[style*="readium-a11y-on"] sub{ + font-size:1rem !important; + vertical-align:baseline !important; +} + +:root:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] body{ + zoom:var(--USER__zoom) !important; +} + +:root[style*="readium-iOSPatch-on"][style*="--USER__zoom"] body{ + -webkit-text-size-adjust:var(--USER__zoom) !important; +} + +@supports selector(figure:has(> img)){ + + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] figure:has(> img), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] figure:has(> video), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] figure:has(> svg), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] figure:has(> canvas), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] figure:has(> iframe), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] figure:has(> audio), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] div:has(> img:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] div:has(> video:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] div:has(> svg:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] div:has(> canvas:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] div:has(> iframe:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] div:has(> audio:only-child), + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] table{ + zoom:calc(100% / var(--USER__zoom)) !important; + } + + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] figcaption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] caption, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] td, + :root[style*="readium-experimentalZoom-on"]:not([style*="readium-iOSPatch-on"])[style*="--USER__zoom"] th{ + zoom:var(--USER__zoom) !important; + } +} + +:root[style*="--USER__lineHeight"]{ + line-height:var(--USER__lineHeight) !important; +} + +:root[style*="--USER__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:var(--USER__lineHeight) !important; +} + +:root[style*="--USER__paraSpacing"] p{ + margin-top:var(--USER__paraSpacing) !important; + margin-bottom:var(--USER__paraSpacing) !important; +} + +:root[style*="--USER__paraIndent"] p:not( + blockquote p, + figcaption p, + header p, + hgroup p, + :root[style*="readium-experimentalHeaderFiltering-on"] p[class*="title"], + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > h1 + p, + :root[style*="readium-experimentalHeaderFiltering-on"] div:has(+ *) > p:has(+ h1) +){ + text-indent:var(--USER__paraIndent) !important; +} + +:root[style*="--USER__paraIndent"] p *{ + text-indent:0 !important; +} + +:root[style*="--USER__wordSpacing"] h1, +:root[style*="--USER__wordSpacing"] h2, +:root[style*="--USER__wordSpacing"] h3, +:root[style*="--USER__wordSpacing"] h4, +:root[style*="--USER__wordSpacing"] h5, +:root[style*="--USER__wordSpacing"] h6, +:root[style*="--USER__wordSpacing"] p, +:root[style*="--USER__wordSpacing"] li, +:root[style*="--USER__wordSpacing"] div, +:root[style*="--USER__wordSpacing"] dt, +:root[style*="--USER__wordSpacing"] dd{ + word-spacing:var(--USER__wordSpacing) !important; +} + +:root[style*="--USER__letterSpacing"] h1, +:root[style*="--USER__letterSpacing"] h2, +:root[style*="--USER__letterSpacing"] h3, +:root[style*="--USER__letterSpacing"] h4, +:root[style*="--USER__letterSpacing"] h5, +:root[style*="--USER__letterSpacing"] h6, +:root[style*="--USER__letterSpacing"] p, +:root[style*="--USER__letterSpacing"] li, +:root[style*="--USER__letterSpacing"] div, +:root[style*="--USER__letterSpacing"] dt, +:root[style*="--USER__letterSpacing"] dd{ + letter-spacing:var(--USER__letterSpacing) !important; + font-variant:none !important; +} + +:root[style*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; +} + +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; +} + +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; +} + +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; +} + +:root[style*="readium-noRuby-on"] body rt, +:root[style*="readium-noRuby-on"] body rp{ + display:none; +} + +:root[style*="--USER__ligatures"]{ + font-variant-ligatures:var(--USER__ligatures) !important; +} + +:root[style*="--USER__ligatures"] *{ + font-variant-ligatures:inherit !important; +} + +:root[style*="readium-iPadOSPatch-on"] body{ + -webkit-text-size-adjust:none; +} + +:root[style*="readium-iPadOSPatch-on"] p, +:root[style*="readium-iPadOSPatch-on"] h1, +:root[style*="readium-iPadOSPatch-on"] h2, +:root[style*="readium-iPadOSPatch-on"] h3, +:root[style*="readium-iPadOSPatch-on"] h4, +:root[style*="readium-iPadOSPatch-on"] h5, +:root[style*="readium-iPadOSPatch-on"] h6, +:root[style*="readium-iPadOSPatch-on"] li, +:root[style*="readium-iPadOSPatch-on"] th, +:root[style*="readium-iPadOSPatch-on"] td, +:root[style*="readium-iPadOSPatch-on"] dt, +:root[style*="readium-iPadOSPatch-on"] dd, +:root[style*="readium-iPadOSPatch-on"] pre, +:root[style*="readium-iPadOSPatch-on"] address, +:root[style*="readium-iPadOSPatch-on"] details, +:root[style*="readium-iPadOSPatch-on"] summary, +:root[style*="readium-iPadOSPatch-on"] figcaption, +:root[style*="readium-iPadOSPatch-on"] div:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)), +:root[style*="readium-iPadOSPatch-on"] aside:not(:has(p, h1, h2, h3, h4, h5, h6, li, th, td, dt, dd, pre, address, aside, details, figcaption, summary)){ + -webkit-text-zoom:reset; +} + +:root[style*="readium-iPadOSPatch-on"] abbr, +:root[style*="readium-iPadOSPatch-on"] b, +:root[style*="readium-iPadOSPatch-on"] bdi, +:root[style*="readium-iPadOSPatch-on"] bdo, +:root[style*="readium-iPadOSPatch-on"] cite, +:root[style*="readium-iPadOSPatch-on"] code, +:root[style*="readium-iPadOSPatch-on"] dfn, +:root[style*="readium-iPadOSPatch-on"] em, +:root[style*="readium-iPadOSPatch-on"] i, +:root[style*="readium-iPadOSPatch-on"] kbd, +:root[style*="readium-iPadOSPatch-on"] mark, +:root[style*="readium-iPadOSPatch-on"] q, +:root[style*="readium-iPadOSPatch-on"] rp, +:root[style*="readium-iPadOSPatch-on"] rt, +:root[style*="readium-iPadOSPatch-on"] ruby, +:root[style*="readium-iPadOSPatch-on"] s, +:root[style*="readium-iPadOSPatch-on"] samp, +:root[style*="readium-iPadOSPatch-on"] small, +:root[style*="readium-iPadOSPatch-on"] span, +:root[style*="readium-iPadOSPatch-on"] strong, +:root[style*="readium-iPadOSPatch-on"] sub, +:root[style*="readium-iPadOSPatch-on"] sup, +:root[style*="readium-iPadOSPatch-on"] time, +:root[style*="readium-iPadOSPatch-on"] u, +:root[style*="readium-iPadOSPatch-on"] var{ + -webkit-text-zoom:normal; +} + +:root[style*="readium-iPadOSPatch-on"] p:not(:has(b, cite, em, i, q, s, small, span, strong)):first-line{ + -webkit-text-zoom:normal; +} \ No newline at end of file diff --git a/Sources/Navigator/EPUB/CSS/CSSProperties.swift b/Sources/Navigator/EPUB/CSS/CSSProperties.swift index a4765a5d83..92b23f6198 100644 --- a/Sources/Navigator/EPUB/CSS/CSSProperties.swift +++ b/Sources/Navigator/EPUB/CSS/CSSProperties.swift @@ -43,33 +43,37 @@ public struct CSSUserProperties: CSSProperties, Sendable { // Pagination - /// The number of columns (column-count) the user wants displayed (one-page view or two-page - /// spread). + /// The number of columns (column-count) the user wants displayed. /// - /// To reset, change the value to auto. - public var colCount: CSSColCount? + /// To reset, change the value to 0. + public var colCount: Int? - /// A factor applied to horizontal margins (padding-left and padding-right) the user wants to - /// set. - /// - /// Recommended values: a range from 0.5 to 2. Increments are left to implementers’ judgment. - /// To reset, change the value to 1. - public var pageMargins: Double? + /// The maximum line length. + public var lineLength: CSSLength? // Appearance /// This flag applies a reading mode (sepia or night). public var appearance: CSSAppearance? - /// This will only apply in night mode to darken images and impact img. + /// Blends the images with the background color. + public var blendImages: Bool? + + /// This will apply a brightness filter with the value it's given. + /// + /// Requires: appearance = Appearance.Night + public var darkenImages: Double? + + /// This will apply an invert filter with the value it's given. /// /// Requires: appearance = Appearance.Night - public var darkenImages: Bool? + public var invertImages: Double? - /// This will only apply in night mode to invert images and impact img. + /// This will apply an invert filter with the value it's given, + /// only to img class="gaiji". /// /// Requires: appearance = Appearance.Night - public var invertImages: Bool? + public var invertGaiji: Double? /// The color for textual contents. It impacts all elements but headings and pre in the DOM. /// @@ -81,104 +85,73 @@ public struct CSSUserProperties: CSSProperties, Sendable { // Typography - /// This flag is required to change the font-family user setting. - public var fontOverride: Bool? - /// The typeface (font-family) the user wants to read with. It impacts body, p, li, div, dt, dd /// and phrasing elements which don’t have a lang or xml:lang attribute. - /// - /// To reset, remove the required flag. - /// Requires: fontOverride public var fontFamily: [String]? /// Increasing and decreasing the root font-size. It will serve as a reference for the cascade. - /// - /// To reset, remove the required flag. public var fontSize: CSSLength? - // Advanced settings - - /// This flag is required to apply the font-size and/or advanced user settings. - public var advancedSettings: Bool? - - /// The type scale the user wants to use for the publication. It impacts headings, p, li, div, - /// pre, dd, small, sub, and sup. - /// - /// Recommended values: a range from 75% to 250%. Increments are left to implementers’ judgment. - /// Requires: advancedSettings - public var typeScale: Double? - /// The alignment (text-align) the user prefers. It impacts body, li, and p which are not /// children of blockquote and figcaption. - /// - /// Requires: advancedSettings public var textAlign: CSSTextAlign? /// Increasing and decreasing leading (line-height). It impacts body, p, li and div. /// /// Recommended values: a range from 1 to 2. Increments are left to implementers’ judgment. - /// Requires: advancedSettings public var lineHeight: CSSLineHeight? /// The vertical margins (margin-top and margin-bottom) for paragraphs. /// /// Recommended values: a range from 0 to 2rem. Increments are left to implementers’ judgment. - /// Requires: advancedSettings = true public var paraSpacing: CSSLength? /// The text-indent for paragraphs. /// /// Recommended values: a range from 0 to 3rem. Increments are left to implementers’ judgment. - /// Requires: advancedSettings public var paraIndent: CSSRemLength? /// Increasing space between words (word-spacing, related to a11y). /// /// Recommended values: a range from 0 to 1rem. Increments are left to implementers’ judgment. - /// Requires: advancedSettings public var wordSpacing: CSSRemLength? /// Increasing space between letters (letter-spacing, related to a11y). /// /// Recommended values: a range from 0 to 0.5rem. Increments are left to implementers’ /// judgment. - /// Requires: advancedSettings public var letterSpacing: CSSRemLength? /// Enabling and disabling hyphenation. It impacts body, p, li, div and dd. - /// - /// Requires: advancedSettings public var bodyHyphens: CSSHyphens? /// Enabling and disabling ligatures in Arabic (related to a11y). - /// - /// Requires: advancedSettings public var ligatures: CSSLigatures? // Accessibility /// It impacts font style, weight and variant, text decoration, super and subscripts. - /// - /// Requires: fontOverride public var a11yNormalize: Bool? + /// Hiding/disabling ruby (furigana) annotations. + public var noRuby: Bool? + /// Additional overrides for extensions and adjustments. public var overrides: [String: String?] public init( view: CSSView? = nil, - colCount: CSSColCount? = nil, - pageMargins: Double? = nil, + colCount: Int? = nil, + lineLength: CSSLength? = nil, appearance: CSSAppearance? = nil, - darkenImages: Bool? = nil, - invertImages: Bool? = nil, + blendImages: Bool? = nil, + darkenImages: Double? = nil, + invertImages: Double? = nil, + invertGaiji: Double? = nil, textColor: CSSColor? = nil, backgroundColor: CSSColor? = nil, - fontOverride: Bool? = nil, fontFamily: [String]? = nil, fontSize: CSSLength? = nil, - advancedSettings: Bool? = nil, - typeScale: Double? = nil, textAlign: CSSTextAlign? = nil, lineHeight: CSSLineHeight? = nil, paraSpacing: CSSLength? = nil, @@ -188,21 +161,21 @@ public struct CSSUserProperties: CSSProperties, Sendable { bodyHyphens: CSSHyphens? = nil, ligatures: CSSLigatures? = nil, a11yNormalize: Bool? = nil, + noRuby: Bool? = nil, overrides: [String: String?] = [:] ) { self.view = view self.colCount = colCount - self.pageMargins = pageMargins + self.lineLength = lineLength self.appearance = appearance + self.blendImages = blendImages self.darkenImages = darkenImages self.invertImages = invertImages + self.invertGaiji = invertGaiji self.textColor = textColor self.backgroundColor = backgroundColor - self.fontOverride = fontOverride self.fontFamily = fontFamily self.fontSize = fontSize - self.advancedSettings = advancedSettings - self.typeScale = typeScale self.textAlign = textAlign self.lineHeight = lineHeight self.paraSpacing = paraSpacing @@ -212,9 +185,30 @@ public struct CSSUserProperties: CSSProperties, Sendable { self.bodyHyphens = bodyHyphens self.ligatures = ligatures self.a11yNormalize = a11yNormalize + self.noRuby = noRuby self.overrides = overrides } + @available(*, unavailable, message: "Not available in Readium CSS v2") + public var pageMargins: Double? { + fatalError() + } + + @available(*, unavailable, message: "Not needed anymore with Readium CSS v2") + public var fontOverride: Bool? { + fatalError() + } + + @available(*, unavailable, message: "Not needed anymore with Readium CSS v2") + public var advancedSettings: Bool? { + fatalError() + } + + @available(*, unavailable, message: "Not available in Readium CSS v2") + public var typeScale: Double? { + fatalError() + } + public func cssProperties() -> [String: String?] { var props: [String: String?] = [:] // View mode @@ -222,25 +216,22 @@ public struct CSSUserProperties: CSSProperties, Sendable { // Pagination props.putCSS(name: "--USER__colCount", value: colCount) - props.putCSS(name: "--USER__pageMargins", value: pageMargins) + props.putCSS(name: "--USER__lineLength", value: lineLength) // Appearance props.putCSS(name: "--USER__appearance", value: appearance) - props.putCSS(name: "--USER__darkenImages", value: CSSFlag(name: "darken", isEnabled: darkenImages)) - props.putCSS(name: "--USER__invertImages", value: CSSFlag(name: "invert", isEnabled: invertImages)) + props.putCSS(name: "--USER__blendImages", value: CSSFlag(name: "blend", isEnabled: blendImages)) + props.putCSS(name: "--USER__darkenImages", value: darkenImages) + props.putCSS(name: "--USER__invertImages", value: invertImages) + props.putCSS(name: "--USER__invertGaiji", value: invertGaiji) // Colors props.putCSS(name: "--USER__textColor", value: textColor) props.putCSS(name: "--USER__backgroundColor", value: backgroundColor) // Typography - props.putCSS(name: "--USER__fontOverride", value: CSSFlag(name: "font", isEnabled: fontOverride)) props.putCSS(name: "--USER__fontFamily", value: fontFamily) props.putCSS(name: "--USER__fontSize", value: fontSize) - - // Advanced settings - props.putCSS(name: "--USER__advancedSettings", value: CSSFlag(name: "advanced", isEnabled: advancedSettings)) - props.putCSS(name: "--USER__typeScale", value: typeScale) props.putCSS(name: "--USER__textAlign", value: textAlign) props.putCSS(name: "--USER__lineHeight", value: lineHeight) props.putCSS(name: "--USER__paraSpacing", value: paraSpacing) @@ -252,6 +243,7 @@ public struct CSSUserProperties: CSSProperties, Sendable { // Accessibility props.putCSS(name: "--USER__a11yNormalize", value: CSSFlag(name: "a11y", isEnabled: a11yNormalize)) + props.putCSS(name: "--USER__noRuby", value: CSSFlag(name: "noRuby", isEnabled: noRuby)) props.merge(overrides, uniquingKeysWith: { _, n in n }) return props @@ -264,11 +256,14 @@ public struct CSSUserProperties: CSSProperties, Sendable { public struct CSSRSProperties: CSSProperties, Sendable { // Pagination + /// @param viewportWidth The optimal viewport width. + public var viewportWidth: CSSLength? + /// @param colWidth The optimal column’s width. It serves as a floor in our design. public var colWidth: CSSLength? /// @param colCount The optimal number of columns (depending on the columns’ width). - public var colCount: CSSColCount? + public var colCount: Int? /// @param colGap The gap between columns. You must account for this gap when scrolling. public var colGap: CSSAbsoluteLength? @@ -276,6 +271,18 @@ public struct CSSRSProperties: CSSProperties, Sendable { /// @param pageGutter The horizontal page margins. public var pageGutter: CSSAbsoluteLength? + /// @param scrollPaddingTop The default top padding for continuous scroll mode. + public var scrollPaddingTop: CSSLength? + + /// @param scrollPaddingBottom The default bottom padding for continuous scroll mode. + public var scrollPaddingBottom: CSSLength? + + /// @param scrollPaddingLeft The default left padding for continuous scroll mode. + public var scrollPaddingLeft: CSSLength? + + /// @param scrollPaddingRight The default right padding for continuous scroll mode. + public var scrollPaddingRight: CSSLength? + // Vertical rhythm /// @param flowSpacing The default vertical margins for HTML5 flow content e.g. pre, figure, @@ -290,9 +297,15 @@ public struct CSSRSProperties: CSSProperties, Sendable { // Safeguards - /// @param maxLineLength The optimal line-length. It must be set in rem in order to take :root’s + /// @param defaultLineLength The optimal line-length. It must be set in rem in order to take :root’s /// font-size as a reference, whichever the body’s font-size might be. - public var maxLineLength: CSSRemLength? + public var defaultLineLength: CSSRemLength? + + @available(*, deprecated, renamed: "defaultLineLength") + public var maxLineLength: CSSRemLength? { + get { defaultLineLength } + set { defaultLineLength = newValue } + } /// @param maxMediaWidth The max-width for media elements i.e. img, svg, audio and video. public var maxMediaWidth: CSSLength? @@ -398,14 +411,19 @@ public struct CSSRSProperties: CSSProperties, Sendable { public var overrides: [String: String?] public init( + viewportWidth: CSSLength? = nil, colWidth: CSSLength? = nil, - colCount: CSSColCount? = nil, + colCount: Int? = nil, colGap: CSSAbsoluteLength? = nil, pageGutter: CSSAbsoluteLength? = nil, + scrollPaddingTop: CSSLength? = nil, + scrollPaddingBottom: CSSLength? = nil, + scrollPaddingLeft: CSSLength? = nil, + scrollPaddingRight: CSSLength? = nil, flowSpacing: CSSLength? = nil, paraSpacing: CSSLength? = nil, paraIndent: CSSLength? = nil, - maxLineLength: CSSRemLength? = nil, + defaultLineLength: CSSRemLength? = nil, maxMediaWidth: CSSLength? = nil, maxMediaHeight: CSSLength? = nil, boxSizingMedia: CSSBoxSizing? = nil, @@ -434,14 +452,19 @@ public struct CSSRSProperties: CSSProperties, Sendable { codeFontFamily: [String]? = nil, overrides: [String: String?] = [:] ) { + self.viewportWidth = viewportWidth self.colWidth = colWidth self.colCount = colCount self.colGap = colGap self.pageGutter = pageGutter + self.scrollPaddingTop = scrollPaddingTop + self.scrollPaddingBottom = scrollPaddingBottom + self.scrollPaddingLeft = scrollPaddingLeft + self.scrollPaddingRight = scrollPaddingRight self.flowSpacing = flowSpacing self.paraSpacing = paraSpacing self.paraIndent = paraIndent - self.maxLineLength = maxLineLength + self.defaultLineLength = defaultLineLength self.maxMediaWidth = maxMediaWidth self.maxMediaHeight = maxMediaHeight self.boxSizingMedia = boxSizingMedia @@ -471,14 +494,101 @@ public struct CSSRSProperties: CSSProperties, Sendable { self.overrides = overrides } + @available(*, deprecated, message: "Use init with defaultLineLength instead") + public init( + colWidth: CSSLength? = nil, + colCount: Int? = nil, + colGap: CSSAbsoluteLength? = nil, + pageGutter: CSSAbsoluteLength? = nil, + flowSpacing: CSSLength? = nil, + paraSpacing: CSSLength? = nil, + paraIndent: CSSLength? = nil, + maxLineLength: CSSRemLength?, + maxMediaWidth: CSSLength? = nil, + maxMediaHeight: CSSLength? = nil, + boxSizingMedia: CSSBoxSizing? = nil, + boxSizingTable: CSSBoxSizing? = nil, + textColor: CSSColor? = nil, + backgroundColor: CSSColor? = nil, + selectionTextColor: CSSColor? = nil, + selectionBackgroundColor: CSSColor? = nil, + linkColor: CSSColor? = nil, + visitedColor: CSSColor? = nil, + primaryColor: CSSColor? = nil, + secondaryColor: CSSColor? = nil, + typeScale: Double? = nil, + baseFontFamily: [String]? = nil, + baseLineHeight: CSSLineHeight? = nil, + oldStyleTf: [String]? = nil, + modernTf: [String]? = nil, + sansTf: [String]? = nil, + humanistTf: [String]? = nil, + monospaceTf: [String]? = nil, + serifJa: [String]? = nil, + sansSerifJa: [String]? = nil, + serifJaV: [String]? = nil, + sansSerifJaV: [String]? = nil, + compFontFamily: [String]? = nil, + codeFontFamily: [String]? = nil, + overrides: [String: String?] = [:] + ) { + self.init( + viewportWidth: nil, + colWidth: colWidth, + colCount: colCount, + colGap: colGap, + pageGutter: pageGutter, + scrollPaddingTop: nil, + scrollPaddingBottom: nil, + scrollPaddingLeft: nil, + scrollPaddingRight: nil, + flowSpacing: flowSpacing, + paraSpacing: paraSpacing, + paraIndent: paraIndent, + defaultLineLength: maxLineLength, + maxMediaWidth: maxMediaWidth, + maxMediaHeight: maxMediaHeight, + boxSizingMedia: boxSizingMedia, + boxSizingTable: boxSizingTable, + textColor: textColor, + backgroundColor: backgroundColor, + selectionTextColor: selectionTextColor, + selectionBackgroundColor: selectionBackgroundColor, + linkColor: linkColor, + visitedColor: visitedColor, + primaryColor: primaryColor, + secondaryColor: secondaryColor, + typeScale: typeScale, + baseFontFamily: baseFontFamily, + baseLineHeight: baseLineHeight, + oldStyleTf: oldStyleTf, + modernTf: modernTf, + sansTf: sansTf, + humanistTf: humanistTf, + monospaceTf: monospaceTf, + serifJa: serifJa, + sansSerifJa: sansSerifJa, + serifJaV: serifJaV, + sansSerifJaV: sansSerifJaV, + compFontFamily: compFontFamily, + codeFontFamily: codeFontFamily, + overrides: overrides + ) + } + public func cssProperties() -> [String: String?] { var props: [String: String?] = [:] // Pagination + props.putCSS(name: "--RS__viewportWidth", value: viewportWidth) props.putCSS(name: "--RS__colWidth", value: colWidth) props.putCSS(name: "--RS__colCount", value: colCount) props.putCSS(name: "--RS__colGap", value: colGap) props.putCSS(name: "--RS__pageGutter", value: pageGutter) + props.putCSS(name: "--RS__scrollPaddingTop", value: scrollPaddingTop) + props.putCSS(name: "--RS__scrollPaddingBottom", value: scrollPaddingBottom) + props.putCSS(name: "--RS__scrollPaddingLeft", value: scrollPaddingLeft) + props.putCSS(name: "--RS__scrollPaddingRight", value: scrollPaddingRight) // Vertical rhythm props.putCSS(name: "--RS__flowSpacing", value: flowSpacing) @@ -486,7 +596,7 @@ public struct CSSRSProperties: CSSProperties, Sendable { props.putCSS(name: "--RS__paraIndent", value: paraIndent) // Safeguards - props.putCSS(name: "--RS__maxLineLength", value: maxLineLength) + props.putCSS(name: "--RS__defaultLineLength", value: defaultLineLength) props.putCSS(name: "--RS__maxMediaWidth", value: maxMediaWidth) props.putCSS(name: "--RS__maxMediaHeight", value: maxMediaHeight) props.putCSS(name: "--RS__boxSizingMedia", value: boxSizingMedia) @@ -882,6 +992,11 @@ private extension Dictionary where Key == String, Value == String? { self[name] = value?.css() } + mutating func putCSS(name: String, value: Int?) { + let css = value.map { String(format: "%d", $0) } + self[name] = css + } + mutating func putCSS(name: String, value: Double?) { let css = value.map { String(format: "%.5f", $0) } self[name] = css diff --git a/Sources/Navigator/EPUB/CSS/LayoutResolver.swift b/Sources/Navigator/EPUB/CSS/LayoutResolver.swift new file mode 100644 index 0000000000..2495fd1551 --- /dev/null +++ b/Sources/Navigator/EPUB/CSS/LayoutResolver.swift @@ -0,0 +1,203 @@ +// +// Copyright 2026 Readium Foundation. All rights reserved. +// Use of this source code is governed by the BSD-style license +// available in the top-level LICENSE file of the project. +// + +import CoreGraphics +import Foundation +import UIKit + +/// Resolves column count and line length constraints for reflowable content. +final class LayoutResolver { + /// Result of layout resolution for reflowable content. + struct Layout: Equatable, Sendable { + /// Number of columns to display. + let colCount: Int + /// Line length in points. + let lineLength: Double + } + + private let baseMinMargins: Double + private let baseOptimalLineLength: Double + private let baseMinLineLength: Double + private let baseMaxLineLength: Double + + init( + baseMinMargins: Double = 30.0, + baseOptimalLineLength: Double = 640.0, + baseMinLineLength: Double = 440.0, + baseMaxLineLength: Double = 740.0 + ) { + self.baseMinMargins = baseMinMargins + self.baseOptimalLineLength = baseOptimalLineLength + self.baseMinLineLength = baseMinLineLength + self.baseMaxLineLength = baseMaxLineLength + } + + /// Resolves the layout using `EPUBSettings`. + func layout( + settings: EPUBSettings, + systemFontScale: Double = 1.0, + viewportSize: CGSize, + safeAreaInsets: UIEdgeInsets = .zero + ) -> Layout { + layout( + scroll: settings.scroll, + verticalText: settings.verticalText, + columnCount: settings.columnCount == 0 ? nil : settings.columnCount, + optimalLineLength: settings.lineLength, + minimalLineLength: nil, + maximalLineLength: nil, + minMargins: settings.pageMargins, + systemFontScale: systemFontScale, + viewportSize: viewportSize, + safeAreaInsets: safeAreaInsets + ) + } + + /// Resolves the layout using individual layout parameters. + func layout( + scroll: Bool, + verticalText: Bool, + columnCount: Int?, + optimalLineLength: Double, + minimalLineLength: Double?, + maximalLineLength: Double?, + minMargins: Double, + systemFontScale: Double = 1.0, + viewportSize: CGSize, + safeAreaInsets: UIEdgeInsets = .zero + ) -> Layout { + let optimalLineLength = baseOptimalLineLength * optimalLineLength * systemFontScale + let minLineLength = minimalLineLength.map { baseMinLineLength * $0 * systemFontScale } + let maxLineLength = maximalLineLength.map { baseMaxLineLength * $0 * systemFontScale } + let minMargins = baseMinMargins * minMargins * systemFontScale + + let minMarginsWithInsets: Double = { + if verticalText { + return max(minMargins, max(safeAreaInsets.top, safeAreaInsets.bottom)) + } else { + return max(minMargins, max(safeAreaInsets.left, safeAreaInsets.right)) + } + }() + + if scroll { + return scrolledLayout( + viewportSize: verticalText ? viewportSize.height : viewportSize.width, + minimalMargins: minMarginsWithInsets, + maximalLineLength: maxLineLength + ) + } else { + return paginatedLayout( + viewportWidth: viewportSize.width, + requestedColCount: columnCount, + minimalMargins: minMarginsWithInsets, + optimalLineLength: optimalLineLength, + maximalLineLength: maxLineLength, + minimalLineLength: minLineLength + ) + } + } + + private func scrolledLayout( + viewportSize: Double, + minimalMargins: Double, + maximalLineLength: Double? + ) -> Layout { + let minMargins = min(minimalMargins, viewportSize) + let availableSize = viewportSize - (minMargins * 2) + let maximalLineLength = maximalLineLength.map { max($0, minMargins * 2) } + let lineLength = min(availableSize, maximalLineLength ?? availableSize) + + return Layout( + colCount: 1, + lineLength: lineLength + ) + } + + private func paginatedLayout( + viewportWidth: Double, + requestedColCount: Int?, + minimalMargins: Double, + optimalLineLength: Double, + maximalLineLength: Double?, + minimalLineLength: Double? + ) -> Layout { + guard let requestedColCount, requestedColCount > 0 else { + return paginatedLayoutAuto( + minimalPageGutter: minimalMargins, + optimalLineLength: optimalLineLength, + viewportWidth: viewportWidth, + maximalLineLength: maximalLineLength + ) + } + + return paginatedLayoutNColumns( + colCount: requestedColCount, + minimalMargins: minimalMargins, + viewportWidth: viewportWidth, + minimalLineLength: minimalLineLength, + maximalLineLength: maximalLineLength + ) + } + + private func paginatedLayoutAuto( + minimalPageGutter: Double, + optimalLineLength: Double, + viewportWidth: Double, + maximalLineLength: Double? + ) -> Layout { + let optimalLineLength = min(optimalLineLength, viewportWidth) + guard optimalLineLength > 0 else { + return Layout(colCount: 1, lineLength: 0) + } + + let minMarginWidthWithFloatingColCount = + (minimalPageGutter * 2 * (viewportWidth / optimalLineLength)) / (1 + (minimalPageGutter * 2 / optimalLineLength)) + + let floatingColCount = (viewportWidth - minMarginWidthWithFloatingColCount) / optimalLineLength + let colCount = max(1, Int(floor(floatingColCount).rounded())) + + let minMarginWidth = minimalPageGutter * 2 * Double(colCount) + let available = (viewportWidth - minMarginWidth) / Double(colCount) + let lineLength = min(available, maximalLineLength ?? available) + + return Layout(colCount: colCount, lineLength: lineLength) + } + + private func paginatedLayoutNColumns( + colCount: Int, + minimalMargins: Double, + viewportWidth: Double, + minimalLineLength: Double?, + maximalLineLength: Double? + ) -> Layout { + let minPageGutter = min(minimalMargins, viewportWidth) + let actualAvailableWidth = viewportWidth - (minPageGutter * 2 * Double(colCount)) + let minimalLineLength = minimalLineLength.map { min($0, actualAvailableWidth) } + let maximalLineLength = maximalLineLength.map { max($0, minPageGutter * 2) } + + let lineLength = actualAvailableWidth / Double(colCount) + + if let minimalLineLength, lineLength < minimalLineLength, colCount > 1 { + return paginatedLayoutNColumns( + colCount: colCount - 1, + minimalMargins: minPageGutter, + viewportWidth: viewportWidth, + minimalLineLength: minimalLineLength, + maximalLineLength: maximalLineLength + ) + } else if let maximalLineLength, lineLength > maximalLineLength { + return Layout( + colCount: colCount, + lineLength: maximalLineLength + ) + } else { + return Layout( + colCount: colCount, + lineLength: lineLength + ) + } + } +} diff --git a/Sources/Navigator/EPUB/CSS/ReadiumCSS.swift b/Sources/Navigator/EPUB/CSS/ReadiumCSS.swift index b2cc55b060..8b776f8370 100644 --- a/Sources/Navigator/EPUB/CSS/ReadiumCSS.swift +++ b/Sources/Navigator/EPUB/CSS/ReadiumCSS.swift @@ -6,6 +6,7 @@ import Foundation import ReadiumShared +import UIKit struct ReadiumCSS { var layout: CSSLayout = .init() @@ -19,18 +20,70 @@ struct ReadiumCSS { } extension ReadiumCSS { - mutating func update(with settings: EPUBSettings) { + @MainActor + mutating func update( + with settings: EPUBSettings, + resolvedLayout: LayoutResolver.Layout? = nil, + safeAreaInsets: UIEdgeInsets = .zero + ) { layout = settings.cssLayout + + var overrides: [String: String] = [ + // See https://github.com/readium/css/issues/183 + "--RS__disableOverflow": "readium-noOverflow-on", + + "font-weight": settings.fontWeight + .map { String(format: "%.0f", (Double(CSSStandardFontWeight.normal.rawValue) * $0).clamped(to: 1 ... 1000)) } + ?? "", + ] + + let baseGutter = 20.0 + let gutterString = String(format: "%.5fpx", baseGutter * settings.pageMargins) + overrides["--RS__pageGutter"] = gutterString + + if settings.scroll { + if resolvedLayout != nil { + if settings.verticalText { + overrides["--RS__scrollPaddingLeft"] = String(format: "%.5fpx", safeAreaInsets.left / settings.fontSize) + overrides["--RS__scrollPaddingRight"] = String(format: "%.5fpx", safeAreaInsets.right / settings.fontSize) + } else { + overrides["--RS__scrollPaddingTop"] = String(format: "%.5fpx", safeAreaInsets.top / settings.fontSize) + overrides["--RS__scrollPaddingBottom"] = String(format: "%.5fpx", safeAreaInsets.bottom / settings.fontSize) + } + } else { + if settings.verticalText { + overrides["--RS__scrollPaddingTop"] = gutterString + overrides["--RS__scrollPaddingBottom"] = gutterString + } else { + overrides["--RS__scrollPaddingLeft"] = gutterString + overrides["--RS__scrollPaddingRight"] = gutterString + } + } + } + + // Applies WebKit patches, ideally: + // - iOS patch for iOS and iPadOS when the site is requested as mobile. + // - iPadOSPatch for iPadOS when the site is requested as desktop. + // - Nothing if MacOS. + // + // See https://github.com/readium/css/issues/189 + switch UIDevice.current.userInterfaceIdiom { + case .pad: + overrides["--USER__iPadOSPatch"] = "readium-iPadOSPatch-on" + case .phone: + overrides["--USER__iOSPatch"] = "readium-iOSPatch-on" + default: + break + } + + let colCount: Int = resolvedLayout?.colCount ?? settings.columnCount + let lineLength: CSSLength? = resolvedLayout.map { CSSPxLength($0.lineLength / settings.fontSize) } + ?? CSSPercentLength(settings.lineLength) + userProperties = CSSUserProperties( view: settings.scroll ? .scroll : .paged, - colCount: { - switch settings.columnCount { - case .auto: return .auto - case .one: return .one - case .two: return .two - } - }(), - pageMargins: settings.pageMargins, + colCount: colCount, + lineLength: lineLength, appearance: { switch settings.theme { case .light: return nil @@ -38,15 +91,14 @@ extension ReadiumCSS { case .sepia: return .sepia } }(), - darkenImages: settings.imageFilter == .darken, - invertImages: settings.imageFilter == .invert, + blendImages: settings.blendImages, + darkenImages: settings.darkenImages.map { 1 - $0 }, + invertImages: settings.invertImages, + invertGaiji: settings.invertGaiji, textColor: settings.textColor.map { CSSIntColor($0.rawValue) }, backgroundColor: settings.backgroundColor.map { CSSIntColor($0.rawValue) }, - fontOverride: settings.fontFamily != nil || settings.textNormalization, fontFamily: settings.fontFamily.map(resolveFontStack), fontSize: CSSPercentLength(settings.fontSize), - advancedSettings: !settings.publisherStyles, - typeScale: settings.typeScale, textAlign: { switch settings.textAlign { case .justify: return .justify @@ -64,11 +116,8 @@ extension ReadiumCSS { bodyHyphens: settings.hyphens.map { $0 ? .auto : .none }, ligatures: settings.ligatures.map { $0 ? .common : .none }, a11yNormalize: settings.textNormalization, - overrides: [ - "font-weight": settings.fontWeight - .map { String(format: "%.0f", (Double(CSSStandardFontWeight.normal.rawValue) * $0).clamped(to: 1 ... 1000)) } - ?? "", - ] + noRuby: settings.noRuby, + overrides: overrides ) } diff --git a/Sources/Navigator/EPUB/EPUBNavigatorViewController.swift b/Sources/Navigator/EPUB/EPUBNavigatorViewController.swift index 454cfa7301..57749c1d32 100644 --- a/Sources/Navigator/EPUB/EPUBNavigatorViewController.swift +++ b/Sources/Navigator/EPUB/EPUBNavigatorViewController.swift @@ -426,7 +426,7 @@ open class EPUBNavigatorViewController: InputObservableViewController, // We may need to refresh the spreads in this situation. Unfortunately, // the `viewWillTransition(to:with:)` API is called before we receive // the `didBecomeActive` notification, so we cannot rely on it here. - viewModel.viewSizeWillChange(view.bounds.size) + viewModel.viewSizeWillChange(view.bounds.size, insets: view.safeAreaInsets) if needsReloadSpreadsOnActive { needsReloadSpreadsOnActive = false @@ -481,14 +481,28 @@ open class EPUBNavigatorViewController: InputObservableViewController, override open func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) - viewModel.viewSizeWillChange(view.bounds.size) + viewModel.viewSizeWillChange(view.bounds.size, insets: view.safeAreaInsets) + } + + override open func viewDidLayoutSubviews() { + super.viewDidLayoutSubviews() + if isActive { + viewModel.viewSizeWillChange(view.bounds.size, insets: view.safeAreaInsets) + } + } + + override open func viewSafeAreaInsetsDidChange() { + super.viewSafeAreaInsetsDidChange() + if isActive { + viewModel.safeAreaInsetsDidChange(view.safeAreaInsets) + } } override open func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { super.viewWillTransition(to: size, with: coordinator) if isActive { - viewModel.viewSizeWillChange(size) + viewModel.viewSizeWillChange(size, insets: view.safeAreaInsets) } } diff --git a/Sources/Navigator/EPUB/EPUBNavigatorViewModel.swift b/Sources/Navigator/EPUB/EPUBNavigatorViewModel.swift index ba6f365e7b..50678702df 100644 --- a/Sources/Navigator/EPUB/EPUBNavigatorViewModel.swift +++ b/Sources/Navigator/EPUB/EPUBNavigatorViewModel.swift @@ -281,13 +281,28 @@ enum EPUBScriptScope { private(set) var spreadEnabled: Bool = false private var viewSize: CGSize? + private var safeAreaInsets: UIEdgeInsets = .zero + private let layoutResolver = LayoutResolver() - func viewSizeWillChange(_ newSize: CGSize) { - guard viewSize != newSize else { + func viewSizeWillChange(_ newSize: CGSize, insets: UIEdgeInsets? = nil) { + let insetsChanged = insets != nil && insets != safeAreaInsets + guard viewSize != newSize || insetsChanged else { return } viewSize = newSize + if let insets = insets { + safeAreaInsets = insets + } updateSpread() + updateCSS(with: settings, commitNow: true) + } + + func safeAreaInsetsDidChange(_ insets: UIEdgeInsets) { + guard safeAreaInsets != insets else { + return + } + safeAreaInsets = insets + updateCSS(with: settings, commitNow: true) } private func updateSpread() { @@ -343,7 +358,15 @@ enum EPUBScriptScope { private func updateCSS(with settings: EPUBSettings, commitNow: Bool) { let previous = css - css.update(with: settings) + let layout = viewSize.flatMap { size -> LayoutResolver.Layout? in + guard size.width > 0, size.height > 0 else { return nil } + return layoutResolver.layout( + settings: settings, + viewportSize: size, + safeAreaInsets: safeAreaInsets + ) + } + css.update(with: settings, resolvedLayout: layout, safeAreaInsets: safeAreaInsets) // HTML resources in the cache have the CSS already injected at the time // they were first served. Evict them so that any future resource load diff --git a/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift b/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift index b70a9af8d4..f7ec2f4cb2 100644 --- a/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift +++ b/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift @@ -35,7 +35,7 @@ public extension EPUBPreferences { .flatMap { Color(hex: $0) }, columnCount: defaults.optInt(for: .columnCount) .flatMap { (columnCountValues ?? defaultColumnCountValues).getOrNil($0) } - .flatMap { ColumnCount(rawValue: $0) }, + .flatMap { Int($0) }, fontFamily: defaults.optInt(for: .fontFamily) .takeIf { $0 != 0 } // Original .flatMap { (fontFamilyValues ?? defaultFontFamilyValues).getOrNil($0) } @@ -47,7 +47,6 @@ public extension EPUBPreferences { lineHeight: defaults.optDouble(for: .lineHeight), pageMargins: defaults.optDouble(for: .pageMargins), paragraphSpacing: defaults.optDouble(for: .paragraphMargins), - publisherStyles: defaults.optBool(for: .publisherDefault), scroll: defaults.optBool(for: .scroll), // Used to be merged with column-count spread: defaults.optInt(for: .columnCount) @@ -129,7 +128,6 @@ private enum ReadiumCSSName: String { case fontOverride = "--USER__fontOverride" case appearance = "--USER__appearance" case scroll = "--USER__scroll" - case publisherDefault = "--USER__advancedSettings" case textAlignment = "--USER__textAlign" case columnCount = "--USER__colCount" case wordSpacing = "--USER__wordSpacing" diff --git a/Sources/Navigator/EPUB/Preferences/EPUBPreferences.swift b/Sources/Navigator/EPUB/Preferences/EPUBPreferences.swift index a04fef4de4..fb802d09bb 100644 --- a/Sources/Navigator/EPUB/Preferences/EPUBPreferences.swift +++ b/Sources/Navigator/EPUB/Preferences/EPUBPreferences.swift @@ -16,7 +16,9 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { /// Number of reflowable columns to display (one-page view or two-page /// spread). - public var columnCount: ColumnCount? + /// + /// Use `0` for an automatic number of columns, depending on the viewport size. + public var columnCount: Int? /// Method for fitting the content of fixed-layout resources within the /// viewport. @@ -37,8 +39,17 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { /// Enable hyphenation. public var hyphens: Bool? - /// Filter applied to images in dark theme. - public var imageFilter: ImageFilter? + /// Blends the images with the background color. + public var blendImages: Bool? + + /// Darkens images by the given percentage (0.0 to 1.0). + public var darkenImages: Double? + + /// Inverts images by the given percentage (0.0 to 1.0). + public var invertImages: Double? + + /// Inverts gaiji images by the given percentage (0.0 to 1.0). + public var invertGaiji: Double? /// Language of the publication content. public var language: Language? @@ -49,9 +60,15 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { /// Enable ligatures in Arabic. public var ligatures: Bool? + /// The maximum line length. + public var lineLength: Double? + /// Leading line height. public var lineHeight: Double? + /// Hiding/disabling ruby (furigana) annotations. + public var noRuby: Bool? + /// Indicates whether the first page should be displayed alone and centered /// instead of alongside the second page. /// @@ -67,11 +84,6 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { /// Vertical margins for paragraphs. public var paragraphSpacing: Double? - /// Indicates whether the original publisher styles should be observed. - /// - /// Many settings require this to be off. - public var publisherStyles: Bool? - /// Direction of the reading progression across resources. public var readingProgression: ReadingProgression? @@ -95,9 +107,6 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { /// Reader theme. public var theme: Theme? - /// Scale applied to all element font sizes. - public var typeScale: Double? - /// Indicates whether the text should be laid out vertically. /// /// This is used for example with CJK languages. This setting is @@ -109,22 +118,26 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { public init( backgroundColor: Color? = nil, - columnCount: ColumnCount? = nil, + columnCount: Int? = nil, fit: Fit? = nil, fontFamily: FontFamily? = nil, fontSize: Double? = nil, fontWeight: Double? = nil, hyphens: Bool? = nil, - imageFilter: ImageFilter? = nil, + blendImages: Bool? = nil, + darkenImages: Double? = nil, + invertImages: Double? = nil, + invertGaiji: Double? = nil, language: Language? = nil, letterSpacing: Double? = nil, ligatures: Bool? = nil, + lineLength: Double? = nil, lineHeight: Double? = nil, + noRuby: Bool? = nil, offsetFirstPage: Bool? = nil, pageMargins: Double? = nil, paragraphIndent: Double? = nil, paragraphSpacing: Double? = nil, - publisherStyles: Bool? = nil, readingProgression: ReadingProgression? = nil, scroll: Bool? = nil, spread: Spread? = nil, @@ -132,7 +145,6 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { textColor: Color? = nil, textNormalization: Bool? = nil, theme: Theme? = nil, - typeScale: Double? = nil, verticalText: Bool? = nil, wordSpacing: Double? = nil ) { @@ -143,16 +155,20 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { self.fontSize = fontSize.map { max($0, 0) } self.fontWeight = fontWeight?.clamped(to: 0.0 ... 2.5) self.hyphens = hyphens - self.imageFilter = imageFilter + self.blendImages = blendImages + self.darkenImages = darkenImages + self.invertImages = invertImages + self.invertGaiji = invertGaiji self.language = language self.letterSpacing = letterSpacing.map { max($0, 0) } self.ligatures = ligatures + self.lineLength = lineLength.map { max($0, 0) } self.lineHeight = lineHeight + self.noRuby = noRuby self.offsetFirstPage = offsetFirstPage self.pageMargins = pageMargins.map { max($0, 0) } self.paragraphIndent = paragraphIndent self.paragraphSpacing = paragraphSpacing.map { max($0, 0) } - self.publisherStyles = publisherStyles self.readingProgression = readingProgression self.scroll = scroll self.spread = [nil, .never, .always].contains(spread) ? spread : nil @@ -160,7 +176,6 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { self.textColor = textColor self.textNormalization = textNormalization self.theme = theme - self.typeScale = typeScale.map { max($0, 0) } self.verticalText = verticalText self.wordSpacing = wordSpacing.map { max($0, 0) } } @@ -174,16 +189,20 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { fontSize: other.fontSize ?? fontSize, fontWeight: other.fontWeight ?? fontWeight, hyphens: other.hyphens ?? hyphens, - imageFilter: other.imageFilter ?? imageFilter, + blendImages: other.blendImages ?? blendImages, + darkenImages: other.darkenImages ?? darkenImages, + invertImages: other.invertImages ?? invertImages, + invertGaiji: other.invertGaiji ?? invertGaiji, language: other.language ?? language, letterSpacing: other.letterSpacing ?? letterSpacing, ligatures: other.ligatures ?? ligatures, + lineLength: other.lineLength ?? lineLength, lineHeight: other.lineHeight ?? lineHeight, + noRuby: other.noRuby ?? noRuby, offsetFirstPage: other.offsetFirstPage ?? offsetFirstPage, pageMargins: other.pageMargins ?? pageMargins, paragraphIndent: other.paragraphIndent ?? paragraphIndent, paragraphSpacing: other.paragraphSpacing ?? paragraphSpacing, - publisherStyles: other.publisherStyles ?? publisherStyles, readingProgression: other.readingProgression ?? readingProgression, scroll: other.scroll ?? scroll, spread: other.spread ?? spread, @@ -191,12 +210,21 @@ public struct EPUBPreferences: ConfigurablePreferences, Sendable { textColor: other.textColor ?? textColor, textNormalization: other.textNormalization ?? textNormalization, theme: other.theme ?? theme, - typeScale: other.typeScale ?? typeScale, verticalText: other.verticalText ?? verticalText, wordSpacing: other.wordSpacing ?? wordSpacing ) } + @available(*, unavailable, message: "Not needed anymore with Readium CSS v2, user settings are applied as soon as they are set") + public var publisherStyles: Bool? { + fatalError() + } + + @available(*, unavailable, message: "Not available in Readium CSS v2") + public var typeScale: Double? { + fatalError() + } + /// Returns a new `EPUBPreferences` with the publication-specific preferences /// removed. public func filterSharedPreferences() -> EPUBPreferences { diff --git a/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift b/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift index e58023964f..39c21f18f7 100644 --- a/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift +++ b/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift @@ -91,16 +91,18 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = - enumPreference( + public lazy var columnCount: AnyRangePreference = + rangePreference( preference: \.columnCount, setting: \.columnCount, - defaultEffectiveValue: defaults.columnCount ?? .auto, + defaultEffectiveValue: defaults.columnCount ?? 1, isEffective: { [layouts] in layouts.contains(.reflowable) && !$0.settings.scroll }, - supportedValues: [.auto, .one, .two] + supportedRange: 1 ... 9, + progressionStrategy: .increment(1), + format: { String(format: "%d", $0) } ) /// Method for fitting the content within the viewport. @@ -166,7 +168,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = preference( @@ -176,27 +177,64 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = - enumPreference( - preference: \.imageFilter, - setting: \.imageFilter, - isEffective: { [layouts] in - layouts.contains(.reflowable) - && $0.settings.theme == .dark - }, - supportedValues: [nil, .darken, .invert] + /// Blends the images with the background color. + public lazy var blendImages: AnyPreference = + preference( + preference: \.blendImages, + setting: \.blendImages, + isEffective: { [defaultLayout] _ in defaultLayout == .reflowable } + ) + + /// Darkens images by the given percentage. + public lazy var darkenImages: AnyRangePreference = + rangePreference( + preference: \.darkenImages, + effectiveValue: { $0.settings.darkenImages ?? 0 }, + defaultEffectiveValue: 0, + isEffective: { [defaultLayout] _ in defaultLayout == .reflowable }, + supportedRange: 0.0 ... 1.0, + progressionStrategy: .increment(0.1), + format: \.percentageString ) + /// Inverts gaiji images. + public lazy var invertGaiji: AnyPreference = + rangePreference( + preference: \.invertGaiji, + effectiveValue: { $0.settings.invertGaiji ?? 0 }, + defaultEffectiveValue: 0, + isEffective: { [defaultLayout] _ in defaultLayout == .reflowable }, + supportedRange: 0.0 ... 1.0, + progressionStrategy: .increment(0.1), + format: \.percentageString + ) + .map( + from: { $0 > 0 }, + to: { $0 ? 1.0 : 0.0 } + ) + .eraseToAnyPreference() + + /// Inverts the color of images. + public lazy var invertImages: AnyPreference = + rangePreference( + preference: \.invertImages, + effectiveValue: { $0.settings.invertImages ?? 0 }, + defaultEffectiveValue: 0, + isEffective: { [defaultLayout] _ in defaultLayout == .reflowable }, + supportedRange: 0.0 ... 1.0, + progressionStrategy: .increment(0.1), + format: \.percentageString + ) + .map( + from: { $0 > 0 }, + to: { $0 ? 1.0 : 0.0 } + ) + .eraseToAnyPreference() + /// Language of the publication content. /// /// This has an impact on the resolved layout (e.g. LTR, RTL). @@ -211,7 +249,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = rangePreference( @@ -221,7 +258,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = preference( @@ -243,7 +278,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = rangePreference( preference: \.lineHeight, @@ -260,7 +293,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = + preference( + preference: \.noRuby, + setting: \.noRuby, + defaultEffectiveValue: defaults.noRuby ?? false, + isEffective: { [defaultLayout] in + defaultLayout == .reflowable + && [.cjkHorizontal, .cjkVertical].contains($0.settings.cssLayout.stylesheets) + } + ) + /// Indicates whether the first page should be displayed alone and centered /// instead of alongside the second page. /// @@ -287,6 +335,18 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = + rangePreference( + preference: \.lineLength, + setting: \.lineLength, + defaultEffectiveValue: defaults.lineLength ?? 1.0, + isEffective: { _ in true }, + supportedRange: 0.0 ... 1.0, + progressionStrategy: .increment(0.1), + format: \.percentageString + ) + /// Factor applied to horizontal margins. Default to 1. /// /// Only effective when the publication contains reflowable resources. @@ -305,7 +365,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = rangePreference( @@ -315,7 +374,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = rangePreference( preference: \.paragraphSpacing, @@ -335,7 +392,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = - preference( - preference: \.publisherStyles, - setting: \.publisherStyles, - defaultEffectiveValue: defaults.publisherStyles ?? true, - isEffective: { [layouts] _ in layouts.contains(.reflowable) } - ) + @available(*, unavailable, message: "Not needed anymore with Readium CSS v2, user settings are applied as soon as they are set") + public var publisherStyles: AnyPreference { + fatalError() + } + + @available(*, unavailable, message: "Not available in Readium CSS v2") + public var typeScale: AnyRangePreference { + fatalError() + } /// Direction of the reading progression across resources. /// @@ -398,7 +452,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = enumPreference( @@ -407,7 +460,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = - rangePreference( - preference: \.typeScale, - effectiveValue: { $0.settings.typeScale }, - defaultEffectiveValue: defaults.typeScale ?? 1.2, - isEffective: { [layouts] in - layouts.contains(.reflowable) - && !$0.settings.publisherStyles - && $0.preferences.typeScale != nil - }, - supportedRange: 1.0 ... 2.0, - progressionStrategy: .steps(1.0, 1.067, 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, 1.618), - format: { $0.formatDecimal(maximumFractionDigits: 5) } - ) - /// Indicates whether the text should be laid out vertically. This is used /// for example with CJK languages. This setting is automatically derived /// from the language if no preference is given. @@ -500,7 +532,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor=16.0.0} dev: true + /@readium/css@2.0.5: + resolution: {integrity: sha512-rQWeDFSS9UfRTFFdWIhlko0jtkL9dOfNTqFjgMumlguromsyHC9/lGmbWDde7deEeE5ns+yBOSGKixMU0wqZ4A==} + dev: true + /@sinclair/typebox@0.34.52: resolution: {integrity: sha512-XiMQh7qqVlxZzcVD+kkGMNGMzcTrDMLWI7S4x7z1MkCkbDPrekpZXEUK0eZqZFMuHQg2a2DZOcDIh9o5v3Gonw==} dev: true @@ -1860,6 +1876,13 @@ packages: '@babel/types': 7.29.7 dev: true + /@types/clean-css@4.2.11: + resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==} + dependencies: + '@types/node': 26.1.2 + source-map: 0.6.1 + dev: true + /@types/estree@1.0.9: resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==} dev: true @@ -2220,7 +2243,7 @@ packages: webpack: 5.x.x webpack-cli: 5.x.x dependencies: - webpack: 5.107.2(webpack-cli@5.1.4) + webpack: 5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.107.2) dev: true @@ -2231,7 +2254,7 @@ packages: webpack: 5.x.x webpack-cli: 5.x.x dependencies: - webpack: 5.107.2(webpack-cli@5.1.4) + webpack: 5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.107.2) dev: true @@ -2246,7 +2269,7 @@ packages: webpack-dev-server: optional: true dependencies: - webpack: 5.107.2(webpack-cli@5.1.4) + webpack: 5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.107.2) dev: true @@ -2470,7 +2493,7 @@ packages: loader-utils: 2.0.4 make-dir: 3.1.0 schema-utils: 2.7.1 - webpack: 5.107.2(webpack-cli@5.1.4) + webpack: 5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4) dev: true /babel-plugin-istanbul@7.0.1: @@ -2700,6 +2723,13 @@ packages: resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==} dev: true + /clean-css@5.3.3: + resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==} + engines: {node: '>= 10.0'} + dependencies: + source-map: 0.6.1 + dev: true + /cliui@8.0.1: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} engines: {node: '>=12'} @@ -2773,6 +2803,20 @@ packages: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} dev: true + /copy-webpack-plugin@14.0.0(webpack@5.107.2): + resolution: {integrity: sha512-3JLW90aBGeaTLpM7mYQKpnVdgsUZRExY55giiZgLuX/xTQRUs1dOCwbBnWnvY6Q6rfZoXMNwzOQJCSZPppfqXA==} + engines: {node: '>= 20.9.0'} + peerDependencies: + webpack: ^5.1.0 + dependencies: + glob-parent: 6.0.2 + normalize-path: 3.0.0 + schema-utils: 4.3.3 + serialize-javascript: 7.1.0 + tinyglobby: 0.2.17 + webpack: 5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4) + dev: true + /core-js-compat@3.49.0: resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==} dependencies: @@ -3281,6 +3325,18 @@ packages: bser: 2.1.1 dev: true + /fdir@6.5.0(picomatch@4.0.5): + resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} + engines: {node: '>=12.0.0'} + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + dependencies: + picomatch: 4.0.5 + dev: true + /file-entry-cache@6.0.1: resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==} engines: {node: ^10.12.0 || >=12.0.0} @@ -3441,6 +3497,13 @@ packages: is-glob: 4.0.3 dev: true + /glob-parent@6.0.2: + resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} + engines: {node: '>=10.13.0'} + dependencies: + is-glob: 4.0.3 + dev: true + /glob-to-regexp@0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} dev: true @@ -5040,6 +5103,11 @@ packages: hasBin: true dev: true + /serialize-javascript@7.1.0: + resolution: {integrity: sha512-RNEqWOyhhUQYN9V1GfHwu9AR/g+NTciH6Z5u3/no6X3/w+04J2lVDL+svFQVXgXrEGBMG2puMVN3gq2SNGuTGw==} + engines: {node: '>=20.0.0'} + dev: true + /set-function-length@1.2.2: resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} engines: {node: '>= 0.4'} @@ -5351,7 +5419,7 @@ packages: engines: {node: '>=6'} dev: true - /terser-webpack-plugin@5.6.1(webpack@5.107.2): + /terser-webpack-plugin@5.6.1(clean-css@5.3.3)(webpack@5.107.2): resolution: {integrity: sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -5395,10 +5463,11 @@ packages: optional: true dependencies: '@jridgewell/trace-mapping': 0.3.31 + clean-css: 5.3.3 jest-worker: 27.5.1 schema-utils: 4.3.3 terser: 5.48.0 - webpack: 5.107.2(webpack-cli@5.1.4) + webpack: 5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4) dev: true /terser@5.48.0: @@ -5425,6 +5494,14 @@ packages: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true + /tinyglobby@0.2.17: + resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==} + engines: {node: '>=12.0.0'} + dependencies: + fdir: 6.5.0(picomatch@4.0.5) + picomatch: 4.0.5 + dev: true + /tldts-core@6.1.86: resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==} dev: true @@ -5738,7 +5815,7 @@ packages: import-local: 3.2.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.107.2(webpack-cli@5.1.4) + webpack: 5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4) webpack-merge: 5.10.0 dev: true @@ -5756,7 +5833,7 @@ packages: engines: {node: '>=10.13.0'} dev: true - /webpack@5.107.2(webpack-cli@5.1.4): + /webpack@5.107.2(clean-css@5.3.3)(webpack-cli@5.1.4): resolution: {integrity: sha512-v7RhXaJbpMlV0D7hC7lb2EbnxkoeUqf9qhKr6lozx3Q48pmFrqqNRmZFUEGmi7pSwm6fCQ2H1IjvCkHqdpVdjQ==} engines: {node: '>=10.13.0'} hasBin: true @@ -5786,7 +5863,7 @@ packages: neo-async: 2.6.2 schema-utils: 4.3.3 tapable: 2.3.3 - terser-webpack-plugin: 5.6.1(webpack@5.107.2) + terser-webpack-plugin: 5.6.1(clean-css@5.3.3)(webpack@5.107.2) watchpack: 2.5.2 webpack-cli: 5.1.4(webpack@5.107.2) webpack-sources: 3.5.0 diff --git a/Sources/Navigator/EPUB/Scripts/webpack.config.js b/Sources/Navigator/EPUB/Scripts/webpack.config.js index 1ab9985af0..74edc99511 100644 --- a/Sources/Navigator/EPUB/Scripts/webpack.config.js +++ b/Sources/Navigator/EPUB/Scripts/webpack.config.js @@ -1,34 +1,65 @@ const path = require("path"); +const CopyPlugin = require("copy-webpack-plugin"); +const CleanCSS = require("clean-css"); -module.exports = { - mode: "production", - devtool: "source-map", - // devtool: "eval-source-map", - entry: { - reflowable: "./src/index-reflowable.js", - fixed: "./src/index-fixed.js", - "fixed-wrapper-one": "./src/index-fixed-wrapper-one.js", - "fixed-wrapper-two": "./src/index-fixed-wrapper-two.js", - }, - output: { - filename: "readium-[name].js", - path: path.resolve(__dirname, "../Assets/Static/scripts"), - }, - resolve: { - extensions: [".ts", "..."], - }, - module: { - rules: [ - { - test: /\.m?[jt]s$/, - exclude: /node_modules/, - use: { - loader: "babel-loader", - options: { - presets: ["@babel/preset-env", "@babel/preset-typescript"], +module.exports = (env = {}) => { + const shouldMinify = + process.env.MINIFY_CSS === "true" || + process.env.MINIFY_CSS === "1" || + env.minify === true || + env.minify === "true"; + + const cleanCSS = shouldMinify ? new CleanCSS() : null; + + return { + mode: "production", + devtool: "source-map", + // devtool: "eval-source-map", + entry: { + reflowable: "./src/index-reflowable.js", + fixed: "./src/index-fixed.js", + "fixed-wrapper-one": "./src/index-fixed-wrapper-one.js", + "fixed-wrapper-two": "./src/index-fixed-wrapper-two.js", + }, + output: { + filename: "readium-[name].js", + path: path.resolve(__dirname, "../Assets/Static/scripts"), + }, + resolve: { + extensions: [".ts", "..."], + }, + plugins: [ + new CopyPlugin({ + patterns: [ + { + from: path.resolve(__dirname, "node_modules/@readium/css/css/dist"), + to: path.resolve(__dirname, "../Assets/Static/readium-css"), + globOptions: { + ignore: ["**/fonts/**"], + }, + transform(content, absoluteFrom) { + if (shouldMinify && absoluteFrom.endsWith(".css")) { + return cleanCSS.minify(content).styles; + } + return content; + }, }, - }, - }, + ], + }), ], - }, + module: { + rules: [ + { + test: /\.m?[jt]s$/, + exclude: /node_modules/, + use: { + loader: "babel-loader", + options: { + presets: ["@babel/preset-env", "@babel/preset-typescript"], + }, + }, + }, + ], + }, + }; }; diff --git a/Sources/Navigator/Preferences/Types.swift b/Sources/Navigator/Preferences/Types.swift index a91d145cdf..f9756b82c3 100644 --- a/Sources/Navigator/Preferences/Types.swift +++ b/Sources/Navigator/Preferences/Types.swift @@ -92,19 +92,6 @@ public enum Theme: String, Codable, Hashable, Sendable { private static let sepiaBackgroundColor = Color(hex: "#faf4e8")! } -/// Number of columns displayed in a reflowable document. -public enum ColumnCount: String, Codable, Hashable, Sendable { - case auto - case one = "1" - case two = "2" -} - -/// Filter used to render images in a reflowable document. -public enum ImageFilter: String, Codable, Hashable, Sendable { - case darken - case invert -} - /// Text alignment in a reflowable document. public enum TextAlignment: String, Codable, Hashable, Sendable { /// Align the text in the center of the page. diff --git a/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift b/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift index 4af7ec6f1b..7dfd921677 100644 --- a/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift +++ b/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift @@ -110,22 +110,24 @@ struct UserPreferences< fontSize: editor.fontSize, fontWeight: editor.fontWeight, hyphens: editor.hyphens, - imageFilter: editor.imageFilter, + blendImages: editor.blendImages, + darkenImages: editor.darkenImages, + invertImages: editor.invertImages, + invertGaiji: editor.invertGaiji, language: editor.language, letterSpacing: editor.letterSpacing, ligatures: editor.ligatures, lineHeight: editor.lineHeight, + noRuby: editor.noRuby, pageMargins: editor.pageMargins, paragraphIndent: editor.paragraphIndent, paragraphSpacing: editor.paragraphSpacing, - publisherStyles: editor.publisherStyles, readingProgression: editor.readingProgression, scroll: editor.scroll, textAlign: editor.textAlign, textColor: editor.textColor, textNormalization: editor.textNormalization, theme: editor.theme, - typeScale: editor.typeScale, verticalText: editor.verticalText, wordSpacing: editor.wordSpacing ) @@ -193,29 +195,27 @@ struct UserPreferences< spread: AnyEnumPreference? = nil, visibleScrollbar: AnyPreference? = nil ) -> some View { - if language != nil || readingProgression != nil { - Section { - if let language = language { - languageRow( - title: "Language", - preference: language, - commit: commit - ) - } + NonEmptySection { + if let language = language { + languageRow( + title: "Language", + preference: language, + commit: commit + ) + } - if let readingProgression = readingProgression { - pickerRow( - title: "Reading progression", - preference: readingProgression, - commit: commit, - formatValue: { v in - switch v { - case .ltr: return "LTR" - case .rtl: return "RTL" - } + if let readingProgression = readingProgression { + pickerRow( + title: "Reading progression", + preference: readingProgression, + commit: commit, + formatValue: { v in + switch v { + case .ltr: return "LTR" + case .rtl: return "RTL" } - ) - } + } + ) } } @@ -320,299 +320,290 @@ struct UserPreferences< @ViewBuilder func reflowableUserPreferences( commit: @escaping () -> Void, backgroundColor: AnyPreference? = nil, - columnCount: AnyEnumPreference? = nil, + columnCount: AnyRangePreference? = nil, fontFamily: AnyPreference? = nil, fontSize: AnyRangePreference? = nil, fontWeight: AnyRangePreference? = nil, hyphens: AnyPreference? = nil, - imageFilter: AnyEnumPreference? = nil, + blendImages: AnyPreference? = nil, + darkenImages: AnyRangePreference? = nil, + invertImages: AnyPreference? = nil, + invertGaiji: AnyPreference? = nil, language: AnyPreference? = nil, letterSpacing: AnyRangePreference? = nil, ligatures: AnyPreference? = nil, lineHeight: AnyRangePreference? = nil, + noRuby: AnyPreference? = nil, pageMargins: AnyRangePreference? = nil, paragraphIndent: AnyRangePreference? = nil, paragraphSpacing: AnyRangePreference? = nil, - publisherStyles: AnyPreference? = nil, readingProgression: AnyEnumPreference? = nil, scroll: AnyPreference? = nil, textAlign: AnyEnumPreference? = nil, textColor: AnyPreference? = nil, textNormalization: AnyPreference? = nil, theme: AnyEnumPreference? = nil, - typeScale: AnyRangePreference? = nil, verticalText: AnyPreference? = nil, wordSpacing: AnyRangePreference? = nil ) -> some View { - if language != nil || readingProgression != nil || verticalText != nil { - Section { - if let language = language { - languageRow( - title: "Language", - preference: language, - commit: commit - ) - } + NonEmptySection { + if let language = language { + languageRow( + title: "Language", + preference: language, + commit: commit + ) + } - if let readingProgression = readingProgression { - pickerRow( - title: "Reading progression", - preference: readingProgression, - commit: commit, - formatValue: { v in - switch v { - case .ltr: return "LTR" - case .rtl: return "RTL" - } + if let readingProgression = readingProgression { + pickerRow( + title: "Reading progression", + preference: readingProgression, + commit: commit, + formatValue: { v in + switch v { + case .ltr: return "LTR" + case .rtl: return "RTL" } - ) - } + } + ) + } - if let verticalText = verticalText { - toggleRow( - title: "Vertical text", - preference: verticalText, - commit: commit - ) - } + if let verticalText = verticalText { + toggleRow( + title: "Vertical text", + preference: verticalText, + commit: commit + ) + } + + if let noRuby = noRuby { + toggleRow( + title: "Hide ruby annotations", + preference: noRuby, + commit: commit + ) } } - if scroll != nil || columnCount != nil || pageMargins != nil { - Section { - if let scroll = scroll { - toggleRow( - title: "Scroll", - preference: scroll, - commit: commit - ) - } + NonEmptySection { + if let scroll = scroll { + toggleRow( + title: "Scroll", + preference: scroll, + commit: commit + ) + } - if let columnCount = columnCount { - pickerRow( - title: "Columns", - preference: columnCount, - commit: commit, - formatValue: { v in - switch v { - case .auto: return "Auto" - case .one: return "1" - case .two: return "2" - } - } - ) - } + if let columnCount = columnCount { + stepperRow( + title: "Columns", + preference: columnCount, + commit: commit + ) + } - if let pageMargins = pageMargins { - stepperRow( - title: "Page margins", - preference: pageMargins, - commit: commit - ) - } + if let pageMargins = pageMargins { + stepperRow( + title: "Page margins", + preference: pageMargins, + commit: commit + ) } } - if theme != nil || imageFilter != nil || textColor != nil || backgroundColor != nil { - Section { - if let theme = theme { - pickerRow( - title: "Theme", - preference: theme, - commit: commit, - formatValue: { v in - switch v { - case .light: return "Light" - case .dark: return "Dark" - case .sepia: return "Sepia" - } + NonEmptySection { + if let theme = theme { + pickerRow( + title: "Theme", + preference: theme, + commit: commit, + formatValue: { v in + switch v { + case .light: return "Light" + case .dark: return "Dark" + case .sepia: return "Sepia" } - ) - } + } + ) + } - if let imageFilter = imageFilter { - pickerRow( - title: "Image filter", - preference: imageFilter, - commit: commit, - formatValue: { v in - switch v { - case nil: return "None" - case .darken: return "Darken colors" - case .invert: return "Invert colors" - } - } - ) - } + if let blendImages = blendImages { + toggleRow( + title: "Blend Images", + preference: blendImages.map(from: { $0 ?? false }, to: { $0 }).eraseToAnyPreference(), + commit: commit + ) + } - if let textColor = textColor { - colorRow( - title: "Text color", - preference: textColor, - commit: commit - ) - } + if let darkenImages = darkenImages { + stepperRow( + title: "Darken Images", + preference: darkenImages, + commit: commit + ) + } - if let backgroundColor = backgroundColor { - colorRow( - title: "Background color", - preference: backgroundColor, - commit: commit - ) - } + if let invertImages = invertImages { + toggleRow( + title: "Invert Images", + preference: invertImages, + commit: commit + ) + } + + if let invertGaiji = invertGaiji { + toggleRow( + title: "Invert Gaiji", + preference: invertGaiji, + commit: commit + ) + } + + if let textColor = textColor { + colorRow( + title: "Text color", + preference: textColor, + commit: commit + ) + } + + if let backgroundColor = backgroundColor { + colorRow( + title: "Background color", + preference: backgroundColor, + commit: commit + ) } } - if fontFamily != nil || fontSize != nil || fontWeight != nil || textNormalization != nil { - Section { - if let fontFamily = fontFamily { - pickerRow( - title: "Typeface", - preference: fontFamily - .with(supportedValues: [ - nil, - .sansSerif, - .iaWriterDuospace, - .accessibleDfA, - .openDyslexic, - .literata, - ]) - .eraseToAnyPreference(), - commit: commit, - formatValue: { ff in - if let ff = ff { - switch ff { - case .sansSerif: return "Sans serif" - default: return ff.rawValue - } - } else { - return "Original" + NonEmptySection { + if let fontFamily = fontFamily { + pickerRow( + title: "Typeface", + preference: fontFamily + .with(supportedValues: [ + nil, + .sansSerif, + .iaWriterDuospace, + .accessibleDfA, + .openDyslexic, + .literata, + ]) + .eraseToAnyPreference(), + commit: commit, + formatValue: { ff in + if let ff = ff { + switch ff { + case .sansSerif: return "Sans serif" + default: return ff.rawValue } + } else { + return "Original" } - ) - } - - if let fontSize = fontSize { - stepperRow( - title: "Font size", - preference: fontSize, - commit: commit - ) - } + } + ) + } - if let fontWeight = fontWeight { - stepperRow( - title: "Font weight", - preference: fontWeight, - commit: commit - ) - } + if let fontSize = fontSize { + stepperRow( + title: "Font size", + preference: fontSize, + commit: commit + ) + } - if let textNormalization = textNormalization { - toggleRow( - title: "Text normalization", - preference: textNormalization, - commit: commit - ) - } + if let fontWeight = fontWeight { + stepperRow( + title: "Font weight", + preference: fontWeight, + commit: commit + ) } - } - if let publisherStyles = publisherStyles { - Section { + if let textNormalization = textNormalization { toggleRow( - title: "Publisher styles", - preference: publisherStyles, + title: "Text normalization", + preference: textNormalization, commit: commit ) + } + } - // The following settings all require the publisher styles to - // be disabled for EPUB. To simplify the interface, they are - // hidden when the publisher styles are on. - if !publisherStyles.effectiveValue { - if let textAlign = textAlign { - pickerRow( - title: "Text alignment", - preference: textAlign, - commit: commit, - formatValue: { v in - switch v { - case nil: return "Default" - case .center: return "Center" - case .left: return "Left" - case .right: return "Right" - case .justify: return "Justify" - case .start: return "Start" - case .end: return "End" - } - } - ) - } - - if let typeScale = typeScale { - stepperRow( - title: "Type scale", - preference: typeScale, - commit: commit - ) + NonEmptySection { + if let textAlign = textAlign { + pickerRow( + title: "Text alignment", + preference: textAlign, + commit: commit, + formatValue: { v in + switch v { + case nil: return "Default" + case .center: return "Center" + case .left: return "Left" + case .right: return "Right" + case .justify: return "Justify" + case .start: return "Start" + case .end: return "End" + } } + ) + } - if let lineHeight = lineHeight { - stepperRow( - title: "Line height", - preference: lineHeight, - commit: commit - ) - } + if let lineHeight = lineHeight { + stepperRow( + title: "Line height", + preference: lineHeight, + commit: commit + ) + } - if let paragraphIndent = paragraphIndent { - stepperRow( - title: "Paragraph indent", - preference: paragraphIndent, - commit: commit - ) - } + if let paragraphIndent = paragraphIndent { + stepperRow( + title: "Paragraph indent", + preference: paragraphIndent, + commit: commit + ) + } - if let paragraphSpacing = paragraphSpacing { - stepperRow( - title: "Paragraph spacing", - preference: paragraphSpacing, - commit: commit - ) - } + if let paragraphSpacing = paragraphSpacing { + stepperRow( + title: "Paragraph spacing", + preference: paragraphSpacing, + commit: commit + ) + } - if let wordSpacing = wordSpacing { - stepperRow( - title: "Word spacing", - preference: wordSpacing, - commit: commit - ) - } + if let wordSpacing = wordSpacing { + stepperRow( + title: "Word spacing", + preference: wordSpacing, + commit: commit + ) + } - if let letterSpacing = letterSpacing { - stepperRow( - title: "Letter spacing", - preference: letterSpacing, - commit: commit - ) - } + if let letterSpacing = letterSpacing { + stepperRow( + title: "Letter spacing", + preference: letterSpacing, + commit: commit + ) + } - if let hyphens = hyphens { - toggleRow( - title: "Hyphens", - preference: hyphens, - commit: commit - ) - } + if let hyphens = hyphens { + toggleRow( + title: "Hyphens", + preference: hyphens, + commit: commit + ) + } - if let ligatures = ligatures { - toggleRow( - title: "Ligatures", - preference: ligatures, - commit: commit - ) - } - } + if let ligatures = ligatures { + toggleRow( + title: "Ligatures", + preference: ligatures, + commit: commit + ) } } } @@ -858,3 +849,17 @@ extension Preference { ) } } + +/// A `Section` which is not rendered when its content is empty, for example +/// when none of its optional preference rows are available. +struct NonEmptySection: View { + @ViewBuilder let content: Content + + var body: some View { + Group(subviews: content) { subviews in + if !subviews.isEmpty { + Section { subviews } + } + } + } +} diff --git a/Tests/NavigatorTests/EPUB/CSS/CSSLayoutTests.swift b/Tests/NavigatorTests/EPUB/CSS/CSSLayoutTests.swift index 12a9b13aa9..ee8a42ce24 100644 --- a/Tests/NavigatorTests/EPUB/CSS/CSSLayoutTests.swift +++ b/Tests/NavigatorTests/EPUB/CSS/CSSLayoutTests.swift @@ -6,13 +6,13 @@ @testable import ReadiumNavigator import ReadiumShared -import XCTest +import Testing -class CSSLayoutTests: XCTestCase { - func testComputeHTMLDiStylesheets() { - XCTAssertEqual(CSSLayout.Stylesheets.default.htmlDir, .ltr) - XCTAssertEqual(CSSLayout.Stylesheets.rtl.htmlDir, .rtl) - XCTAssertEqual(CSSLayout.Stylesheets.cjkVertical.htmlDir, .unspecified) - XCTAssertEqual(CSSLayout.Stylesheets.cjkHorizontal.htmlDir, .ltr) +struct CSSLayoutTests { + @Test func computeHTMLDiStylesheets() { + #expect(CSSLayout.Stylesheets.default.htmlDir == .ltr) + #expect(CSSLayout.Stylesheets.rtl.htmlDir == .rtl) + #expect(CSSLayout.Stylesheets.cjkVertical.htmlDir == .unspecified) + #expect(CSSLayout.Stylesheets.cjkHorizontal.htmlDir == .ltr) } } diff --git a/Tests/NavigatorTests/EPUB/CSS/CSSRSPropertiesTests.swift b/Tests/NavigatorTests/EPUB/CSS/CSSRSPropertiesTests.swift index f77423b170..e5f08ede05 100644 --- a/Tests/NavigatorTests/EPUB/CSS/CSSRSPropertiesTests.swift +++ b/Tests/NavigatorTests/EPUB/CSS/CSSRSPropertiesTests.swift @@ -6,21 +6,25 @@ @testable import ReadiumNavigator import ReadiumShared -import XCTest +import Testing -class CSSRSPropertiesTests: XCTestCase { - func convertEmptyPropertiesToCSSProperties() { - XCTAssertEqual( - CSSRSProperties().cssProperties(), - [ +struct CSSRSPropertiesTests { + @Test func convertEmptyPropertiesToCSSProperties() { + #expect( + CSSRSProperties().cssProperties() == [ + "--RS__viewportWidth": nil, "--RS__colWidth": nil, "--RS__colCount": nil, "--RS__colGap": nil, "--RS__pageGutter": nil, + "--RS__scrollPaddingTop": nil, + "--RS__scrollPaddingBottom": nil, + "--RS__scrollPaddingLeft": nil, + "--RS__scrollPaddingRight": nil, "--RS__flowSpacing": nil, "--RS__paraSpacing": nil, "--RS__paraIndent": nil, - "--RS__maxLineLength": nil, + "--RS__defaultLineLength": nil, "--RS__maxMediaWidth": nil, "--RS__maxMediaHeight": nil, "--RS__boxSizingMedia": nil, @@ -51,30 +55,35 @@ class CSSRSPropertiesTests: XCTestCase { ) } - func testOverrideProperties() { + @Test func overrideProperties() { let props = CSSRSProperties( - colCount: .one, + colCount: 1, overrides: [ "--RS__colCount": "2", "--RS__custom": "value", ] ).cssProperties() - XCTAssertEqual(props["--RS__colCount"], "2") - XCTAssertEqual(props["--RS__custom"], "value") + #expect(props["--RS__colCount"] == "2") + #expect(props["--RS__custom"] == "value") } - func testConvertFullPropertiesToCSSProperties() { - XCTAssertEqual( + @Test func convertFullPropertiesToCSSProperties() { + #expect( CSSRSProperties( + viewportWidth: CSSPercentLength(1.0), colWidth: CSSCmLength(1.2), - colCount: .two, + colCount: 2, colGap: CSSPtLength(2.3), pageGutter: CSSPcLength(3.4), + scrollPaddingTop: CSSPxLength(10), + scrollPaddingBottom: CSSPxLength(20), + scrollPaddingLeft: CSSPxLength(15), + scrollPaddingRight: CSSPxLength(25), flowSpacing: CSSMmLength(4.5), paraSpacing: CSSPxLength(5.6), paraIndent: CSSEmLength(6.7), - maxLineLength: CSSRemLength(7.8), + defaultLineLength: CSSRemLength(7.8), maxMediaWidth: CSSPercentLength(0.5), maxMediaHeight: CSSVwLength(9.10), boxSizingMedia: .borderBox, @@ -101,16 +110,20 @@ class CSSRSPropertiesTests: XCTestCase { sansSerifJaV: ["Sans serif", "JaV"], compFontFamily: ["Arial"], codeFontFamily: ["Monaco", "Console Sans"] - ).cssProperties(), - [ + ).cssProperties() == [ + "--RS__viewportWidth": "100.00000%", "--RS__colWidth": "1.20000cm", "--RS__colCount": "2", "--RS__colGap": "2.30000pt", "--RS__pageGutter": "3.40000pc", + "--RS__scrollPaddingTop": "10.00000px", + "--RS__scrollPaddingBottom": "20.00000px", + "--RS__scrollPaddingLeft": "15.00000px", + "--RS__scrollPaddingRight": "25.00000px", "--RS__flowSpacing": "4.50000mm", "--RS__paraSpacing": "5.60000px", "--RS__paraIndent": "6.70000em", - "--RS__maxLineLength": "7.80000rem", + "--RS__defaultLineLength": "7.80000rem", "--RS__maxMediaWidth": "50.00000%", "--RS__maxMediaHeight": "9.10000vw", "--RS__boxSizingMedia": "border-box", @@ -140,4 +153,14 @@ class CSSRSPropertiesTests: XCTestCase { ] ) } + + @Test func deprecatedMaxLineLength() { + var props = CSSRSProperties(maxLineLength: CSSRemLength(5.0)) + #expect(props.defaultLineLength?.value == 5.0) + #expect(props.maxLineLength?.value == 5.0) + + props.maxLineLength = CSSRemLength(6.0) + #expect(props.defaultLineLength?.value == 6.0) + #expect(props.cssProperties()["--RS__defaultLineLength"] == "6.00000rem") + } } diff --git a/Tests/NavigatorTests/EPUB/CSS/CSSUserPropertiesTests.swift b/Tests/NavigatorTests/EPUB/CSS/CSSUserPropertiesTests.swift index 61cdc151b1..d092f5800b 100644 --- a/Tests/NavigatorTests/EPUB/CSS/CSSUserPropertiesTests.swift +++ b/Tests/NavigatorTests/EPUB/CSS/CSSUserPropertiesTests.swift @@ -6,26 +6,24 @@ @testable import ReadiumNavigator import ReadiumShared -import XCTest +import Testing -class CSSUserPropertiesTests: XCTestCase { - func testConvertEmptyUserPropertiesToCSSProperties() { - XCTAssertEqual( - CSSUserProperties().cssProperties(), - [ +struct CSSUserPropertiesTests { + @Test func convertEmptyUserPropertiesToCSSProperties() { + #expect( + CSSUserProperties().cssProperties() == [ "--USER__view": nil, "--USER__colCount": nil, - "--USER__pageMargins": nil, + "--USER__lineLength": nil, "--USER__appearance": nil, + "--USER__blendImages": nil, "--USER__darkenImages": nil, "--USER__invertImages": nil, + "--USER__invertGaiji": nil, "--USER__textColor": nil, "--USER__backgroundColor": nil, - "--USER__fontOverride": nil, "--USER__fontFamily": nil, "--USER__fontSize": nil, - "--USER__advancedSettings": nil, - "--USER__typeScale": nil, "--USER__textAlign": nil, "--USER__lineHeight": nil, "--USER__paraSpacing": nil, @@ -35,26 +33,26 @@ class CSSUserPropertiesTests: XCTestCase { "--USER__bodyHyphens": nil, "--USER__ligatures": nil, "--USER__a11yNormalize": nil, + "--USER__noRuby": nil, ] ) } - func testConvertFullUserPropertiesToCSSProperties() { - XCTAssertEqual( + @Test func convertFullUserPropertiesToCSSProperties() { + #expect( CSSUserProperties( view: .scroll, - colCount: .auto, - pageMargins: 1.2, + colCount: 0, + lineLength: CSSPercentLength(42), appearance: .night, - darkenImages: true, - invertImages: true, + blendImages: true, + darkenImages: 0.8, + invertImages: 0.9, + invertGaiji: 0.95, textColor: CSSHexColor("#FF0000"), backgroundColor: CSSHexColor("#00FF00"), - fontOverride: true, fontFamily: ["Times New"], fontSize: CSSVMaxLength(2.3), - advancedSettings: true, - typeScale: 3.4, textAlign: .justify, lineHeight: .length(CSSPtLength(4.5)), paraSpacing: CSSPtLength(5.6), @@ -63,22 +61,21 @@ class CSSUserPropertiesTests: XCTestCase { letterSpacing: CSSRemLength(8.9), bodyHyphens: .auto, ligatures: .common, - a11yNormalize: true - ).cssProperties(), - [ + a11yNormalize: true, + noRuby: true + ).cssProperties() == [ "--USER__view": "readium-scroll-on", - "--USER__colCount": "auto", - "--USER__pageMargins": "1.20000", + "--USER__colCount": "0", + "--USER__lineLength": "4200.00000%", "--USER__appearance": "readium-night-on", - "--USER__darkenImages": "readium-darken-on", - "--USER__invertImages": "readium-invert-on", + "--USER__blendImages": "readium-blend-on", + "--USER__darkenImages": "0.80000", + "--USER__invertImages": "0.90000", + "--USER__invertGaiji": "0.95000", "--USER__textColor": "#FF0000", "--USER__backgroundColor": "#00FF00", - "--USER__fontOverride": "readium-font-on", "--USER__fontFamily": "\"Times New\"", "--USER__fontSize": "2.30000vmax", - "--USER__advancedSettings": "readium-advanced-on", - "--USER__typeScale": "3.40000", "--USER__textAlign": "justify", "--USER__lineHeight": "4.50000pt", "--USER__paraSpacing": "5.60000pt", @@ -88,57 +85,56 @@ class CSSUserPropertiesTests: XCTestCase { "--USER__bodyHyphens": "auto", "--USER__ligatures": "common-ligatures", "--USER__a11yNormalize": "readium-a11y-on", + "--USER__noRuby": "readium-noRuby-on", ] ) } - func testOverrideUserProperties() { + @Test func overrideUserProperties() { let props = CSSUserProperties( - colCount: .one, + colCount: 1, overrides: [ "--USER__colCount": "2", "--USER__custom": "value", ] ).cssProperties() - XCTAssertEqual(props["--USER__colCount"], "2") - XCTAssertEqual(props["--USER__custom"], "value") + #expect(props["--USER__colCount"] == "2") + #expect(props["--USER__custom"] == "value") } - func testGenerateEmptyInlineCSSProperties() { - XCTAssertEqual(CSSUserProperties().css(), nil) + @Test func generateEmptyInlineCSSProperties() { + #expect(CSSUserProperties().css() == nil) } - func testGenerateMinimalInlineCSSProperties() { - XCTAssertEqual( + @Test func generateMinimalInlineCSSProperties() { + #expect( CSSUserProperties( view: .scroll, - colCount: .auto - ).css(), - """ - --USER__colCount: auto !important; + colCount: 0 + ).css() == """ + --USER__colCount: 0 !important; --USER__view: readium-scroll-on !important; """ ) } - func testGenerateFullInlineCSSProperties() { - XCTAssertEqual( + @Test func generateFullInlineCSSProperties() { + #expect( CSSUserProperties( view: .scroll, - colCount: .auto, - pageMargins: 1.2, + colCount: 0, + lineLength: CSSPercentLength(42), appearance: .night, - darkenImages: true, - invertImages: true, + blendImages: true, + darkenImages: 0.8, + invertImages: 0.9, + invertGaiji: 0.95, textColor: CSSHexColor("#FF0000"), backgroundColor: CSSHexColor("#00FF00"), - fontOverride: true, fontFamily: ["Times New", "Comic Sans"], fontSize: CSSVMaxLength(2.3), - advancedSettings: true, - typeScale: 3.4, textAlign: .justify, lineHeight: .length(CSSPtLength(4.5)), paraSpacing: CSSPtLength(5.6), @@ -147,29 +143,29 @@ class CSSUserPropertiesTests: XCTestCase { letterSpacing: CSSRemLength(8.9), bodyHyphens: .auto, ligatures: .common, - a11yNormalize: true - ).css(), - """ + a11yNormalize: true, + noRuby: true + ).css() == """ --USER__a11yNormalize: readium-a11y-on !important; - --USER__advancedSettings: readium-advanced-on !important; --USER__appearance: readium-night-on !important; --USER__backgroundColor: #00FF00 !important; + --USER__blendImages: readium-blend-on !important; --USER__bodyHyphens: auto !important; - --USER__colCount: auto !important; - --USER__darkenImages: readium-darken-on !important; + --USER__colCount: 0 !important; + --USER__darkenImages: 0.80000 !important; --USER__fontFamily: "Times New", "Comic Sans" !important; - --USER__fontOverride: readium-font-on !important; --USER__fontSize: 2.30000vmax !important; - --USER__invertImages: readium-invert-on !important; + --USER__invertGaiji: 0.95000 !important; + --USER__invertImages: 0.90000 !important; --USER__letterSpacing: 8.90000rem !important; --USER__ligatures: common-ligatures !important; --USER__lineHeight: 4.50000pt !important; - --USER__pageMargins: 1.20000 !important; + --USER__lineLength: 4200.00000% !important; + --USER__noRuby: readium-noRuby-on !important; --USER__paraIndent: 6.70000rem !important; --USER__paraSpacing: 5.60000pt !important; --USER__textAlign: justify !important; --USER__textColor: #FF0000 !important; - --USER__typeScale: 3.40000 !important; --USER__view: readium-scroll-on !important; --USER__wordSpacing: 7.80000rem !important; diff --git a/Tests/NavigatorTests/EPUB/CSS/LayoutResolverTests.swift b/Tests/NavigatorTests/EPUB/CSS/LayoutResolverTests.swift new file mode 100644 index 0000000000..8c89c712f1 --- /dev/null +++ b/Tests/NavigatorTests/EPUB/CSS/LayoutResolverTests.swift @@ -0,0 +1,269 @@ +// +// Copyright 2026 Readium Foundation. All rights reserved. +// Use of this source code is governed by the BSD-style license +// available in the top-level LICENSE file of the project. +// + +import CoreGraphics +@testable import ReadiumNavigator +import ReadiumShared +import Testing +import UIKit + +struct LayoutResolverTests { + let resolver = LayoutResolver( + baseMinMargins: 30.0, + baseOptimalLineLength: 640.0, + baseMinLineLength: 440.0, + baseMaxLineLength: 740.0 + ) + + // MARK: - Scrolled Layout + + @Test func scrolledHorizontalLayout() { + let layout = resolver.layout( + scroll: true, + verticalText: false, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: nil, + minMargins: 1.0, + systemFontScale: 1.0, + viewportSize: CGSize(width: 800, height: 600), + safeAreaInsets: .zero + ) + + // colCount is always 1 for scroll + #expect(layout.colCount == 1) + // available = 800 - 30 * 2 = 740 + #expect(layout.lineLength == 740.0) + } + + @Test func scrolledVerticalTextUsesHeight() { + let layout = resolver.layout( + scroll: true, + verticalText: true, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: nil, + minMargins: 1.0, + systemFontScale: 1.0, + viewportSize: CGSize(width: 800, height: 600), + safeAreaInsets: .zero + ) + + #expect(layout.colCount == 1) + // available = 600 (height) - 30 * 2 = 540 + #expect(layout.lineLength == 540.0) + } + + @Test func scrolledLayoutClampsMaximalLineLength() { + let layout = resolver.layout( + scroll: true, + verticalText: false, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: 0.8, // 740 * 0.8 = 592 + minMargins: 1.0, + systemFontScale: 1.0, + viewportSize: CGSize(width: 1000, height: 800), + safeAreaInsets: .zero + ) + + #expect(layout.colCount == 1) + // available = 1000 - 60 = 940, clamped to max 592 + #expect(layout.lineLength == 592.0) + } + + @Test func scrolledLayoutWithSafeAreaInsets() { + let layout = resolver.layout( + scroll: true, + verticalText: false, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: nil, + minMargins: 1.0, // 30 + systemFontScale: 1.0, + viewportSize: CGSize(width: 800, height: 600), + safeAreaInsets: UIEdgeInsets(top: 10, left: 50, bottom: 10, right: 40) + ) + + #expect(layout.colCount == 1) + // insets max(50, 40) = 50 > minMargins 30 -> margins = 50 + // available = 800 - 50 * 2 = 700 + #expect(layout.lineLength == 700.0) + } + + // MARK: - Paginated Layout Auto + + @Test func paginatedAutoSingleColumnOnPhone() { + let layout = resolver.layout( + scroll: false, + verticalText: false, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: nil, + minMargins: 1.0, + systemFontScale: 1.0, + viewportSize: CGSize(width: 390, height: 844), + safeAreaInsets: .zero + ) + + #expect(layout.colCount == 1) + // minMarginWidth = 30 * 2 * 1 = 60 + // lineLength = (390 - 60) / 1 = 330 + #expect(layout.lineLength == 330.0) + } + + @Test func paginatedAutoTwoColumnsOnWideScreen() { + let layout = resolver.layout( + scroll: false, + verticalText: false, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: nil, + minMargins: 1.0, + systemFontScale: 1.0, + viewportSize: CGSize(width: 1400, height: 900), + safeAreaInsets: .zero + ) + + #expect(layout.colCount == 2) + // minMarginWidth = 30 * 2 * 2 = 120 + // lineLength = (1400 - 120) / 2 = 640 + #expect(layout.lineLength == 640.0) + } + + @Test func paginatedAutoClampsToMaximalLineLength() { + let layout = resolver.layout( + scroll: false, + verticalText: false, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: 0.8, // 740 * 0.8 = 592 + minMargins: 1.0, + systemFontScale: 1.0, + viewportSize: CGSize(width: 1400, height: 900), + safeAreaInsets: .zero + ) + + #expect(layout.colCount == 2) + // available = (1400 - 120) / 2 = 640, clamped to max 592 + #expect(layout.lineLength == 592.0) + } + + // MARK: - Paginated Layout N Columns + + @Test func paginatedRequestedColumnsHonoredWhenFitting() { + let layout = resolver.layout( + scroll: false, + verticalText: false, + columnCount: 2, + optimalLineLength: 1.0, + minimalLineLength: 1.0, // 440 + maximalLineLength: nil, + minMargins: 1.0, // 30 + systemFontScale: 1.0, + viewportSize: CGSize(width: 1200, height: 800), + safeAreaInsets: .zero + ) + + #expect(layout.colCount == 2) + // available = 1200 - 30 * 2 * 2 = 1080 + // lineLength = 1080 / 2 = 540 >= minimalLineLength 440 + #expect(layout.lineLength == 540.0) + } + + @Test func paginatedRequestedColumnsReducedWhenBelowMinimalLineLength() { + let layout = resolver.layout( + scroll: false, + verticalText: false, + columnCount: 2, + optimalLineLength: 1.0, + minimalLineLength: 1.0, // 440 + maximalLineLength: nil, + minMargins: 1.0, // 30 + systemFontScale: 1.0, + viewportSize: CGSize(width: 600, height: 800), + safeAreaInsets: .zero + ) + + // For 2 columns: available = 600 - 120 = 480 / 2 = 240 < 440 + // Reduces to 1 column: available = 600 - 60 = 540 + #expect(layout.colCount == 1) + #expect(layout.lineLength == 540.0) + } + + // MARK: - EPUBSettings Overload + + @Test func layoutWithEPUBSettings() { + let settings = EPUBSettings( + backgroundColor: nil, + columnCount: 0, // auto + fit: .auto, + fontFamily: nil, + fontSize: 1.0, + fontWeight: nil, + hyphens: nil, + blendImages: nil, + darkenImages: nil, + invertImages: nil, + invertGaiji: nil, + language: nil, + letterSpacing: nil, + ligatures: nil, + lineLength: 1.0, + lineHeight: nil, + offsetFirstPage: nil, + pageMargins: 1.0, + paragraphIndent: nil, + paragraphSpacing: nil, + readingProgression: .ltr, + scroll: false, + spread: .auto, + textAlign: nil, + textColor: nil, + textNormalization: false, + theme: .light, + verticalText: false, + wordSpacing: nil + ) + + let layout = resolver.layout( + settings: settings, + systemFontScale: 1.0, + viewportSize: CGSize(width: 1400, height: 900) + ) + + #expect(layout.colCount == 2) + #expect(layout.lineLength == 640.0) + } + + @Test func systemFontScaleScalesLineLengthAndMargins() { + let fontScale = 1.5 + let layout = resolver.layout( + scroll: true, + verticalText: false, + columnCount: nil, + optimalLineLength: 1.0, + minimalLineLength: nil, + maximalLineLength: nil, + minMargins: 1.0, + systemFontScale: fontScale, + viewportSize: CGSize(width: 1000, height: 800), + safeAreaInsets: .zero + ) + + // margins: 30 * 1.0 * 1.5 = 45 + // available: 1000 - 45 * 2 = 910 + #expect(layout.colCount == 1) + #expect(layout.lineLength == 910.0) + } +} diff --git a/Tests/NavigatorTests/EPUB/CSS/ReadiumCSSTests.swift b/Tests/NavigatorTests/EPUB/CSS/ReadiumCSSTests.swift index 064713c46d..9211886dc3 100644 --- a/Tests/NavigatorTests/EPUB/CSS/ReadiumCSSTests.swift +++ b/Tests/NavigatorTests/EPUB/CSS/ReadiumCSSTests.swift @@ -6,9 +6,10 @@ @testable import ReadiumNavigator import ReadiumShared -import XCTest +import Testing +import UIKit -class ReadiumCSSTests: XCTestCase { +struct ReadiumCSSTests { let baseURL = HTTPURL(string: "https://readium/assets")! let viewportMeta = HTMLInjection.meta(name: "viewport", content: "width=device-width, height=device-height, initial-scale=1.0") @@ -38,7 +39,7 @@ class ReadiumCSSTests: XCTestCase { """ - func testInjectionsWithoutAnyStyle() { + @Test func injectionsWithoutAnyStyle() throws { let css = ReadiumCSS( layout: CSSLayout(), rsProperties: CSSRSProperties(), @@ -46,9 +47,8 @@ class ReadiumCSSTests: XCTestCase { baseURL: baseURL ) - XCTAssertEqual( - try css.injections(for: html), - [ + #expect( + try css.injections(for: html) == [ viewportMeta, cssBefore(), cssDefault(), @@ -61,7 +61,7 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectionsWithPublicationStyles() { + @Test func injectionsWithPublicationStyles() throws { let css = ReadiumCSS( layout: CSSLayout(), rsProperties: CSSRSProperties(), @@ -69,8 +69,8 @@ class ReadiumCSSTests: XCTestCase { baseURL: baseURL ) - XCTAssertFalse( - try css.injections(for: """ + #expect( + try !css.injections(for: """ @@ -82,8 +82,8 @@ class ReadiumCSSTests: XCTestCase { """).contains(cssDefault()) ) - XCTAssertFalse( - try css.injections(for: """ + #expect( + try !css.injections(for: """ @@ -95,8 +95,8 @@ class ReadiumCSSTests: XCTestCase { """).contains(cssDefault()) ) - XCTAssertFalse( - try css.injections(for: """ + #expect( + try !css.injections(for: """ @@ -110,7 +110,7 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectionsWithReadiumCSSProperties() { + @Test func injectionsWithReadiumCSSProperties() throws { let css = ReadiumCSS( layout: CSSLayout(), rsProperties: CSSRSProperties( @@ -124,9 +124,8 @@ class ReadiumCSSTests: XCTestCase { baseURL: baseURL ) - XCTAssertEqual( - try css.injections(for: html), - [ + #expect( + try css.injections(for: html) == [ viewportMeta, cssBefore(), cssDefault(), @@ -145,7 +144,7 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectRTLDirStylesheets() { + @Test func injectRTLDirStylesheets() throws { let css = ReadiumCSS( layout: CSSLayout(stylesheets: .rtl), rsProperties: CSSRSProperties(), @@ -153,9 +152,8 @@ class ReadiumCSSTests: XCTestCase { baseURL: baseURL ) - XCTAssertEqual( - try css.injections(for: html), - [ + #expect( + try css.injections(for: html) == [ viewportMeta, cssBefore(folder: "rtl/"), cssDefault(folder: "rtl/"), @@ -168,7 +166,7 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectCJKHorizontalStylesheets() { + @Test func injectCJKHorizontalStylesheets() throws { let css = ReadiumCSS( layout: CSSLayout(stylesheets: .cjkHorizontal), rsProperties: CSSRSProperties(), @@ -176,9 +174,8 @@ class ReadiumCSSTests: XCTestCase { baseURL: baseURL ) - XCTAssertEqual( - try css.injections(for: html), - [ + #expect( + try css.injections(for: html) == [ viewportMeta, cssBefore(folder: "cjk-horizontal/"), cssDefault(folder: "cjk-horizontal/"), @@ -191,7 +188,7 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectCJKVerticalStylesheets() { + @Test func injectCJKVerticalStylesheets() throws { let css = ReadiumCSS( layout: CSSLayout(stylesheets: .cjkVertical), rsProperties: CSSRSProperties(), @@ -199,9 +196,8 @@ class ReadiumCSSTests: XCTestCase { baseURL: baseURL ) - XCTAssertEqual( - try css.injections(for: html), - [ + #expect( + try css.injections(for: html) == [ viewportMeta, cssBefore(folder: "cjk-vertical/"), cssDefault(folder: "cjk-vertical/"), @@ -212,14 +208,14 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectLangAttributes() { + @Test func injectLangAttributes() throws { let language = Language(code: .bcp47("en")) let css = ReadiumCSS( layout: CSSLayout(language: language), baseURL: baseURL ) - XCTAssertEqual( + #expect( try css.injections(for: """ @@ -228,8 +224,7 @@ class ReadiumCSSTests: XCTestCase { - """), - [ + """) == [ viewportMeta, cssBefore(), cssDefault(), @@ -244,13 +239,13 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectLangAttributesWhenOneExistsOnHTMLTag() { + @Test func injectLangAttributesWhenOneExistsOnHTMLTag() throws { let css = ReadiumCSS( layout: CSSLayout(language: Language(code: .bcp47("en"))), baseURL: baseURL ) - XCTAssertEqual( + #expect( try css.injections(for: """ @@ -259,8 +254,7 @@ class ReadiumCSSTests: XCTestCase { - """), - [ + """) == [ viewportMeta, cssBefore(), cssDefault(), @@ -273,13 +267,13 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectLangAttributesCopiesTheOneFromBodyTag() { + @Test func injectLangAttributesCopiesTheOneFromBodyTag() throws { let css = ReadiumCSS( layout: CSSLayout(language: Language(code: .bcp47("en"))), baseURL: baseURL ) - XCTAssertEqual( + #expect( try css.injections(for: """ @@ -288,8 +282,7 @@ class ReadiumCSSTests: XCTestCase { - """), - [ + """) == [ viewportMeta, cssBefore(), cssDefault(), @@ -305,15 +298,14 @@ class ReadiumCSSTests: XCTestCase { // MARK: - langInjections(for:) via injections(for:) - func testNoLangInjectionWhenNoLanguageSet() { + @Test func noLangInjectionWhenNoLanguageSet() throws { let css = ReadiumCSS( layout: CSSLayout(), baseURL: baseURL ) - XCTAssertEqual( - try css.injections(for: html), - [ + #expect( + try css.injections(for: html) == [ viewportMeta, cssBefore(), cssDefault(), @@ -326,14 +318,14 @@ class ReadiumCSSTests: XCTestCase { ) } - func testLangInjectionFallsBackToLayoutLangWhenBodyLangIsEmpty() { + @Test func langInjectionFallsBackToLayoutLangWhenBodyLangIsEmpty() throws { let language = Language(code: .bcp47("en")) let css = ReadiumCSS( layout: CSSLayout(language: language), baseURL: baseURL ) - XCTAssertEqual( + #expect( try css.injections(for: """ @@ -342,8 +334,7 @@ class ReadiumCSSTests: XCTestCase { - """), - [ + """) == [ viewportMeta, cssBefore(), cssDefault(), @@ -358,13 +349,13 @@ class ReadiumCSSTests: XCTestCase { ) } - func testInjectDirAttributeWhenAlreadyPresent() { + @Test func injectDirAttributeWhenAlreadyPresent() throws { let css = ReadiumCSS( layout: CSSLayout(language: Language(code: .bcp47("en"))), baseURL: baseURL ) - XCTAssertEqual( + #expect( try css.inject(in: """ @@ -373,8 +364,7 @@ class ReadiumCSSTests: XCTestCase { - """), - """ + """) == """ @@ -385,4 +375,72 @@ class ReadiumCSSTests: XCTestCase { """ ) } + + @Test @MainActor func updateWithSettingsComputesPageGutter() { + var css = ReadiumCSS(baseURL: baseURL) + let settings = EPUBSettings( + preferences: EPUBPreferences(pageMargins: 1.5), + defaults: EPUBDefaults(), + metadata: Metadata(title: "Test") + ) + css.update(with: settings) + + #expect( + css.userProperties.cssProperties()["--RS__pageGutter"] == "30.00000px" + ) + } + + @Test @MainActor func updateWithScrollSettingsComputesScrollPadding() { + var css = ReadiumCSS(baseURL: baseURL) + let settings = EPUBSettings( + preferences: EPUBPreferences(pageMargins: 1.5, scroll: true), + defaults: EPUBDefaults(), + metadata: Metadata(title: "Test") + ) + css.update(with: settings) + + #expect( + css.userProperties.cssProperties()["--RS__scrollPaddingLeft"] == "30.00000px" + ) + #expect( + css.userProperties.cssProperties()["--RS__scrollPaddingRight"] == "30.00000px" + ) + } + + @Test @MainActor func updateWithLayoutAppliesColCountAndLineLength() { + var css = ReadiumCSS(baseURL: baseURL) + let settings = EPUBSettings( + preferences: EPUBPreferences(fontSize: 2.0), + defaults: EPUBDefaults(), + metadata: Metadata(title: "Test") + ) + let layout = LayoutResolver.Layout(colCount: 2, lineLength: 640.0) + css.update(with: settings, resolvedLayout: layout) + + #expect( + css.userProperties.cssProperties()["--USER__colCount"] == "2" + ) + #expect( + css.userProperties.cssProperties()["--USER__lineLength"] == "320.00000px" + ) + } + + @Test @MainActor func updateWithLayoutAndScrollSettingsComputesScrollPaddingFromInsets() { + var css = ReadiumCSS(baseURL: baseURL) + let settings = EPUBSettings( + preferences: EPUBPreferences(scroll: true), + defaults: EPUBDefaults(), + metadata: Metadata(title: "Test") + ) + let insets = UIEdgeInsets(top: 44, left: 20, bottom: 34, right: 25) + let layout = LayoutResolver.Layout(colCount: 1, lineLength: 500.0) + css.update(with: settings, resolvedLayout: layout, safeAreaInsets: insets) + + #expect( + css.userProperties.cssProperties()["--RS__scrollPaddingTop"] == "44.00000px" + ) + #expect( + css.userProperties.cssProperties()["--RS__scrollPaddingBottom"] == "34.00000px" + ) + } } diff --git a/Tests/NavigatorTests/EPUB/EPUBReadingOrderTests.swift b/Tests/NavigatorTests/EPUB/EPUBReadingOrderTests.swift index 953147e78a..3bd77a8161 100644 --- a/Tests/NavigatorTests/EPUB/EPUBReadingOrderTests.swift +++ b/Tests/NavigatorTests/EPUB/EPUBReadingOrderTests.swift @@ -152,7 +152,7 @@ enum EPUBReadingOrderTests { #expect(result.index == 1) #expect(result.locator.href.string == "p1.jpg") - #expect(result.locator.mediaType == .jpeg) + #expect(result.locator.mediaType.matches(.jpeg)) #expect(result.locator.locations.fragments.isEmpty) #expect(result.locator.locations.otherLocations.isEmpty) #expect(result.locator.locations.progression == 0.5) @@ -177,7 +177,7 @@ enum EPUBReadingOrderTests { #expect(result.index == 1) #expect(result.locator.href.string == "p1.xhtml") - #expect(result.locator.mediaType == .xhtml) + #expect(result.locator.mediaType.matches(.xhtml)) #expect(result.locator.locations.progression == 0) } diff --git a/docs/Guides/Navigator/Preferences.md b/docs/Guides/Navigator/Preferences.md index 892294d284..9b4da31e0a 100644 --- a/docs/Guides/Navigator/Preferences.md +++ b/docs/Guides/Navigator/Preferences.md @@ -17,7 +17,7 @@ For instance: "font size" is a **setting**, and the application can submit the f let preferences = EPUBPreferences( fontFamily: .serif, fontSize: 2.0, - publisherStyles: false + textAlign: .justify ) // 2. Submit the preferences, the Navigator will update its settings and the presentation. @@ -38,7 +38,7 @@ let editor = epubNavigator.editor(of: preferences) // 2. Modify the preferences through the editor. editor.fontFamily.set(.serif) editor.fontSize.increment() -editor.publisherStyles.toggle() +editor.hyphens.toggle() // 3. Submit the edited preferences. epubNavigator.submitPreferences(editor.preferences) @@ -48,11 +48,11 @@ epubNavigator.submitPreferences(editor.preferences) Preferences are low-level technical properties. While some of them can be exposed directly to the user, such as the font size, others should not be displayed as-is. -For instance, in EPUB, we can simulate two pages side by side using the `columnCount` (`auto`, `1`, `2`) property for reflowable resources, and the `spread` (`auto`, `never`, `always`) property for fixed-layout publications. Rather than displaying both of these settings with all of their possible values in the user interface, you might prefer to show a single switch button to enable a dual-page mode, which will set both settings appropriately. +For instance, in EPUB, we can simulate two pages side by side using the `columnCount` property for reflowable resources, and the `spread` (`auto`, `never`, `always`) property for fixed-layout publications. Rather than displaying both of these settings with all of their possible values in the user interface, you might prefer to show a single switch button to enable a dual-page mode, which will set both settings appropriately. ### Inactive settings -A setting may be inactive if its activation conditions are not met in a set of preferences. The Navigator will ignore inactive settings when updating its presentation. For example, with the EPUB navigator, the word spacing setting requires the publisher styles to be disabled in order to take effect. +A setting may be inactive if its activation conditions are not met in a set of preferences. The Navigator will ignore inactive settings when updating its presentation. For example, with the EPUB navigator, the word spacing setting is effective only with a left-to-right layout. You can check if a setting is effective for a set of preferences using the `PreferencesEditor`: @@ -385,15 +385,20 @@ An EPUB can also mix both kinds of resources in a single publication. In this ca | `fontSize` | :white_check_mark: | | | `fontWeight` | :white_check_mark: | | | `hyphens` | :white_check_mark: | | -| `imageFilter` | :white_check_mark: | | +| `blendImages` | :white_check_mark: | | +| `darkenImages` | :white_check_mark: | | +| `invertImages` | :white_check_mark: | | +| `invertGaiji` | :white_check_mark: | | | `language` | :white_check_mark: | :white_check_mark: | | `letterSpacing` | :white_check_mark: | | | `ligatures` | :white_check_mark: | | +| `lineLength` | :white_check_mark: | | `lineHeight` | :white_check_mark: | | +| `noRuby` | :white_check_mark: | | +| `offsetFirstPage` | | :white_check_mark: | | `pageMargins` | :white_check_mark: | | | `paragraphIndent` | :white_check_mark: | | | `paragraphSpacing` | :white_check_mark: | | -| `publisherStyles` | :white_check_mark: | | | `readingProgression` | :white_check_mark: | :white_check_mark: | | `scroll` | :white_check_mark: | | | `spread` | | :white_check_mark: | @@ -401,22 +406,21 @@ An EPUB can also mix both kinds of resources in a single publication. In this ca | `textColor` | :white_check_mark: | | | `textNormalization` | :white_check_mark: | | | `theme` | :white_check_mark: | | -| `typeScale` | :white_check_mark: | | | `verticalText` | :white_check_mark: | | | `wordSpacing` | :white_check_mark: | | -#### Publisher styles +#### Unset preferences -The following advanced preferences require `publisherStyles` to be explicitly set to `false`. Make sure you convey this in your user interface. +The following preferences are effective only when explicitly set. When unset, the publisher styles are observed. -* `hyphens` +* `fontWeight` +* `hyphens` (also effective when `textAlign` is `.justify`) * `letterSpacing` * `ligatures` * `lineHeight` * `paragraphIndent` * `paragraphSpacing` * `textAlign` -* `typeScale` * `wordSpacing` #### Scroll vs paginated @@ -425,7 +429,7 @@ The `columnCount` preference is available only when in paginated mode (`scroll = #### Dark theme specific preferences -The `imageFilter` preference is available only in dark mode (`theme = .dark`). +The `darkenImages`, `invertImages`, and `invertGaiji` preferences are available only in dark mode (`theme = .dark`). #### Language specific preferences @@ -439,6 +443,7 @@ Some preferences are not available for all languages and layout. | `wordSpacing` | :white_check_mark: | | | | `hyphens` | :white_check_mark: | | | | `ligatures` | | :white_check_mark: | | +| `noRuby` | | | :white_check_mark: | ### PDF diff --git a/docs/Migration Guide.md b/docs/Migration Guide.md index d8b5360834..abf6a69a69 100644 --- a/docs/Migration Guide.md +++ b/docs/Migration Guide.md @@ -4,6 +4,52 @@ All migration steps necessary in reading apps to upgrade to major versions of th ## Unreleased +### Readium CSS v2 properties + +Readium CSS has been upgraded to version 2. If you configure custom Reading System properties via `CSSRSProperties`, note that `maxLineLength` is deprecated in favor of `defaultLineLength`: + +```diff +-CSSRSProperties(maxLineLength: CSSRemLength(40)) ++CSSRSProperties(defaultLineLength: CSSRemLength(40)) +``` + +`CSSUserProperties.fontOverride`, `advancedSettings`, `pageMargins`, and `typeScale` are also removed, as these properties don't exist in Readium CSS v2. + +### `EPUBPreferences` Column Count + +To support arbitrary integers natively via Readium CSS v2, `EPUBPreferences.columnCount` has been changed from a `ColumnCount` enum to an `Int`. The old `ColumnCount` enum is removed. + +```diff +-var preferences = EPUBPreferences() +-preferences.columnCount = .auto ++var preferences = EPUBPreferences() ++preferences.columnCount = 0 // 0 maps to auto +``` + +### `EPUBPreferences` Image Filters + +To support precise CSS filtering of images via Readium CSS v2, `EPUBPreferences.imageFilter` has been replaced with `blendImages`, `darkenImages`, `invertImages`, and `invertGaiji`. The old `ImageFilter` enum is removed. + +```diff +-var preferences = EPUBPreferences() +-preferences.imageFilter = .darken ++var preferences = EPUBPreferences() ++preferences.darkenImages = 0.8 +``` + +### `EPUBPreferences` publisher styles + +Readium CSS v2 no longer requires a flag to apply the user settings, so the `publisherStyles` preference is removed from `EPUBPreferences` and associated types. + +The publisher styles are observed as long as the related preferences are unset. Preferences such as `textAlign`, `lineHeight`, or `wordSpacing` take effect as soon as they are set, so you can remove any toggle for the publisher styles from your user interface. To restore the publisher styles, reset these preferences to `nil` (e.g. with `editor.textAlign.clear()`). + +```diff + let preferences = EPUBPreferences( +- publisherStyles: false, + textAlign: .justify + ) +``` + ### Audio session changes #### Custom `AudioSessionManaging` implementations