diff --git a/Makefile b/Makefile index 3f66b6af4..c068e75bc 100644 --- a/Makefile +++ b/Makefile @@ -1,4 +1,5 @@ SCRIPTS_PATH := Sources/Navigator/EPUB/Scripts +CSS_PATH := Sources/Navigator/EPUB/Assets/Static/readium-css help: @echo "Usage: make \n\n\ @@ -32,6 +33,15 @@ update-scripts: @which corepack >/dev/null 2>&1 || (echo "ERROR: corepack is required, please install it first\nhttps://pnpm.io/installation#using-corepack"; exit 1) pnpm install --dir "$(SCRIPTS_PATH)" +.PHONY: update-css +update-css: + git clone https://github.com/readium/css.git readium-css + rm -rf "$(CSS_PATH)" + cp -r readium-css/css/dist "$(CSS_PATH)" + git -C readium-css rev-parse HEAD > "$(CSS_PATH)/HEAD" + rm -rf readium-css + rm -rf "$(CSS_PATH)/android-fonts-patch" + .PHONY: test test: # To limit to a particular test suite: -only-testing:ReadiumSharedTests diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/HEAD b/Sources/Navigator/EPUB/Assets/Static/readium-css/HEAD new file mode 100644 index 000000000..30337eb51 --- /dev/null +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/HEAD @@ -0,0 +1 @@ +aa73c5c47ad5281be43fc707c050464841d88081 diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md index b9d6ef6ee..518fe6289 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadMe.md @@ -25,7 +25,6 @@ Finally, page progression is impacted: Disabled user settings: - `hyphens`; -- `word-spacing`; - `letter-spacing`. Added user settings: @@ -54,8 +53,11 @@ Disabled user settings: - `text-align`; - `hyphens`; - paragraphs’ indent; -- `word-spacing`; -- `letter-spacing`. +- `word-spacing`. + +Added user settings: + +- hiding/disabling ruby (mapped to `--USER__noRuby: readium-noRuby-on` flag). ### Vertical @@ -87,8 +89,11 @@ Disabled user settings: - `text-align`; - `hyphens`; - paragraphs’ indent; -- `word-spacing`; -- `letter-spacing`. +- `word-spacing`. + +Added user settings: + +- hiding/disabling ruby (mapped to `--USER__noRuby: readium-noRuby-on` flag). ### EBPAJ Polyfill @@ -110,3 +115,6 @@ This is currently an edge case as we still have to see whether we want to suppor - 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. +## Android Fonts Patch + +See [the specific ReadMe](android-fonts-patch/ReadMe.md) for further information. \ 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 7950ef544..9f837f48a 100644 --- a/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css +++ b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-after.css @@ -1,923 +1,680 @@ -/* 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.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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 +:root{ - Repo: https://github.com/readium/readium-css */ + --RS__viewportWidth:100%; -/* Config */ + --RS__pageGutter:0; -/* 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__defaultLineLength:40rem; -/* Default for smartphone portrait (small screens) */ + --RS__colGap: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__colCount:1; - /* 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); - - /* 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); +:root{ + position:relative; - /* 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; + -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); - /* 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; +body{ + width:100%; + max-width:var(--RS__defaultLineLength) !important; + padding:0 var(--RS__pageGutter) !important; + margin:0 auto !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-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"][style*="--RS__scrollPaddingBottom"] body{ + padding-bottom:var(--RS__scrollPaddingBottom) !important; +} -:root[style*="readium-scroll-on"] body { - --RS__maxLineLength: 40rem !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; } -/* Readium CSS - Night mode +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; +} - A preset theme for night mode +:root[style*="readium-night-on"]{ - Repo: https://github.com/readium/readium-css */ + --RS__selectionTextColor:inherit; -/* CONFIG */ + --RS__selectionBackgroundColor:#b4d8fe; -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ + --RS__visitedColor:#0099E5; -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; + --RS__linkColor:#63caff; - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; + --RS__textColor:#FEFEFE; - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; + --RS__backgroundColor:#000000; } -/* 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-night-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="readium-night-on"] svg text{ + fill:currentcolor !important; + stroke:none !important; } :root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="readium-night-on"] a:link *{ + color:var(--RS__linkColor) !important; } :root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="readium-night-on"] a:visited *{ + color:var(--RS__visitedColor) !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*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{ + -webkit-filter:invert(100%); + filter:invert(100%); } -/* 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*="readium-sepia-on"]{ -/* Invert all images on user’s demand */ + --RS__selectionTextColor:inherit; -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); -} - -/* 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%); -} + --RS__selectionBackgroundColor:#b4d8fe; -/* Readium CSS - Sepia mode + --RS__visitedColor:#551A8B; - A preset theme for sepia mode + --RS__linkColor:#0000EE; - Repo: https://github.com/readium/readium-css */ + --RS__textColor:#121212; -/* 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 */ + --RS__backgroundColor:#faf4e8; } -/* 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*="readium-sepia-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; } :root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="readium-sepia-on"] a:link *{ + color:var(--RS__linkColor); } :root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); +:root[style*="readium-sepia-on"] a:visited *{ + color:var(--RS__visitedColor); } -: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; -} - -/* Readium CSS - OS Accessibility Modes - - A stylesheet to deal with OS accessibility settings - - Repo: https://github.com/readium/readium-css */ +@media screen and (-ms-high-contrast: active){ -/* 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{ + 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; + :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; + .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) { +@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ +@media screen and (inverted-colors){ -@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -@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 :( */ +@media screen and (monochrome){ } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +@media screen and (prefers-reduced-motion){ } -/* 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__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !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__backgroundColor"] *{ + background-color:transparent !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__textColor"]{ + color:var(--USER__textColor) !important; } -:root[style*="--USER__backgroundColor"] * { - background-color: transparent !important; +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -:root[style*="--USER__textColor"] { - color: var(--USER__textColor) !important; +:root[style*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !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__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !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__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !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__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !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__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !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*="--USER__colCount"]{ + -webkit-column-count:var(--USER__colCount); + -moz-column-count:var(--USER__colCount); + column-count:var(--USER__colCount); -: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; + --RS__colWidth:auto; } -/* Readium CSS - Hyphenation pref - - A submodule managing hyphens for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. - - Repo: https://github.com/readium/readium-css */ - -/* Managing hyphenation automatically for text-align values */ - -: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__colCount: 0"], +:root[style*="--USER__colCount:0"]{ + -webkit-column-count:1; + -moz-column-count:1; + column-count:1; } -: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*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"], +:root[style*="--USER__colCount: 1"], +:root[style*="--USER__colCount:1"]{ + --RS__colWidth:100vw; } -/* Managing the user override */ +:root[style*="--USER__lineLength"] body{ + max-width:var(--USER__lineLength) !important; + } -: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__textAlign"]{ + text-align:var(--USER__textAlign); } -/* 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__textAlign"] body, +:root[style*="--USER__textAlign"] p:not(blockquote p):not(figcaption p):not(hgroup p), +: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 - 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__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*="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__bodyHyphens"] body, +:root[style*="--USER__bodyHyphens"] p, +:root[style*="--USER__bodyHyphens"] li, +:root[style*="--USER__bodyHyphens"] div, +:root[style*="--USER__bodyHyphens"] dd{ + -webkit-hyphens:inherit; + -moz-hyphens:inherit; + -ms-hyphens:inherit; + -epub-hyphens:inherit; + hyphens:inherit; } -: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__fontFamily"]{ + font-family:var(--USER__fontFamily) !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__fontFamily"] *{ + font-family:revert !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*="AccessibleDfA"]{ + font-family:AccessibleDfA, Verdana, Tahoma, "Trebuchet MS", sans-serif !important; } -:root[style*="readium-font-on"][style*="readium-a11y-on"] { - font-family: var(--USER__fontFamily) !important; - --RS__lineHeightCompensation: 1.167; +:root[style*="IA Writer Duospace"]{ + font-family:"IA Writer Duospace", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace !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*="AccessibleDfA"],:root[style*="IA Writer Duospace"], +:root[style*="readium-a11y-on"]{ + font-style:normal !important; + font-weight:normal !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*="AccessibleDfA"] *:not(code):not(var):not(kbd):not(samp),:root[style*="IA Writer Duospace"] *:not(code):not(var):not(kbd):not(samp), +:root[style*="readium-a11y-on"] *:not(code):not(var):not(kbd):not(samp){ + font-family:inherit !important; + font-style:inherit !important; + font-weight:inherit !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*="AccessibleDfA"] *,:root[style*="IA Writer Duospace"] *, +:root[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*="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*="AccessibleDfA"] sup,:root[style*="IA Writer Duospace"] sup, +:root[style*="readium-a11y-on"] sup, +:root[style*="AccessibleDfA"] sub, +:root[style*="IA Writer Duospace"] sub, +:root[style*="readium-a11y-on"] sub{ + font-size:1rem !important; + vertical-align:baseline !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:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !important; } -/* Readium CSS - Line height pref - - A submodule managing line-height for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. +:root[style*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; +} - Repo: https://github.com/readium/readium-css */ +@supports not (zoom: 1){ -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] { - line-height: var(--USER__lineHeight) !important; + :root[style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !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-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !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__lineHeight"]{ + line-height:var(--USER__lineHeight) !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__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:inherit; } -/* 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 *, -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p:first-letter { - text-indent: 0 !important; +:root[style*="--USER__paraSpacing"] p{ + margin-top:var(--USER__paraSpacing) !important; + margin-bottom:var(--USER__paraSpacing) !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__paraIndent"] p{ + text-indent:var(--USER__paraIndent) !important; } -/* Readium CSS - Letter spacing pref +:root[style*="--USER__paraIndent"] p *, +:root[style*="--USER__paraIndent"] p:first-letter{ + text-indent:0 !important; +} - A submodule managing letter-spacing for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. +: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); +} - Repo: https://github.com/readium/readium-css */ +: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); + font-variant:none; +} -: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*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; } -/* Readium CSS - Font size normalize +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; +} - A stylesheet to normalize font-size +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; +} -/* STYLES */ +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; +} -/* :root is used so that you can quickly add a class or attribute if you prefer e.g. `:root[data-rs-normalize]` */ +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; +} -/* 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-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; +} -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter: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-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter: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__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"] 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*="--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"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * 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"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - 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"] small { - font-size: smaller !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"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !important; +:root[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !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-normalize-on"]{ + --USER__typeScale:1.2; +} -: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/ReadiumCSS-before.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/ReadiumCSS-before.css index 6511e6d58..99ea6292f 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,434 @@ -/* 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 */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ -/* User view = paged | scrolled */ +@namespace url("http://www.w3.org/1999/xhtml"); -/* Font-family override */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Advanced settings */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Reading Modes */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Filters (images) */ +@-ms-viewport{ + width:device-width; +} -/* Accessibility normalization */ +@viewport{ + width:device-width; + zoom:1; +} -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ +:root{ -/* Direction i.e. ltr and rtl */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Readium CSS - Namespaces module + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; - Namespaces to import in all 3 dist stylesheets + --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; - Repo: https://github.com/readium/readium-css */ + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; + --RS__baseFontFamily:var(--RS__oldStyleTf); + --RS__lineHeightCompensation:1; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__selectionTextColor:inherit; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__selectionBackgroundColor:#b4d8fe; -/* Readium CSS - Base module + --RS__visitedColor:#551A8B; - A minimal stylesheet for all ebooks + --RS__linkColor:#0000EE; - Repo: https://github.com/readium/readium-css */ + --RS__textColor:#121212; -/* Define viewport, HTML5-style */ + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; -@-ms-viewport { - width: device-width; + background-color:var(--RS__backgroundColor) !important; } -@viewport { - width: device-width; - zoom: 1; +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -: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; - - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); - - /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */ - --RS__lineHeightCompensation: 1; - - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ - -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; +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; } -/* 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) */ - -h1, h2, h3 { - line-height: normal; +h1, h2, h3{ + line-height:normal; } :lang(ja), :lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; } -/* Set default font for Math */ - -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; +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; } -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ - -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; +:lang(am){ + --RS__baseFontFamily:kefa, nyala, roboto, noto, "Noto Sans Ethiopic", serif; + --RS__lineHeightCompensation:1.167; } -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(ar){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(bn){ + --RS__baseFontFamily:"Kohinoor Bangla", "Bangla Sangam MN", vrinda, roboto, noto, "Noto Sans Bengali", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; +:lang(bo){ + --RS__baseFontFamily:kailasa, "Microsoft Himalaya", roboto, noto, "Noto Sans Tibetan", sans-serif; } -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; +:lang(chr){ + --RS__baseFontFamily:"Plantagenet Cherokee", roboto, noto, "Noto Sans Cherokee"; + --RS__lineHeightCompensation:1.167; } -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(fa){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(gu){ + --RS__baseFontFamily:"Gujarati Sangam MN", "Nirmala UI", shruti, roboto, noto, "Noto Sans Gujarati", sans-serif; + --RS__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; +:lang(he){ + --RS__baseFontFamily:"New Peninim MT", "Arial Hebrew", gisha, "Times New Roman", roboto, noto, "Noto Sans Hebrew" sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; +:lang(hi){ + --RS__baseFontFamily:"Kohinoor Devanagari", "Devanagari Sangam MN", kokila, "Nirmala UI", roboto, noto, "Noto Sans Devanagari", sans-serif; - --RS__lineHeightCompensation: 1.1; + --RS__lineHeightCompensation:1.1; } -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; +:lang(hy){ + --RS__baseFontFamily:mshtakan, sylfaen, roboto, noto, "Noto Serif Armenian", serif; } -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; +:lang(iu){ + --RS__baseFontFamily:"Euphemia UCAS", euphemia, roboto, noto, "Noto Sans Canadian Aboriginal", sans-serif; } -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__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; +:lang(ja){ + --RS__baseFontFamily:yugothic, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", roboto, noto, "Noto Sans CJK JP", sans-serif; + --RS__lineHeightCompensation:1.167; + --RS__serif-ja:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDPMincho", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif; + --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; + --RS__serif-ja-v:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDMincho", "Yu Mincho", "ＭＳ明朝", "MS Mincho", serif; + --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; } -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(km){ + --RS__baseFontFamily:"Khmer Sangam MN", "Leelawadee UI", "Khmer UI", roboto, noto, "Noto Sans Khmer", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(kn){ + --RS__baseFontFamily:"Kannada Sangam MN", "Nirmala UI", tunga, roboto, noto, "Noto Sans Kannada", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(ko){ + --RS__baseFontFamily:"Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", roboto, noto, "Noto Sans CJK KR", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; +:lang(lo){ + --RS__baseFontFamily:"Lao Sangam MN", "Leelawadee UI", "Lao UI", roboto, noto, "Noto Sans Lao", sans-serif; } -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ml){ + --RS__baseFontFamily:"Malayalam Sangam MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Malayalam", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(or){ + --RS__baseFontFamily:"Oriya Sangam MN", "Nirmala UI", kalinga, roboto, noto, "Noto Sans Oriya", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(pa){ + --RS__baseFontFamily:"Gurmukhi MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Gurmukhi", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__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; } -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ta){ + --RS__baseFontFamily:"Tamil Sangam MN", "Nirmala UI", latha, roboto, noto, "Noto Sans Tamil", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; +:lang(te){ + --RS__baseFontFamily:"Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", gautami, roboto, noto, "Noto Sans Telugu", sans-serif; } -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(th){ + --RS__baseFontFamily:"Thonburi", "Leelawadee UI", "Cordia New", roboto, noto, "Noto Sans Thai", sans-serif; + --RS__lineHeightCompensation:1.067; } -/* The following will also work for zh-Hans */ - -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(zh){ + --RS__baseFontFamily:"方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK SC", sans-serif; + --RS__lineHeightCompensation:1.167; } :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; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(zh-TW){ + --RS__baseFontFamily:"方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK TC", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +: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__lineHeightCompensation:1.167; } -/* Readium CSS - Day/Default mode - - A preset theme for day mode, which is the default - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +@font-face{ + font-family:AccessibleDfA; + font-style:normal; + font-weight:normal; + src:local("AccessibleDfA"), url("fonts/AccessibleDfA-Regular.woff2") format("woff2"), url("fonts/AccessibleDfA-Regular.woff") format("woff"); } -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; +@font-face{ + font-family:AccessibleDfA; + font-style:normal; + font-weight:bold; + src:local("AccessibleDfA"), url("fonts/AccessibleDfA-Bold.woff2") format("woff2"); } -/* 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 */ - -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +@font-face{ + font-family:AccessibleDfA; + font-style:italic; + font-weight:normal; + src:local("AccessibleDfA"), url("fonts/AccessibleDfA-Italic.woff2") format("woff2"); } -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +@font-face{ + font-family:"IA Writer Duospace"; + font-style:normal; + font-weight:normal; + src:local("iAWriterDuospace-Regular"), url("fonts/iAWriterDuospace-Regular.ttf") format("truetype"); } -/* Readium CSS - Fonts module - - A stylesheet for embedded fonts - - Repo: https://github.com/readium/readium-css */ - -/* /!\ Mind the path (relative to the folders in which you have stylesheets and the fonts) */ - -@font-face { - font-family: AccessibleDfA; - font-style: normal; - font-weight: normal; - src: local("AccessibleDfA"), - url("fonts/AccessibleDfA.otf") format("opentype"); +body{ + widows:2; + orphans:2; } -@font-face { - font-family: "IA Writer Duospace"; - font-style: normal; - font-weight: normal; - src: local("iAWriterDuospace-Regular"), - url("fonts/iAWriterDuospace-Regular.ttf") format("truetype"); +figcaption, th, td{ + widows:1; + orphans:1; } -/* 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. */ - -/* Readium CSS - HTML5 SR Patch stylesheet - - A set of style to adjust HTML5 Suggested Rendering to paginated content - - Repo: https://github.com/readium/readium-css */ - -/* Fragmentation */ - -body { - widows: 2; - orphans: 2; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -figcaption, th, td { - widows: 1; - orphans: 1; +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +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, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +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; } -/* Hyphenation */ - -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; -} - -/* OTF */ - -body { - font-variant-numeric: oldstyle-nums proportional-nums; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } :lang(ja) body, :lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; } -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -table { - font-variant-numeric: lining-nums tabular-nums; +table{ + font-variant-numeric:lining-nums tabular-nums; } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -rt { - font-variant-east-asian: ruby; +rt{ + font-variant-east-asian:ruby; } -:lang(ar) { - font-variant-ligatures: common-ligatures; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -:lang(ko) { - font-kerning: normal; +:lang(ko){ + font-kerning:normal; } -/* Night mode */ - -hr { - color: inherit; - border-color: currentColor; +hr{ + color:inherit; + border-color:currentcolor; } -table, th, td { - border-color: currentColor; +table, th, td{ + border-color:currentcolor; } -/* Horizontal Spacing */ - -figure, blockquote { - margin: 1em 5%; +figure, blockquote{ + margin:1em 5%; } -/* - -: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; +ul, ol{ + padding-left:5%; } -*/ - -ul, ol { - padding-left: 5%; +dd{ + margin-left:5%; } -/* - -: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%; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -*/ - -dd { - margin-left: 5%; -} - -/* - -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; -} - -*/ - -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; -} - -/* Normalization */ - -abbr[title], acronym[title] { - text-decoration: dotted underline; +abbr[title], acronym[title]{ + text-decoration:dotted underline; } -nobr wbr { - white-space: normal; +nobr wbr{ + white-space:normal; } -/* Make ruby text and parentheses non-selectable (TBC) */ - -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; } -/* Internationalization */ - -*: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 */ +img, svg|svg, video{ + object-fit:contain; -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; + 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; } -div { - max-width: var(--RS__maxMediaWidth); -} +audio{ + max-width:100%; + -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; - - 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; -} - -/* Try preventing border being cut-off, webkit + blink have content-box by default */ - -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 78aa0172b..a95fcd4bc 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,152 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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 b73eb6744..16da6be42 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 47867bfd5..f4bcc17f6 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,590 @@ -/* 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.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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 */ - -/* 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. */ +:root{ -/* Default for smartphone portrait (small screens) */ + --RS__viewportWidth: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__pageGutter:0; - /* Ideal number of columns (depending on columns’ width floor) */ - --RS__colCount: 1; + --RS__defaultLineLength:40rem; - /* Gap between columns (in pixels so that it won’t resize with font-size) */ - --RS__colGap: 0; + --RS__colGap:0; - /* Optimal line-length (rem will take :root font-size into account, whatever the body’s font-size) */ - --RS__maxLineLength: 40rem; + --RS__colCount:1; - /* 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; +:root{ + position:relative; - /* Column size will depend on this if we want to make it responsive */ - font-size: 100% !important; + -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-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; +body{ + width:100%; + max-width:var(--RS__defaultLineLength) !important; + padding:0 var(--RS__pageGutter) !important; + margin:0 auto !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-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"][style*="--RS__scrollPaddingBottom"] body{ + padding-bottom:var(--RS__scrollPaddingBottom) !important; +} -:root[style*="readium-scroll-on"] body { - --RS__maxLineLength: 40rem !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; } -/* Readium CSS - Night mode +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; +} - A preset theme for night mode +:root[style*="readium-night-on"]{ - Repo: https://github.com/readium/readium-css */ + --RS__selectionTextColor:inherit; -/* CONFIG */ + --RS__selectionBackgroundColor:#b4d8fe; -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ + --RS__visitedColor:#0099E5; -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; + --RS__linkColor:#63caff; - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; + --RS__textColor:#FEFEFE; - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; + --RS__backgroundColor:#000000; } -/* 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-night-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="readium-night-on"] svg text{ + fill:currentcolor !important; + stroke:none !important; } :root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="readium-night-on"] a:link *{ + color:var(--RS__linkColor) !important; } :root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="readium-night-on"] a:visited *{ + color:var(--RS__visitedColor) !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%); -} - -/* Darken all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); -} - -/* Invert all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); -} - -/* 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*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{ + -webkit-filter:invert(100%); + filter:invert(100%); } -/* Readium CSS - Sepia mode +:root[style*="readium-sepia-on"]{ - A preset theme for sepia mode + --RS__selectionTextColor:inherit; - Repo: https://github.com/readium/readium-css */ + --RS__selectionBackgroundColor:#b4d8fe; -/* CONFIG */ + --RS__visitedColor:#551A8B; -:root[style*="readium-sepia-on"] { - --RS__backgroundColor: #faf4e8; - --RS__textColor: #121212; + --RS__linkColor:#0000EE; - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; + --RS__textColor:#121212; - /* 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 */ + --RS__backgroundColor:#faf4e8; } -/* 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*="readium-sepia-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; } :root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="readium-sepia-on"] a:link *{ + color:var(--RS__linkColor); } :root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); -} - -: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*="readium-sepia-on"] a:visited *{ + color:var(--RS__visitedColor); } -/* 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){ -@media screen and (-ms-high-contrast: active) { - :root { - color: windowText !important; - background-color: window !important; + :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; + :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; + .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) { +@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ +@media screen and (inverted-colors){ -@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -@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 :( */ +@media screen and (monochrome){ } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +@media screen and (prefers-reduced-motion){ } -/* 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 */ +:root[style*="--USER__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !important; +} -/* We still need to see if we allow users to force number of columns for all configs, currently it behaves as an "auto" setting */ +:root[style*="--USER__backgroundColor"] *{ + background-color:transparent !important; +} -/* apply col setting except for mobile portrait */ +:root[style*="--USER__textColor"]{ + color:var(--USER__textColor) !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); - } +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; +} - /* 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*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !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*="--USER__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !important; } -/* Readium CSS - Page margins pref +:root[style*="--USER__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !important; +} - A submodule managing page margins for user settings - Part of “Chrome Advanced” class – no flag required. +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; +} -/* 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__colCount"]{ + -webkit-column-count:var(--USER__colCount); + -moz-column-count:var(--USER__colCount); + column-count:var(--USER__colCount); -:root[style*="--USER__pageMargins"] body { - padding: 0 calc(var(--RS__pageGutter) * var(--USER__pageMargins)) !important; + --RS__colWidth:auto; } -/* Readium CSS - Custom colors pref +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"]{ + -webkit-column-count:1; + -moz-column-count:1; + column-count:1; +} - A submodule managing custom colors for user settings - Part of “Chrome Advanced” class – no flag required. +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"], +:root[style*="--USER__colCount: 1"], +:root[style*="--USER__colCount:1"]{ + --RS__colWidth:100vw; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__lineLength"] body{ + max-width:var(--USER__lineLength) !important; + } -: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:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !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-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; } -/* Readium CSS - Font Family pref - - A submodule managing font-family for user settings - Part of “User Overrides” class – “font override” flag required. +@supports not (zoom: 1){ - Repo: https://github.com/readium/readium-css */ - -:root[style*="readium-font-on"][style*="--USER__fontFamily"] { - font-family: var(--USER__fontFamily) !important; + :root[style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !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-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !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__lineHeight"]{ + line-height:var(--USER__lineHeight) !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__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:inherit; } -/* 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__paraSpacing"] p{ + margin-top:var(--USER__paraSpacing) !important; + margin-bottom:var(--USER__paraSpacing) !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__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !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*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; +} -:root[style*="readium-advanced-on"][style*="--USER__paraSpacing"] p { - margin-top: var(--USER__paraSpacing) !important; - margin-bottom: var(--USER__paraSpacing) !important; +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; } -/* Readium CSS - Font size normalize +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; +} - A stylesheet to normalize font-size +: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); + font-variant:none; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="readium-noRuby-on"] body rt, +:root[style*="readium-noRuby-on"] body rp{ + display:none; +} -/* STYLES */ +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; +} -/* :root is used so that you can quickly add a class or attribute if you prefer e.g. `:root[data-rs-normalize]` */ +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; +} -/* 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-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; +} -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter: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-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter: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__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"] 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*="--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"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * 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"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - 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"] small { - font-size: smaller !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"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !important; +:root[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !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-normalize-on"]{ + --USER__typeScale:1.2; +} -: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-horizontal/ReadiumCSS-before.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/cjk-horizontal/ReadiumCSS-before.css index dcb79fffd..6a99eca10 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,406 @@ -/* 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 */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ -/* User view = paged | scrolled */ +@namespace url("http://www.w3.org/1999/xhtml"); -/* Font-family override */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Advanced settings */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Reading Modes */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Filters (images) */ +@-ms-viewport{ + width:device-width; +} -/* Accessibility normalization */ +@viewport{ + width:device-width; + zoom:1; +} -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ +:root{ -/* Direction i.e. ltr and rtl */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Readium CSS - Namespaces module + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; - Namespaces to import in all 3 dist stylesheets + --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; - Repo: https://github.com/readium/readium-css */ + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; + --RS__baseFontFamily:var(--RS__oldStyleTf); + --RS__lineHeightCompensation:1; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__selectionTextColor:inherit; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__selectionBackgroundColor:#b4d8fe; -/* Readium CSS - Base module + --RS__visitedColor:#551A8B; - A minimal stylesheet for all ebooks + --RS__linkColor:#0000EE; - Repo: https://github.com/readium/readium-css */ + --RS__textColor:#121212; -/* Define viewport, HTML5-style */ + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; -@-ms-viewport { - width: device-width; + background-color:var(--RS__backgroundColor) !important; } -@viewport { - width: device-width; - zoom: 1; +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -: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; - - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); - - /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */ - --RS__lineHeightCompensation: 1; - - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ - -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; +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; } -/* 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) */ - -h1, h2, h3 { - line-height: normal; +h1, h2, h3{ + line-height:normal; } :lang(ja), :lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; } -/* Set default font for Math */ - -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; +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; } -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ - -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; +:lang(am){ + --RS__baseFontFamily:kefa, nyala, roboto, noto, "Noto Sans Ethiopic", serif; + --RS__lineHeightCompensation:1.167; } -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(ar){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(bn){ + --RS__baseFontFamily:"Kohinoor Bangla", "Bangla Sangam MN", vrinda, roboto, noto, "Noto Sans Bengali", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; +:lang(bo){ + --RS__baseFontFamily:kailasa, "Microsoft Himalaya", roboto, noto, "Noto Sans Tibetan", sans-serif; } -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; +:lang(chr){ + --RS__baseFontFamily:"Plantagenet Cherokee", roboto, noto, "Noto Sans Cherokee"; + --RS__lineHeightCompensation:1.167; } -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(fa){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(gu){ + --RS__baseFontFamily:"Gujarati Sangam MN", "Nirmala UI", shruti, roboto, noto, "Noto Sans Gujarati", sans-serif; + --RS__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; +:lang(he){ + --RS__baseFontFamily:"New Peninim MT", "Arial Hebrew", gisha, "Times New Roman", roboto, noto, "Noto Sans Hebrew" sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; +:lang(hi){ + --RS__baseFontFamily:"Kohinoor Devanagari", "Devanagari Sangam MN", kokila, "Nirmala UI", roboto, noto, "Noto Sans Devanagari", sans-serif; - --RS__lineHeightCompensation: 1.1; + --RS__lineHeightCompensation:1.1; } -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; +:lang(hy){ + --RS__baseFontFamily:mshtakan, sylfaen, roboto, noto, "Noto Serif Armenian", serif; } -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; +:lang(iu){ + --RS__baseFontFamily:"Euphemia UCAS", euphemia, roboto, noto, "Noto Sans Canadian Aboriginal", sans-serif; } -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__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; +:lang(ja){ + --RS__baseFontFamily:yugothic, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", roboto, noto, "Noto Sans CJK JP", sans-serif; + --RS__lineHeightCompensation:1.167; + --RS__serif-ja:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDPMincho", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif; + --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; + --RS__serif-ja-v:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDMincho", "Yu Mincho", "ＭＳ明朝", "MS Mincho", serif; + --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; } -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(km){ + --RS__baseFontFamily:"Khmer Sangam MN", "Leelawadee UI", "Khmer UI", roboto, noto, "Noto Sans Khmer", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(kn){ + --RS__baseFontFamily:"Kannada Sangam MN", "Nirmala UI", tunga, roboto, noto, "Noto Sans Kannada", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(ko){ + --RS__baseFontFamily:"Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", roboto, noto, "Noto Sans CJK KR", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; +:lang(lo){ + --RS__baseFontFamily:"Lao Sangam MN", "Leelawadee UI", "Lao UI", roboto, noto, "Noto Sans Lao", sans-serif; } -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ml){ + --RS__baseFontFamily:"Malayalam Sangam MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Malayalam", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(or){ + --RS__baseFontFamily:"Oriya Sangam MN", "Nirmala UI", kalinga, roboto, noto, "Noto Sans Oriya", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(pa){ + --RS__baseFontFamily:"Gurmukhi MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Gurmukhi", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__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; } -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ta){ + --RS__baseFontFamily:"Tamil Sangam MN", "Nirmala UI", latha, roboto, noto, "Noto Sans Tamil", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; +:lang(te){ + --RS__baseFontFamily:"Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", gautami, roboto, noto, "Noto Sans Telugu", sans-serif; } -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(th){ + --RS__baseFontFamily:"Thonburi", "Leelawadee UI", "Cordia New", roboto, noto, "Noto Sans Thai", sans-serif; + --RS__lineHeightCompensation:1.067; } -/* The following will also work for zh-Hans */ - -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(zh){ + --RS__baseFontFamily:"方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK SC", sans-serif; + --RS__lineHeightCompensation:1.167; } :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; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} - -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} - -/* Readium CSS - Day/Default mode - - A preset theme for day mode, which is the default - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:lang(zh-TW){ + --RS__baseFontFamily:"方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK TC", sans-serif; + --RS__lineHeightCompensation:1.167; } -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; -} - -/* 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 */ - -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +: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__lineHeightCompensation:1.167; } -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +body{ + widows:2; + orphans:2; } -/* @import "modules/ReadiumCSS-fonts.css"; */ - -/* Readium CSS - HTML5 SR Patch stylesheet - - A set of style to adjust HTML5 Suggested Rendering to paginated content - - Repo: https://github.com/readium/readium-css */ - -/* Fragmentation */ - -body { - widows: 2; - orphans: 2; +figcaption, th, td{ + widows:1; + orphans:1; } -figcaption, th, td { - widows: 1; - orphans: 1; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +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; } -/* Hyphenation */ - -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; } -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; -} - -/* OTF */ - -body { - font-variant-numeric: oldstyle-nums proportional-nums; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } :lang(ja) body, :lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; -} - -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; -} - -table { - font-variant-numeric: lining-nums tabular-nums; +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -rt { - font-variant-east-asian: ruby; +table{ + font-variant-numeric:lining-nums tabular-nums; } -:lang(ar) { - font-variant-ligatures: common-ligatures; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -:lang(ko) { - font-kerning: normal; +rt{ + font-variant-east-asian:ruby; } -/* Night mode */ - -hr { - color: inherit; - border-color: currentColor; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -table, th, td { - border-color: currentColor; +:lang(ko){ + font-kerning:normal; } -/* Horizontal Spacing */ - -figure, blockquote { - margin: 1em 5%; +hr{ + color:inherit; + border-color:currentcolor; } -/* - -: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; +table, th, td{ + border-color:currentcolor; } -*/ - -ul, ol { - padding-left: 5%; +figure, blockquote{ + margin:1em 5%; } -/* - -: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%; +ul, ol{ + padding-left:5%; } -*/ - -dd { - margin-left: 5%; +dd{ + margin-left:5%; } -/* - -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -*/ - -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; +abbr[title], acronym[title]{ + text-decoration:dotted underline; } -/* Normalization */ - -abbr[title], acronym[title] { - text-decoration: dotted underline; +nobr wbr{ + white-space:normal; } -nobr wbr { - white-space: normal; +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; } -/* Make ruby text and parentheses non-selectable (TBC) */ - -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* Internationalization */ - -*: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 */ +img, svg|svg, video{ + object-fit:contain; -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; + 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; } -div { - max-width: var(--RS__maxMediaWidth); -} +audio{ + max-width:100%; + -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; - - 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; -} - -/* Try preventing border being cut-off, webkit + blink have content-box by default */ - -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 37530d830..83c9fce6b 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,170 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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 d60d264dc..601def5e8 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,575 @@ -/* 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.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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 */ - -/* Config */ - -/* We must simplify the pagination model for vertical writing, and can’t fake spreads. */ +:root{ -/* Default for smartphone portrait (small screens) */ + --RS__viewportWidth:100%; -:root { - /* The column will be the height of the web view/iframe */ - --RS__colWidth: 100vh; + --RS__pageGutter:0; - /* Since columns are laid out on the y-axis in vertical-*, we can only use 1 */ - --RS__colCount: 1; + --RS__defaultLineLength:40rem; - /* Gap between columns (in pixels so that it won’t resize with font-size) */ - --RS__colGap: 0; + --RS__colGap:0; - /* Optimal line-length (rem will take :root font-size into account, whatever the body’s font-size) */ - --RS__maxLineLength: 40rem; + --RS__colCount:1; - /* 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); +:root{ + position:relative; - /* 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; + -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); - /* Column size will depend on this if we want to make it responsive */ - font-size: 100% !important; + -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; - -webkit-text-size-adjust: 100%; - - /* Switch to newer box model (not inherited by authors’ styles) */ - 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; - - /* 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-height:var(--RS__defaultLineLength) !important; + padding:var(--RS__pageGutter) 0 !important; + margin:auto 0 !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 */ +: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? */ +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; +} -/* Readium CSS - Night mode +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; +} - A preset theme for night mode +:root[style*="readium-night-on"]{ - Repo: https://github.com/readium/readium-css */ + --RS__selectionTextColor:inherit; -/* CONFIG */ + --RS__selectionBackgroundColor:#b4d8fe; -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ + --RS__visitedColor:#0099E5; -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; + --RS__linkColor:#63caff; - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; + --RS__textColor:#FEFEFE; - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; + --RS__backgroundColor:#000000; } -/* 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-night-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="readium-night-on"] svg text{ + fill:currentcolor !important; + stroke:none !important; } :root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="readium-night-on"] a:link *{ + color:var(--RS__linkColor) !important; } :root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="readium-night-on"] a:visited *{ + color:var(--RS__visitedColor) !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%); -} - -/* Darken all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-darken-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); -} - -/* Invert all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); -} - -/* 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*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{ + -webkit-filter:invert(100%); + filter:invert(100%); } -/* Readium CSS - Sepia mode +:root[style*="readium-sepia-on"]{ - A preset theme for sepia mode + --RS__selectionTextColor:inherit; - Repo: https://github.com/readium/readium-css */ + --RS__selectionBackgroundColor:#b4d8fe; -/* CONFIG */ + --RS__visitedColor:#551A8B; -:root[style*="readium-sepia-on"] { - --RS__backgroundColor: #faf4e8; - --RS__textColor: #121212; + --RS__linkColor:#0000EE; - --RS__linkColor: #0000EE; - --RS__visitedColor: #551A8B; + --RS__textColor:#121212; - /* 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 */ + --RS__backgroundColor:#faf4e8; } -/* 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*="readium-sepia-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; } :root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="readium-sepia-on"] a:link *{ + color:var(--RS__linkColor); } :root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); -} - -: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*="readium-sepia-on"] a:visited *{ + color:var(--RS__visitedColor); } -/* 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){ -@media screen and (-ms-high-contrast: active) { - :root { - color: windowText !important; - background-color: window !important; + :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; + :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; + .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) { +@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ +@media screen and (inverted-colors){ -@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -@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 :( */ +@media screen and (monochrome){ } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +@media screen and (prefers-reduced-motion){ } -/* 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__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !important; } -/* Readium CSS - Custom colors pref - - A submodule managing custom colors for user settings - Part of “Chrome Advanced” class – no flag required. +:root[style*="--USER__backgroundColor"] *{ + background-color:transparent !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__textColor"]{ + color:var(--USER__textColor) !important; +} -:root[style*="--USER__backgroundColor"] { - background-color: var(--USER__backgroundColor) !important; +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -:root[style*="--USER__backgroundColor"] * { - background-color: transparent !important; +:root[style*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !important; } -:root[style*="--USER__textColor"] { - color: var(--USER__textColor) !important; +:root[style*="--USER__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !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__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !important; } -/* Readium CSS - Font Family pref +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; +} - A submodule managing font-family for user settings - Part of “User Overrides” class – “font override” flag required. +:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__lineLength"] body{ + max-height:var(--USER__lineLength) !important; + } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] { - font-family: var(--USER__fontFamily) !important; +:root[style*="--USER__fontFamily"]{ + font-family:var(--USER__fontFamily) !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__fontFamily"] *{ + font-family:revert !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:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !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*="readium-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; } -/* Readium CSS - Line height pref +@supports not (zoom: 1){ - A submodule managing line-height for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. + :root[style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; + } +} - Repo: https://github.com/readium/readium-css */ +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; +} -:root[style*="readium-advanced-on"][style*="--USER__lineHeight"] { - line-height: var(--USER__lineHeight) !important; +:root[style*="--USER__lineHeight"]{ + line-height:var(--USER__lineHeight) !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__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:inherit; } -/* Readium CSS - Para spacing pref +:root[style*="--USER__paraSpacing"] p{ + margin-right:var(--USER__paraSpacing) !important; + margin-left:var(--USER__paraSpacing) !important; +} - A submodule managing paragraphs’ top and bottom margins for user settings - Part of “User Overrides Advanced” class – “advanced settings” flag required. +:root[style*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; +} -:root[style*="readium-advanced-on"][style*="--USER__paraSpacing"] p { - margin-right: var(--USER__paraSpacing) !important; - margin-left: var(--USER__paraSpacing) !important; +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; } -/* Readium CSS - Font size normalize +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; +} - A stylesheet to normalize font-size +: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); + font-variant:none; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="readium-noRuby-on"] body rt, +:root[style*="readium-noRuby-on"] body rp{ + display:none; +} -/* STYLES */ +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; +} -/* :root is used so that you can quickly add a class or attribute if you prefer e.g. `:root[data-rs-normalize]` */ +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; +} -/* 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-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; +} -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter: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-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter: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__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"] 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*="--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"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * 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"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - 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"] small { - font-size: smaller !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"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !important; +:root[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !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-normalize-on"]{ + --USER__typeScale:1.2; +} -: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 2c8d03df4..004a75a63 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,406 @@ -/* 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 */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ -/* User view = paged | scrolled */ +@namespace url("http://www.w3.org/1999/xhtml"); -/* Font-family override */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Advanced settings */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Reading Modes */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Filters (images) */ +@-ms-viewport{ + width:device-width; +} -/* Accessibility normalization */ +@viewport{ + width:device-width; + zoom:1; +} -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ +:root{ -/* Direction i.e. ltr and rtl */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Readium CSS - Namespaces module + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; - Namespaces to import in all 3 dist stylesheets + --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; - Repo: https://github.com/readium/readium-css */ + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; + --RS__baseFontFamily:var(--RS__oldStyleTf); + --RS__lineHeightCompensation:1; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__selectionTextColor:inherit; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__selectionBackgroundColor:#b4d8fe; -/* Readium CSS - Base module + --RS__visitedColor:#551A8B; - A minimal stylesheet for all ebooks + --RS__linkColor:#0000EE; - Repo: https://github.com/readium/readium-css */ + --RS__textColor:#121212; -/* Define viewport, HTML5-style */ + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; -@-ms-viewport { - width: device-width; + background-color:var(--RS__backgroundColor) !important; } -@viewport { - width: device-width; - zoom: 1; +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -: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; - - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); - - /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */ - --RS__lineHeightCompensation: 1; - - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ - -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; +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; } -/* 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) */ - -h1, h2, h3 { - line-height: normal; +h1, h2, h3{ + line-height:normal; } :lang(ja), :lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; } -/* Set default font for Math */ - -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; +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; } -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ - -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; +:lang(am){ + --RS__baseFontFamily:kefa, nyala, roboto, noto, "Noto Sans Ethiopic", serif; + --RS__lineHeightCompensation:1.167; } -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(ar){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(bn){ + --RS__baseFontFamily:"Kohinoor Bangla", "Bangla Sangam MN", vrinda, roboto, noto, "Noto Sans Bengali", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; +:lang(bo){ + --RS__baseFontFamily:kailasa, "Microsoft Himalaya", roboto, noto, "Noto Sans Tibetan", sans-serif; } -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; +:lang(chr){ + --RS__baseFontFamily:"Plantagenet Cherokee", roboto, noto, "Noto Sans Cherokee"; + --RS__lineHeightCompensation:1.167; } -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(fa){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(gu){ + --RS__baseFontFamily:"Gujarati Sangam MN", "Nirmala UI", shruti, roboto, noto, "Noto Sans Gujarati", sans-serif; + --RS__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; +:lang(he){ + --RS__baseFontFamily:"New Peninim MT", "Arial Hebrew", gisha, "Times New Roman", roboto, noto, "Noto Sans Hebrew" sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; +:lang(hi){ + --RS__baseFontFamily:"Kohinoor Devanagari", "Devanagari Sangam MN", kokila, "Nirmala UI", roboto, noto, "Noto Sans Devanagari", sans-serif; - --RS__lineHeightCompensation: 1.1; + --RS__lineHeightCompensation:1.1; } -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; +:lang(hy){ + --RS__baseFontFamily:mshtakan, sylfaen, roboto, noto, "Noto Serif Armenian", serif; } -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; +:lang(iu){ + --RS__baseFontFamily:"Euphemia UCAS", euphemia, roboto, noto, "Noto Sans Canadian Aboriginal", sans-serif; } -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__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; +:lang(ja){ + --RS__baseFontFamily:yugothic, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", roboto, noto, "Noto Sans CJK JP", sans-serif; + --RS__lineHeightCompensation:1.167; + --RS__serif-ja:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDPMincho", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif; + --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; + --RS__serif-ja-v:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDMincho", "Yu Mincho", "ＭＳ明朝", "MS Mincho", serif; + --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; } -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(km){ + --RS__baseFontFamily:"Khmer Sangam MN", "Leelawadee UI", "Khmer UI", roboto, noto, "Noto Sans Khmer", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(kn){ + --RS__baseFontFamily:"Kannada Sangam MN", "Nirmala UI", tunga, roboto, noto, "Noto Sans Kannada", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(ko){ + --RS__baseFontFamily:"Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", roboto, noto, "Noto Sans CJK KR", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; +:lang(lo){ + --RS__baseFontFamily:"Lao Sangam MN", "Leelawadee UI", "Lao UI", roboto, noto, "Noto Sans Lao", sans-serif; } -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ml){ + --RS__baseFontFamily:"Malayalam Sangam MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Malayalam", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(or){ + --RS__baseFontFamily:"Oriya Sangam MN", "Nirmala UI", kalinga, roboto, noto, "Noto Sans Oriya", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(pa){ + --RS__baseFontFamily:"Gurmukhi MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Gurmukhi", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__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; } -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ta){ + --RS__baseFontFamily:"Tamil Sangam MN", "Nirmala UI", latha, roboto, noto, "Noto Sans Tamil", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; +:lang(te){ + --RS__baseFontFamily:"Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", gautami, roboto, noto, "Noto Sans Telugu", sans-serif; } -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(th){ + --RS__baseFontFamily:"Thonburi", "Leelawadee UI", "Cordia New", roboto, noto, "Noto Sans Thai", sans-serif; + --RS__lineHeightCompensation:1.067; } -/* The following will also work for zh-Hans */ - -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(zh){ + --RS__baseFontFamily:"方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK SC", sans-serif; + --RS__lineHeightCompensation:1.167; } :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; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(zh-TW){ + --RS__baseFontFamily:"方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK TC", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +: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__lineHeightCompensation:1.167; } -/* Readium CSS - Day/Default mode - - A preset theme for day mode, which is the default - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; -} - -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; -} - -/* 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 */ - -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); -} - -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); -} - -/* @import "modules/ReadiumCSS-fonts.css"; */ - -/* Readium CSS - HTML5 SR Patch stylesheet - - A set of style to adjust HTML5 Suggested Rendering to paginated content - - Repo: https://github.com/readium/readium-css */ - -/* Fragmentation */ - -body { - widows: 2; - orphans: 2; +body{ + widows:2; + orphans:2; } -figcaption, th, td { - widows: 1; - orphans: 1; +figcaption, th, td{ + widows:1; + orphans:1; } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -/* Hyphenation */ - -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; +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; +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; } -/* OTF */ - -body { - font-variant-numeric: oldstyle-nums proportional-nums; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } :lang(ja) body, :lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; -} - -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; } -table { - font-variant-numeric: lining-nums tabular-nums; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +table{ + font-variant-numeric:lining-nums tabular-nums; } -rt { - font-variant-east-asian: ruby; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -:lang(ar) { - font-variant-ligatures: common-ligatures; +rt{ + font-variant-east-asian:ruby; } -:lang(ko) { - font-kerning: normal; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -/* Night mode */ - -hr { - color: inherit; - border-color: currentColor; -} - -table, th, td { - border-color: currentColor; +:lang(ko){ + font-kerning:normal; } -/* Horizontal Spacing */ - -figure, blockquote { - margin: 1em 5%; +hr{ + color:inherit; + border-color:currentcolor; } -/* - -: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; +table, th, td{ + border-color:currentcolor; } -*/ - -ul, ol { - padding-left: 5%; +figure, blockquote{ + margin:1em 5%; } -/* - -: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%; +ul, ol{ + padding-left:5%; } -*/ - -dd { - margin-left: 5%; +dd{ + margin-left:5%; } -/* - -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -*/ - -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; +abbr[title], acronym[title]{ + text-decoration:dotted underline; } -/* Normalization */ - -abbr[title], acronym[title] { - text-decoration: dotted underline; +nobr wbr{ + white-space:normal; } -nobr wbr { - white-space: normal; +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; } -/* Make ruby text and parentheses non-selectable (TBC) */ - -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* Internationalization */ - -*: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 */ +img, svg|svg, video{ + object-fit:contain; -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; + 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; } -div { - max-width: var(--RS__maxMediaHeight); +audio{ + max-width:100%; + -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; - - 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; -} - -/* Try preventing border being cut-off, webkit + blink have content-box by default */ - -table { - max-height: var(--RS__maxMediaWidth); - box-sizing: var(--RS__boxSizingTable) -} -/*# 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 7122cfa6c..065c8c1b4 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,173 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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/fonts/AccessibleDfA-Bold.woff2 b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Bold.woff2 new file mode 100644 index 000000000..781eecd96 Binary files /dev/null and b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Bold.woff2 differ diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Italic.woff2 b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Italic.woff2 new file mode 100644 index 000000000..e9519272f Binary files /dev/null and b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Italic.woff2 differ diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Regular.woff b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Regular.woff new file mode 100644 index 000000000..20988e0de Binary files /dev/null and b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Regular.woff differ diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Regular.woff2 b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Regular.woff2 new file mode 100644 index 000000000..14dafdf7e Binary files /dev/null and b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA-Regular.woff2 differ diff --git a/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA.otf b/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA.otf deleted file mode 100755 index 69c02218a..000000000 Binary files a/Sources/Navigator/EPUB/Assets/Static/readium-css/fonts/AccessibleDfA.otf and /dev/null differ 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 280c34ac5..1a2c8fa2c 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,777 +1,615 @@ -/* 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.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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:40rem; - /* 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; +:root{ + position:relative; - -webkit-column-width: var(--RS__colWidth); - -moz-column-width: var(--RS__colWidth); - column-width: var(--RS__colWidth); + -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); - /* 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%; - - /* 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; +body{ + width:100%; + max-width:var(--RS__defaultLineLength) !important; + padding:0 var(--RS__pageGutter) !important; + margin:0 auto !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-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"][style*="--RS__scrollPaddingBottom"] body{ + padding-bottom:var(--RS__scrollPaddingBottom) !important; +} -:root[style*="readium-scroll-on"] body { - --RS__maxLineLength: 40rem !important; +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingLeft"] body{ + padding-left:var(--RS__scrollPaddingLeft) !important; } -/* Readium CSS - Night mode +:root[style*="readium-scroll-on"][style*="--RS__scrollPaddingRight"] body{ + padding-right:var(--RS__scrollPaddingRight) !important; +} - A preset theme for night mode +:root[style*="readium-night-on"]{ - Repo: https://github.com/readium/readium-css */ + --RS__selectionTextColor:inherit; -/* CONFIG */ + --RS__selectionBackgroundColor:#b4d8fe; -/* [style*="--USER__appearance"] can be used to increase specificity but performance hit */ + --RS__visitedColor:#0099E5; -:root[style*="readium-night-on"] { - --RS__backgroundColor: #000000; - --RS__textColor: #FEFEFE; + --RS__linkColor:#63caff; - --RS__linkColor: #63caff; - --RS__visitedColor: #0099E5; + --RS__textColor:#FEFEFE; - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; + --RS__backgroundColor:#000000; } -/* 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-night-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -:root[style*="readium-night-on"] svg text { - fill: currentColor !important; - stroke: none !important; +:root[style*="readium-night-on"] svg text{ + fill:currentcolor !important; + stroke:none !important; } :root[style*="readium-night-on"] a:link, -:root[style*="readium-night-on"] a:link * { - color: var(--RS__linkColor) !important; +:root[style*="readium-night-on"] a:link *{ + color:var(--RS__linkColor) !important; } :root[style*="readium-night-on"] a:visited, -:root[style*="readium-night-on"] a:visited * { - color: var(--RS__visitedColor) !important; +:root[style*="readium-night-on"] a:visited *{ + color:var(--RS__visitedColor) !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*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{ + -webkit-filter:invert(100%); + filter:invert(100%); } -/* Darken all images on user’s demand */ +:root[style*="readium-sepia-on"]{ -:root[style*="readium-night-on"][style*="readium-darken-on"] img { - -webkit-filter: brightness(80%); - filter: brightness(80%); -} - -/* Invert all images on user’s demand */ - -:root[style*="readium-night-on"][style*="readium-invert-on"] img { - -webkit-filter: invert(100%); - filter: invert(100%); -} - -/* 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%); -} - -/* Readium CSS - Sepia mode + --RS__selectionTextColor:inherit; - A preset theme for sepia mode + --RS__selectionBackgroundColor:#b4d8fe; - Repo: https://github.com/readium/readium-css */ + --RS__visitedColor:#551A8B; -/* CONFIG */ + --RS__linkColor:#0000EE; -:root[style*="readium-sepia-on"] { - --RS__backgroundColor: #faf4e8; - --RS__textColor: #121212; + --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 */ + --RS__backgroundColor:#faf4e8; } -/* 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*="readium-sepia-on"] *:not(a){ + color:inherit !important; + background-color:transparent !important; } :root[style*="readium-sepia-on"] a:link, -:root[style*="readium-sepia-on"] a:link * { - color: var(--RS__linkColor); +:root[style*="readium-sepia-on"] a:link *{ + color:var(--RS__linkColor); } :root[style*="readium-sepia-on"] a:visited, -:root[style*="readium-sepia-on"] a:visited * { - color: var(--RS__visitedColor); +:root[style*="readium-sepia-on"] a:visited *{ + color:var(--RS__visitedColor); } -: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; -} - -/* Readium CSS - OS Accessibility Modes - - A stylesheet to deal with OS accessibility settings - - Repo: https://github.com/readium/readium-css */ +@media screen and (-ms-high-contrast: active){ -/* 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{ + 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; + :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; + .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) { +@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -/* Will be true on recent versions of iOS and MacOS if inverted setting enabled by the user */ +@media screen and (inverted-colors){ -@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"] *[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-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-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{ + -webkit-filter:brightness(80%); + filter:brightness(80%); } } -@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 :( */ +@media screen and (monochrome){ } -@media screen and (prefers-reduced-motion) { - /* If reduced motion is set on MacOS, in case we have animation/transition */ +@media screen and (prefers-reduced-motion){ } -/* 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__backgroundColor"]{ + background-color:var(--USER__backgroundColor) !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__backgroundColor"] *{ + background-color:transparent !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__textColor"]{ + color:var(--USER__textColor) !important; } -:root[style*="--USER__backgroundColor"] * { - background-color: transparent !important; +:root[style*="--USER__textColor"] *:not(a){ + color:inherit !important; + background-color:transparent !important; + border-color:currentcolor !important; } -:root[style*="--USER__textColor"] { - color: var(--USER__textColor) !important; +:root[style*="--USER__textColor"] svg text{ + fill:currentcolor !important; + stroke:none !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__linkColor"] a:link, +:root[style*="--USER__linkColor"] a:link *{ + color:var(--USER__linkColor) !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__visitedColor"] a:visited, +:root[style*="--USER__visitedColor"] a:visited *{ + color:var(--USER__visitedColor) !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__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !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__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection{ + color:var(--USER__selectionTextColor) !important; + background-color:var(--USER__selectionBackgroundColor) !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*="--USER__colCount"]{ + -webkit-column-count:var(--USER__colCount); + -moz-column-count:var(--USER__colCount); + column-count:var(--USER__colCount); -: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; + --RS__colWidth:auto; } -/* Readium CSS - Font Family pref +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"]{ + -webkit-column-count:1; + -moz-column-count:1; + column-count:1; +} - A submodule managing font-family for user settings - Part of “User Overrides” class – “font override” flag required. +:root[style*="--USER__colCount: 0"], +:root[style*="--USER__colCount:0"], +:root[style*="--USER__colCount: 1"], +:root[style*="--USER__colCount:1"]{ + --RS__colWidth:100vw; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__lineLength"] body{ + max-width:var(--USER__lineLength) !important; + } -:root[style*="readium-font-on"][style*="--USER__fontFamily"] { - font-family: var(--USER__fontFamily) !important; +:root[style*="--USER__textAlign"]{ + text-align:var(--USER__textAlign); } -: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__textAlign"] body, +:root[style*="--USER__textAlign"] p:not(blockquote p):not(figcaption p):not(hgroup p), +: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*="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__fontFamily"]{ + font-family:var(--USER__fontFamily) !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__fontFamily"] *{ + font-family:revert !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:not([style*="readium-deprecatedFontSize-on"]):not([style*="readium-iOSPatch-on"])[style*="--USER__fontSize"] body{ + zoom:var(--USER__fontSize) !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-iOSPatch-on"][style*="--USER__fontSize"] body{ + -webkit-text-size-adjust:var(--USER__fontSize) !important; } -/* Readium CSS - Para spacing pref +@supports not (zoom: 1){ - 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__fontSize"]{ + font-size:var(--USER__fontSize) !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. +:root[style*="readium-deprecatedFontSize-on"][style*="--USER__fontSize"]{ + font-size:var(--USER__fontSize) !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__lineHeight"]{ + line-height:var(--USER__lineHeight) !important; +} -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p { - text-indent: var(--USER__paraIndent) !important; +:root[style*="--USER__lineHeight"] body, +:root[style*="--USER__lineHeight"] p, +:root[style*="--USER__lineHeight"] li, +:root[style*="--USER__lineHeight"] div{ + line-height:inherit; } -/* If there are inline-block elements in paragraphs, text-indent will inherit so we must reset it */ +:root[style*="--USER__paraSpacing"] p{ + margin-top:var(--USER__paraSpacing) !important; + margin-bottom:var(--USER__paraSpacing) !important; +} -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p *, -:root[style*="readium-advanced-on"][style*="--USER__paraIndent"] p:first-letter { - text-indent: 0 !important; +:root[style*="--USER__paraIndent"] p{ + text-indent:var(--USER__paraIndent) !important; } -/* Readium CSS - Ligatures pref +:root[style*="--USER__paraIndent"] p *, +:root[style*="--USER__paraIndent"] p:first-letter{ + text-indent:0 !important; +} - 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. +: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); +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__ligatures"]{ + font-variant-ligatures:var(--USER__ligatures) !important; +} -:root[style*="readium-advanced-on"][style*="--USER__arabicLigatures"] { - font-variant-ligatures: var(--USER__ligatures) !important; +:root[style*="--USER__ligatures"] *{ + font-variant-ligatures:inherit !important; } -:root[style*="readium-advanced-on"][style*="--USER__arabicLigatures"] * { - font-variant-ligatures: inherit !important; +:root[style*="--USER__fontWeight"] body{ + font-weight:var(--USER__fontWeight) !important; } -/* Readium CSS - Font size normalize +:root[style*="--USER__fontWeight"] b, +:root[style*="--USER__fontWeight"] strong{ + font-weight:bolder; +} - A stylesheet to normalize font-size +:root[style*="--USER__fontWidth"] body{ + font-stretch:var(--USER__fontWidth) !important; +} - Repo: https://github.com/readium/readium-css */ +:root[style*="--USER__fontOpticalSizing"] body{ + font-optical-sizing:var(--USER__fontOpticalSizing) !important; +} -/* STYLES */ +:root[style*="readium-blend-on"] svg, +:root[style*="readium-blend-on"] img{ + background-color:transparent !important; + mix-blend-mode:multiply !important; +} -/* :root is used so that you can quickly add a class or attribute if you prefer e.g. `:root[data-rs-normalize]` */ +:root[style*="--USER__darkenImages"] img{ + -webkit-filter:brightness(var(--USER__darkenImages)) !important; + filter:brightness(var(--USER__darkenImages)) !important; +} -/* 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-darken-on"] img{ + -webkit-filter:brightness(80%) !important; + filter:brightness(80%) !important; +} -:root[style*="readium-advanced-on"] { - --USER__typeScale: 1.2; /* This is the default type scale you’ll find in most publications */ +:root[style*="--USER__invertImages"] img{ + -webkit-filter:invert(var(--USER__invertImages)) !important; + filter: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-invert-on"] img{ + -webkit-filter:invert(100%) !important; + filter: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__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"] 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*="--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"] h3 { - /* Fallback if browser doesn’t support vars */ - font-size: 1.25rem !important; - font-size: calc(1rem * 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"] h4, -:root[style*="readium-advanced-on"] h5, -:root[style*="readium-advanced-on"] h6 { - 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"] small { - font-size: smaller !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"] sub, -:root[style*="readium-advanced-on"] sup { - font-size: 67.5% !important; +:root[style*="readium-invertGaiji-on"] img[class*="gaiji"]{ + -webkit-filter:invert(100%) !important; + filter:invert(100%) !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-normalize-on"]{ + --USER__typeScale:1.2; +} -: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/rtl/ReadiumCSS-before.css b/Sources/Navigator/EPUB/Assets/Static/readium-css/rtl/ReadiumCSS-before.css index dcb79fffd..6a99eca10 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,406 @@ -/* 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 */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ -/* User view = paged | scrolled */ +@namespace url("http://www.w3.org/1999/xhtml"); -/* Font-family override */ +@namespace epub url("http://www.idpf.org/2007/ops"); -/* Advanced settings */ +@namespace m url("http://www.w3.org/1998/Math/MathML"); -/* Reading Modes */ +@namespace svg url("http://www.w3.org/2000/svg"); -/* Filters (images) */ +@-ms-viewport{ + width:device-width; +} -/* Accessibility normalization */ +@viewport{ + width:device-width; + zoom:1; +} -/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */ +:root{ -/* Direction i.e. ltr and rtl */ + --RS__monospaceTf:ui-monospace, 'Andale Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; -/* Readium CSS - Namespaces module + --RS__humanistTf:Seravek, Calibri, 'Gill Sans Nova', Roboto, Ubuntu, 'DejaVu Sans', source-sans-pro, sans-serif; - Namespaces to import in all 3 dist stylesheets + --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; - Repo: https://github.com/readium/readium-css */ + --RS__modernTf:Athelas, Constantia, Charter, 'Bitstream Charter', Cambria, 'Georgia Pro', Georgia, serif; -@namespace url("http://www.w3.org/1999/xhtml"); + --RS__oldStyleTf:'Iowan Old Style', Sitka, 'Sitka Text', Palatino, 'Book Antiqua', 'URW Palladio L', P052, serif; + --RS__baseFontFamily:var(--RS__oldStyleTf); + --RS__lineHeightCompensation:1; -@namespace epub url("http://www.idpf.org/2007/ops"); + --RS__baseLineHeight:calc(1.5 * var(--RS__lineHeightCompensation)); -@namespace m url("http://www.w3.org/1998/Math/MathML/"); + --RS__selectionTextColor:inherit; -@namespace svg url("http://www.w3.org/2000/svg"); + --RS__selectionBackgroundColor:#b4d8fe; -/* Readium CSS - Base module + --RS__visitedColor:#551A8B; - A minimal stylesheet for all ebooks + --RS__linkColor:#0000EE; - Repo: https://github.com/readium/readium-css */ + --RS__textColor:#121212; -/* Define viewport, HTML5-style */ + --RS__backgroundColor:#FFFFFF; + color:var(--RS__textColor) !important; -@-ms-viewport { - width: device-width; + background-color:var(--RS__backgroundColor) !important; } -@viewport { - width: device-width; - zoom: 1; +::-moz-selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -: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; - - /* Config */ - --RS__baseFontFamily: var(--RS__oldStyleTf); - - /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */ - --RS__lineHeightCompensation: 1; - - /* Dynamic leading based on typeface metrics + font-size setting */ - --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation)); +::selection{ + color:var(--RS__selectionTextColor); + background-color:var(--RS__selectionBackgroundColor); } -/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */ - -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; +html{ + font-family:var(--RS__baseFontFamily); + line-height:1.6; + line-height:var(--RS__baseLineHeight); + text-rendering:optimizelegibility; } -/* 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) */ - -h1, h2, h3 { - line-height: normal; +h1, h2, h3{ + line-height:normal; } :lang(ja), :lang(zh), -:lang(ko) { - word-wrap: break-word; - -webkit-line-break: strict; - -epub-line-break: strict; - line-break: strict; +:lang(ko){ + word-wrap:break-word; + -webkit-line-break:strict; + -epub-line-break:strict; + line-break:strict; } -/* Set default font for Math */ - -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; +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; } -/* Language Overrides - That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */ - -:lang(am) { - --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif; - --RS__lineHeightCompensation: 1.167; +:lang(am){ + --RS__baseFontFamily:kefa, nyala, roboto, noto, "Noto Sans Ethiopic", serif; + --RS__lineHeightCompensation:1.167; } -:lang(ar) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(ar){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(bn) { - --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(bn){ + --RS__baseFontFamily:"Kohinoor Bangla", "Bangla Sangam MN", vrinda, roboto, noto, "Noto Sans Bengali", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(bo) { - --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif; +:lang(bo){ + --RS__baseFontFamily:kailasa, "Microsoft Himalaya", roboto, noto, "Noto Sans Tibetan", sans-serif; } -:lang(chr) { - --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee"; - --RS__lineHeightCompensation: 1.167; +:lang(chr){ + --RS__baseFontFamily:"Plantagenet Cherokee", roboto, noto, "Noto Sans Cherokee"; + --RS__lineHeightCompensation:1.167; } -:lang(fa) { - --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif; +:lang(fa){ + --RS__baseFontFamily:"Geeza Pro", "Arabic Typesetting", roboto, noto, "Noto Naskh Arabic", "Times New Roman", serif; } -:lang(gu) { - --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(gu){ + --RS__baseFontFamily:"Gujarati Sangam MN", "Nirmala UI", shruti, roboto, noto, "Noto Sans Gujarati", sans-serif; + --RS__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; +:lang(he){ + --RS__baseFontFamily:"New Peninim MT", "Arial Hebrew", gisha, "Times New Roman", roboto, noto, "Noto Sans Hebrew" sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(hi) { - --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif; +:lang(hi){ + --RS__baseFontFamily:"Kohinoor Devanagari", "Devanagari Sangam MN", kokila, "Nirmala UI", roboto, noto, "Noto Sans Devanagari", sans-serif; - --RS__lineHeightCompensation: 1.1; + --RS__lineHeightCompensation:1.1; } -:lang(hy) { - --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif; +:lang(hy){ + --RS__baseFontFamily:mshtakan, sylfaen, roboto, noto, "Noto Serif Armenian", serif; } -:lang(iu) { - --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif; +:lang(iu){ + --RS__baseFontFamily:"Euphemia UCAS", euphemia, roboto, noto, "Noto Sans Canadian Aboriginal", sans-serif; } -:lang(ja) { - --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__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; +:lang(ja){ + --RS__baseFontFamily:yugothic, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", roboto, noto, "Noto Sans CJK JP", sans-serif; + --RS__lineHeightCompensation:1.167; + --RS__serif-ja:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDPMincho", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif; + --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; + --RS__serif-ja-v:"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDMincho", "Yu Mincho", "ＭＳ明朝", "MS Mincho", serif; + --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; } -:lang(km) { - --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(km){ + --RS__baseFontFamily:"Khmer Sangam MN", "Leelawadee UI", "Khmer UI", roboto, noto, "Noto Sans Khmer", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(kn) { - --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(kn){ + --RS__baseFontFamily:"Kannada Sangam MN", "Nirmala UI", tunga, roboto, noto, "Noto Sans Kannada", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(ko) { - --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(ko){ + --RS__baseFontFamily:"Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", roboto, noto, "Noto Sans CJK KR", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(lo) { - --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif; +:lang(lo){ + --RS__baseFontFamily:"Lao Sangam MN", "Leelawadee UI", "Lao UI", roboto, noto, "Noto Sans Lao", sans-serif; } -:lang(ml) { - --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ml){ + --RS__baseFontFamily:"Malayalam Sangam MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Malayalam", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(or) { - --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif; - --RS__lineHeightCompensation: 1.167; +:lang(or){ + --RS__baseFontFamily:"Oriya Sangam MN", "Nirmala UI", kalinga, roboto, noto, "Noto Sans Oriya", sans-serif; + --RS__lineHeightCompensation:1.167; } -:lang(pa) { - --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif; - --RS__lineHeightCompensation: 1.1; +:lang(pa){ + --RS__baseFontFamily:"Gurmukhi MN", "Nirmala UI", kartika, roboto, noto, "Noto Sans Gurmukhi", sans-serif; + --RS__lineHeightCompensation:1.1; } -:lang(si) { - --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif; - --RS__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; } -:lang(ta) { - --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(ta){ + --RS__baseFontFamily:"Tamil Sangam MN", "Nirmala UI", latha, roboto, noto, "Noto Sans Tamil", sans-serif; + --RS__lineHeightCompensation:1.067; } -:lang(te) { - --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif; +:lang(te){ + --RS__baseFontFamily:"Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", gautami, roboto, noto, "Noto Sans Telugu", sans-serif; } -:lang(th) { - --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif; - --RS__lineHeightCompensation: 1.067; +:lang(th){ + --RS__baseFontFamily:"Thonburi", "Leelawadee UI", "Cordia New", roboto, noto, "Noto Sans Thai", sans-serif; + --RS__lineHeightCompensation:1.067; } -/* The following will also work for zh-Hans */ - -:lang(zh) { - --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; +:lang(zh){ + --RS__baseFontFamily:"方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK SC", sans-serif; + --RS__lineHeightCompensation:1.167; } :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; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} - -:lang(zh-HK) { - --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif; - - /* For CJK, the line-height is usually 15–20% more than for Latin */ - --RS__lineHeightCompensation: 1.167; -} - -/* Readium CSS - Day/Default mode - - A preset theme for day mode, which is the default - - Repo: https://github.com/readium/readium-css */ - -/* CONFIG */ - -:root { - --RS__backgroundColor: #FFFFFF; - --RS__textColor: #121212; - - /* This can be customized but initial will re-use default value of the browser */ - --RS__selectionBackgroundColor: #b4d8fe; - --RS__selectionTextColor: inherit; +:lang(zh-TW){ + --RS__baseFontFamily:"方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", roboto, noto, "Noto Sans CJK TC", sans-serif; + --RS__lineHeightCompensation:1.167; } -:root { - color: var(--RS__textColor) !important; - background-color: var(--RS__backgroundColor) !important; -} - -/* 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 */ - -::-moz-selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +: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__lineHeightCompensation:1.167; } -::selection { - color: var(--RS__selectionTextColor); - background-color: var(--RS__selectionBackgroundColor); +body{ + widows:2; + orphans:2; } -/* @import "modules/ReadiumCSS-fonts.css"; */ - -/* Readium CSS - HTML5 SR Patch stylesheet - - A set of style to adjust HTML5 Suggested Rendering to paginated content - - Repo: https://github.com/readium/readium-css */ - -/* Fragmentation */ - -body { - widows: 2; - orphans: 2; +figcaption, th, td{ + widows:1; + orphans:1; } -figcaption, th, td { - widows: 1; - orphans: 1; +h2, h3, h4, h5, h6, dt, +hr, caption{ + -webkit-column-break-after:avoid; + page-break-after:avoid; + break-after:avoid; } -h2, -h3, -h4, -h5, -h6, -dt, -hr, -caption { - -webkit-column-break-after: avoid; - page-break-after: avoid; - break-after: avoid; +h1, h2, h3, h4, h5, h6, dt, +figure, tr{ + -webkit-column-break-inside:avoid; + page-break-inside:avoid; + break-inside:avoid; } -h1, -h2, -h3, -h4, -h5, -h6, -dt, -figure, -tr { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; +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; } -/* Hyphenation */ - -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; } -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; -} - -/* OTF */ - -body { - font-variant-numeric: oldstyle-nums proportional-nums; +body{ + font-variant-numeric:oldstyle-nums proportional-nums; } :lang(ja) body, :lang(zh) body, -:lang(ko) body { - font-variant-numeric: lining-nums proportional-nums; -} - -h1, h2, h3, h4, h5, h6, dt { - font-variant-numeric: lining-nums proportional-nums; -} - -table { - font-variant-numeric: lining-nums tabular-nums; +:lang(ko) body{ + font-variant-numeric:lining-nums proportional-nums; } -code, var { - font-variant-ligatures: none; - font-variant-numeric: lining-nums tabular-nums slashed-zero; +h1, h2, h3, h4, h5, h6, dt{ + font-variant-numeric:lining-nums proportional-nums; } -rt { - font-variant-east-asian: ruby; +table{ + font-variant-numeric:lining-nums tabular-nums; } -:lang(ar) { - font-variant-ligatures: common-ligatures; +code, var{ + font-variant-ligatures:none; + font-variant-numeric:lining-nums tabular-nums slashed-zero; } -:lang(ko) { - font-kerning: normal; +rt{ + font-variant-east-asian:ruby; } -/* Night mode */ - -hr { - color: inherit; - border-color: currentColor; +:lang(ar){ + font-variant-ligatures:common-ligatures; } -table, th, td { - border-color: currentColor; +:lang(ko){ + font-kerning:normal; } -/* Horizontal Spacing */ - -figure, blockquote { - margin: 1em 5%; +hr{ + color:inherit; + border-color:currentcolor; } -/* - -: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; +table, th, td{ + border-color:currentcolor; } -*/ - -ul, ol { - padding-left: 5%; +figure, blockquote{ + margin:1em 5%; } -/* - -: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%; +ul, ol{ + padding-left:5%; } -*/ - -dd { - margin-left: 5%; +dd{ + margin-left:5%; } -/* - -:lang(ja) dd, -:lang(zh-Hant) dd, -:lang(zh-TW) dd, -:lang(mn) dd { - margin-top: 5%; +pre{ + white-space:pre-wrap; + -ms-tab-size:2; + -moz-tab-size:2; + -webkit-tab-size:2; + tab-size:2; } -*/ - -pre { - white-space: pre-wrap; - -ms-tab-size: 2; - -moz-tab-size: 2; - -webkit-tab-size: 2; - tab-size: 2; +abbr[title], acronym[title]{ + text-decoration:dotted underline; } -/* Normalization */ - -abbr[title], acronym[title] { - text-decoration: dotted underline; +nobr wbr{ + white-space:normal; } -nobr wbr { - white-space: normal; +ruby > rt, ruby > rp{ + -webkit-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; } -/* Make ruby text and parentheses non-selectable (TBC) */ - -ruby > rt, ruby > rp { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* Internationalization */ - -*: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 */ +img, svg|svg, video{ + object-fit:contain; -a, h1, h2, h3, h4, h5, h6 { - word-wrap: break-word; + 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; } -div { - max-width: var(--RS__maxMediaWidth); -} +audio{ + max-width:100%; + -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; - - 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; -} - -/* Try preventing border being cut-off, webkit + blink have content-box by default */ - -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 18bb89311..f2702105b 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,152 @@ -/* Readium CSS - Namespaces module - - Namespaces to import in all 3 dist stylesheets - - Repo: https://github.com/readium/readium-css */ +/* + * Readium CSS (v. 2.0.0-beta.18) + * Developers: Jiminy Panoz + * Copyright (c) 2017. Readium Foundation. All rights reserved. + * Use of this source code is governed by a BSD-style license which is detailed in the + * LICENSE file present in the project repository where this source code is maintained. +*/ @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/CSS/CSSProperties.swift b/Sources/Navigator/EPUB/CSS/CSSProperties.swift index c68e4b13b..952568057 100644 --- a/Sources/Navigator/EPUB/CSS/CSSProperties.swift +++ b/Sources/Navigator/EPUB/CSS/CSSProperties.swift @@ -34,7 +34,7 @@ public extension CSSProperties { /// User settings properties. /// -/// See https://readium.org/readium-css/docs/CSS19-api.html#user-settings +/// See https://readium.org/css/docs/CSS19-api.html#user-settings public struct CSSUserProperties: CSSProperties { // View mode @@ -43,33 +43,29 @@ public struct CSSUserProperties: CSSProperties { // Pagination - /// The number of columns (column-count) the user wants displayed (one-page view or two-page - /// spread). - /// - /// To reset, change the value to auto. - public var colCount: CSSColCount? - - /// 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 number of columns (column-count) the user wants displayed. + public var colCount: Int? // 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. - /// - /// Requires: appearance = Appearance.Night - public var darkenImages: Bool? + /// This will apply a mix-blend-mode of multiply with a transparent + /// background to blend images with a white background with the + /// background-color of your theme. + public var blendImages: Bool? - /// This will only apply in night mode to invert images and impact img. - /// - /// Requires: appearance = Appearance.Night - public var invertImages: Bool? + /// This will apply a brightness filter with the percentage value it's + /// given. + public var darkenImages: CSSPercent? + + /// This will apply an invert filter with the percentage value it's given. + public var invertImages: CSSPercent? + + /// This will apply an invert filter with the percentage value it's given, + /// only to img class="gaiji". + public var invertGaiji: CSSPercent? /// The color for textual contents. It impacts all elements but headings and pre in the DOM. /// @@ -81,14 +77,10 @@ public struct CSSUserProperties: CSSProperties { // 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. @@ -98,68 +90,50 @@ public struct CSSUserProperties: CSSProperties { // 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? + /// The `max-width` of `body` (to shrink or grow the line-length of body copy). + /// + /// Possible values: any value CSS property `max-width|height` accepts. + public var lineLength: CSSLength? + /// 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? // Additional overrides for extensions and adjustments. @@ -167,19 +141,18 @@ public struct CSSUserProperties: CSSProperties { public init( view: CSSView? = nil, - colCount: CSSColCount? = nil, - pageMargins: Double? = nil, + colCount: Int? = nil, appearance: CSSAppearance? = nil, - darkenImages: Bool? = nil, - invertImages: Bool? = nil, + blendImages: Bool? = nil, + darkenImages: CSSPercent? = nil, + invertImages: CSSPercent? = nil, + invertGaiji: CSSPercent? = 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, + lineLength: CSSLength? = nil, lineHeight: CSSLineHeight? = nil, paraSpacing: CSSLength? = nil, paraIndent: CSSRemLength? = nil, @@ -192,19 +165,18 @@ public struct CSSUserProperties: CSSProperties { ) { self.view = view self.colCount = colCount - self.pageMargins = pageMargins 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.lineLength = lineLength self.paraSpacing = paraSpacing self.paraIndent = paraIndent self.wordSpacing = wordSpacing @@ -222,27 +194,25 @@ public struct CSSUserProperties: CSSProperties { // Pagination props.putCSS(name: "--USER__colCount", value: colCount) - props.putCSS(name: "--USER__pageMargins", value: pageMargins) // 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__lineLength", value: lineLength) props.putCSS(name: "--USER__paraSpacing", value: paraSpacing) props.putCSS(name: "--USER__paraIndent", value: paraIndent) props.putCSS(name: "--USER__wordSpacing", value: wordSpacing) @@ -260,7 +230,7 @@ public struct CSSUserProperties: CSSProperties { /// Reading System properties. /// -/// See https://readium.org/readium-css/docs/CSS19-api.html#reading-system-styles +/// See https://readium.org/css/docs/CSS19-api.html#reading-system-styles public struct CSSRSProperties: CSSProperties { // Pagination @@ -268,7 +238,7 @@ public struct CSSRSProperties: CSSProperties { 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? @@ -336,11 +306,6 @@ public struct CSSRSProperties: CSSProperties { // Typography - /// @param typeScale The scale to be used for computing all elements’ font-size. Since those font - /// sizes are computed dynamically, you can set a smaller type scale when the user sets one - /// of the largest font sizes. - public var typeScale: Double? - /// @param baseFontFamily The default typeface for body copy in case the ebook doesn’t have one /// declared. Please note some languages have a specific font-stack (japanese, hindi, etc.) public var baseFontFamily: [String]? @@ -399,7 +364,7 @@ public struct CSSRSProperties: CSSProperties { public init( colWidth: CSSLength? = nil, - colCount: CSSColCount? = nil, + colCount: Int? = nil, colGap: CSSAbsoluteLength? = nil, pageGutter: CSSAbsoluteLength? = nil, flowSpacing: CSSLength? = nil, @@ -418,7 +383,6 @@ public struct CSSRSProperties: CSSProperties { visitedColor: CSSColor? = nil, primaryColor: CSSColor? = nil, secondaryColor: CSSColor? = nil, - typeScale: Double? = nil, baseFontFamily: [String]? = nil, baseLineHeight: CSSLineHeight? = nil, oldStyleTf: [String]? = nil, @@ -454,7 +418,6 @@ public struct CSSRSProperties: CSSProperties { self.visitedColor = visitedColor self.primaryColor = primaryColor self.secondaryColor = secondaryColor - self.typeScale = typeScale self.baseFontFamily = baseFontFamily self.baseLineHeight = baseLineHeight self.oldStyleTf = oldStyleTf @@ -503,7 +466,6 @@ public struct CSSRSProperties: CSSProperties { props.putCSS(name: "--RS__secondaryColor", value: secondaryColor) // Typography - props.putCSS(name: "--RS__typeScale", value: typeScale) props.putCSS(name: "--RS__baseFontFamily", value: baseFontFamily) props.putCSS(name: "--RS__baseLineHeight", value: baseLineHeight) @@ -537,6 +499,7 @@ public enum CSSView: String, CSSConvertible { public func css() -> String? { rawValue } } +@available(*, unavailable, message: "Column count is now an integer") public enum CSSColCount: String, CSSConvertible { case auto case one = "1" @@ -552,6 +515,16 @@ public enum CSSAppearance: String, CSSConvertible { public func css() -> String? { rawValue } } +public struct CSSPercent: CSSConvertible { + public let value: Double + + public init(_ value: Double) { + self.value = value + } + + public func css() -> String? { (value * 100).css(unit: "%") } +} + public protocol CSSColor: CSSConvertible {} public struct CSSRGBColor: CSSColor { @@ -838,6 +811,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/ReadiumCSS.swift b/Sources/Navigator/EPUB/CSS/ReadiumCSS.swift index 4a3c94179..78b7a98ca 100644 --- a/Sources/Navigator/EPUB/CSS/ReadiumCSS.swift +++ b/Sources/Navigator/EPUB/CSS/ReadiumCSS.swift @@ -8,6 +8,7 @@ import Foundation import ReadiumInternal import ReadiumShared import SwiftSoup +import UIKit struct ReadiumCSS { var layout: CSSLayout = .init() @@ -23,16 +24,34 @@ struct ReadiumCSS { extension ReadiumCSS { mutating func update(with settings: EPUBSettings) { 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)) } + ?? "", + ] + + // 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 + } + 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: settings.columnCount, appearance: { switch settings.theme { case .light: return nil @@ -40,15 +59,14 @@ extension ReadiumCSS { case .sepia: return .sepia } }(), - darkenImages: settings.imageFilter == .darken, - invertImages: settings.imageFilter == .invert, + blendImages: settings.blendImages, + darkenImages: settings.darkenImages.map { CSSPercent(1 - $0) }, + invertImages: settings.invertImages.map { CSSPercent($0) }, + invertGaiji: settings.invertGaiji.map { CSSPercent($0) }, 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 @@ -58,6 +76,7 @@ extension ReadiumCSS { default: return nil } }(), + lineLength: CSSPercentLength(settings.lineLength), lineHeight: settings.lineHeight.map { .unitless($0) }, paraSpacing: settings.paragraphSpacing.map { CSSRemLength($0) }, paraIndent: settings.paragraphIndent.map { CSSRemLength($0) }, @@ -66,11 +85,7 @@ 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)) } - ?? "", - ] + overrides: overrides ) } diff --git a/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift b/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift index 5dd2036db..fbac10c66 100644 --- a/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift +++ b/Sources/Navigator/EPUB/Preferences/EPUBPreferences+Legacy.swift @@ -33,9 +33,7 @@ public extension EPUBPreferences { return EPUBPreferences( backgroundColor: defaults.optString(for: .backgroundColor) .flatMap { Color(hex: $0) }, - columnCount: defaults.optInt(for: .columnCount) - .flatMap { (columnCountValues ?? defaultColumnCountValues).getOrNil($0) } - .flatMap { ColumnCount(rawValue: $0) }, + columnCount: defaults.optInt(for: .columnCount), fontFamily: defaults.optInt(for: .fontFamily) .takeIf { $0 != 0 } // Original .flatMap { (fontFamilyValues ?? defaultFontFamilyValues).getOrNil($0) } @@ -44,10 +42,9 @@ public extension EPUBPreferences { .map { $0 / 100 }, hyphens: defaults.optBool(for: .hyphens), letterSpacing: defaults.optDouble(for: .letterSpacing), + lineLength: defaults.optDouble(for: .lineHeight), 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 +126,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 ec9289a09..7b1957677 100644 --- a/Sources/Navigator/EPUB/Preferences/EPUBPreferences.swift +++ b/Sources/Navigator/EPUB/Preferences/EPUBPreferences.swift @@ -14,9 +14,14 @@ public struct EPUBPreferences: ConfigurablePreferences { /// Default page background color. public var backgroundColor: Color? - /// Number of reflowable columns to display (one-page view or two-page - /// spread). - public var columnCount: ColumnCount? + /// Blends the images with the background color. + public var blendImages: Bool? + + /// Number of reflowable columns to display. + public var columnCount: Int? + + /// Darkens images by the given percentage. + public var darkenImages: Double? /// Default typeface for the text. public var fontFamily: FontFamily? @@ -30,8 +35,11 @@ public struct EPUBPreferences: ConfigurablePreferences { /// Enable hyphenation. public var hyphens: Bool? - /// Filter applied to images in dark theme. - public var imageFilter: ImageFilter? + /// Inverts the color of gaiji images by the given percentage. + public var invertGaiji: Double? + + /// Inverts the color of images by the given percentage. + public var invertImages: Double? /// Language of the publication content. public var language: Language? @@ -42,23 +50,18 @@ public struct EPUBPreferences: ConfigurablePreferences { /// Enable ligatures in Arabic. public var ligatures: Bool? + /// The maximum length of the content. + public var lineLength: Double? + /// Leading line height. public var lineHeight: Double? - /// Factor applied to horizontal margins. - public var pageMargins: Double? - /// Text indentation for paragraphs. public var paragraphIndent: Double? /// 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? @@ -82,9 +85,6 @@ public struct EPUBPreferences: ConfigurablePreferences { /// 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 @@ -96,20 +96,22 @@ public struct EPUBPreferences: ConfigurablePreferences { public init( backgroundColor: Color? = nil, - columnCount: ColumnCount? = nil, + blendImages: Bool? = nil, + columnCount: Int? = nil, + darkenImages: Double? = nil, fontFamily: FontFamily? = nil, fontSize: Double? = nil, fontWeight: Double? = nil, hyphens: Bool? = nil, - imageFilter: ImageFilter? = nil, + invertGaiji: Double? = nil, + invertImages: Double? = nil, language: Language? = nil, letterSpacing: Double? = nil, ligatures: Bool? = nil, + lineLength: Double? = nil, lineHeight: Double? = nil, - pageMargins: Double? = nil, paragraphIndent: Double? = nil, paragraphSpacing: Double? = nil, - publisherStyles: Bool? = nil, readingProgression: ReadingProgression? = nil, scroll: Bool? = nil, spread: Spread? = nil, @@ -117,25 +119,26 @@ public struct EPUBPreferences: ConfigurablePreferences { textColor: Color? = nil, textNormalization: Bool? = nil, theme: Theme? = nil, - typeScale: Double? = nil, verticalText: Bool? = nil, wordSpacing: Double? = nil ) { self.backgroundColor = backgroundColor + self.blendImages = blendImages self.columnCount = columnCount + self.darkenImages = darkenImages self.fontFamily = fontFamily self.fontSize = fontSize.map { max($0, 0) } self.fontWeight = fontWeight?.clamped(to: 0.0 ... 2.5) self.hyphens = hyphens - self.imageFilter = imageFilter + self.invertGaiji = invertGaiji + self.invertImages = invertImages self.language = language self.letterSpacing = letterSpacing.map { max($0, 0) } self.ligatures = ligatures + self.lineLength = lineLength.map { max($0, 0) } self.lineHeight = lineHeight - 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 @@ -143,7 +146,6 @@ public struct EPUBPreferences: ConfigurablePreferences { 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) } } @@ -151,20 +153,22 @@ public struct EPUBPreferences: ConfigurablePreferences { public func merging(_ other: EPUBPreferences) -> EPUBPreferences { EPUBPreferences( backgroundColor: other.backgroundColor ?? backgroundColor, + blendImages: other.blendImages ?? blendImages, columnCount: other.columnCount ?? columnCount, + darkenImages: other.darkenImages ?? darkenImages, fontFamily: other.fontFamily ?? fontFamily, fontSize: other.fontSize ?? fontSize, fontWeight: other.fontWeight ?? fontWeight, hyphens: other.hyphens ?? hyphens, - imageFilter: other.imageFilter ?? imageFilter, + invertGaiji: other.invertGaiji ?? invertGaiji, + invertImages: other.invertImages ?? invertImages, language: other.language ?? language, letterSpacing: other.letterSpacing ?? letterSpacing, ligatures: other.ligatures ?? ligatures, + lineLength: other.lineLength ?? lineLength, lineHeight: other.lineHeight ?? lineHeight, - 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, @@ -172,7 +176,6 @@ public struct EPUBPreferences: ConfigurablePreferences { textColor: other.textColor ?? textColor, textNormalization: other.textNormalization ?? textNormalization, theme: other.theme ?? theme, - typeScale: other.typeScale ?? typeScale, verticalText: other.verticalText ?? verticalText, wordSpacing: other.wordSpacing ?? wordSpacing ) @@ -199,4 +202,45 @@ public struct EPUBPreferences: ConfigurablePreferences { verticalText: verticalText ) } + + @available(*, unavailable, message: "Use lineLength instead") + public var pageMargins: Double? { nil } + + @available(*, unavailable, message: "Not available anymore") + public var typeScale: Double? { nil } + + @available(*, unavailable, message: "Not needed anymore") + public var publisherStyles: Bool? { nil } + + @available(*, unavailable, message: "Use invertImages or darkenImages instead") + public var imageFilter: ImageFilter? { nil } + + @available(*, unavailable, message: "Use the other initializer") + public init( + backgroundColor: Color? = nil, + columnCount: ColumnCount? = nil, + fontFamily: FontFamily? = nil, + fontSize: Double? = nil, + fontWeight: Double? = nil, + hyphens: Bool? = nil, + imageFilter: ImageFilter? = nil, + language: Language? = nil, + letterSpacing: Double? = nil, + ligatures: Bool? = nil, + lineHeight: Double? = nil, + pageMargins: Double? = nil, + paragraphIndent: Double? = nil, + paragraphSpacing: Double? = nil, + publisherStyles: Bool? = nil, + readingProgression: ReadingProgression? = nil, + scroll: Bool? = nil, + spread: Spread? = nil, + textAlign: TextAlignment? = nil, + textColor: Color? = nil, + textNormalization: Bool? = nil, + theme: Theme? = nil, + typeScale: Double? = nil, + verticalText: Bool? = nil, + wordSpacing: Double? = nil + ) { fatalError() } } diff --git a/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift b/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift index 28180192a..578a37b34 100644 --- a/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift +++ b/Sources/Navigator/EPUB/Preferences/EPUBPreferencesEditor.swift @@ -47,22 +47,55 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = + preference( + preference: \.blendImages, + effectiveValue: { $0.settings.blendImages }, + defaultEffectiveValue: false, + isEffective: { [layout] in + layout == .reflowable + && $0.preferences.blendImages != nil + } + ) + /// Number of reflowable columns to display (one-page view or two-page /// spread). /// /// Only effective when: /// - the publication is reflowable /// - `scroll` is off - public lazy var columnCount: AnyEnumPreference = - enumPreference( + public lazy var columnCount: AnyRangePreference = + rangePreference( preference: \.columnCount, setting: \.columnCount, - defaultEffectiveValue: defaults.columnCount ?? .auto, + defaultEffectiveValue: defaults.columnCount ?? 1, isEffective: { [layout] in layout == .reflowable && !$0.settings.scroll }, - supportedValues: [.auto, .one, .two] + supportedRange: 1 ... 9, + progressionStrategy: .increment(1), + format: { String(format: "%d", $0) } + ) + + /// Darkens images by the given percentage. + /// + /// Only effective when the publication is reflowable. + public lazy var darkenImages: AnyRangePreference = + rangePreference( + preference: \.darkenImages, + effectiveValue: { $0.settings.darkenImages }, + defaultEffectiveValue: 0, + isEffective: { [layout] in + layout == .reflowable + && $0.preferences.darkenImages != nil + }, + supportedRange: 0.0 ... 1.0, + progressionStrategy: .increment(0.1), + format: \.percentageString ) /// Default typeface for the text. @@ -116,7 +149,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = preference( @@ -126,23 +158,53 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = - enumPreference( - preference: \.imageFilter, - setting: \.imageFilter, - isEffective: { $0.settings.theme == .dark }, - supportedValues: [nil, .darken, .invert] + /// Only effective when the publication is reflowable. + public lazy var invertGaiji: AnyPreference = + rangePreference( + preference: \.invertGaiji, + effectiveValue: { $0.settings.invertGaiji }, + defaultEffectiveValue: 0, + isEffective: { [layout] in + layout == .reflowable + && $0.preferences.invertGaiji != nil + }, + 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 by the given percentage. + /// + /// Only effective when the publication is reflowable. + public lazy var invertImages: AnyPreference = + rangePreference( + preference: \.invertImages, + effectiveValue: { $0.settings.invertImages }, + defaultEffectiveValue: 0, + isEffective: { [layout] in + layout == .reflowable + && $0.preferences.invertImages != nil + }, + 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. /// @@ -158,7 +220,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = rangePreference( @@ -168,7 +229,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = preference( @@ -190,7 +249,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = rangePreference( preference: \.lineHeight, @@ -207,7 +264,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = + /// Factor applied to the maximum line length. Defaults to 100%. + public lazy var lineLength: AnyRangePreference = rangePreference( - preference: \.pageMargins, - setting: \.pageMargins, - defaultEffectiveValue: defaults.pageMargins ?? 1.0, - isEffective: { [layout] _ in layout == .reflowable }, - supportedRange: 0.0 ... 4.0, - progressionStrategy: .increment(0.3), - format: { $0.formatDecimal(maximumFractionDigits: 5) } + preference: \.lineLength, + setting: \.lineLength, + defaultEffectiveValue: defaults.lineLength ?? 1.0, + isEffective: { _ in true }, + supportedRange: 0.0 ... 1.0, + progressionStrategy: .increment(0.1), + format: \.percentageString ) /// Text indentation for paragraphs. /// /// Only effective when: /// - the publication is reflowable - /// - `publisherStyles` is off /// - the layout is LTR or RTL public lazy var paragraphIndent: AnyRangePreference = rangePreference( @@ -243,7 +296,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = rangePreference( preference: \.paragraphSpacing, @@ -263,7 +314,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = - preference( - preference: \.publisherStyles, - setting: \.publisherStyles, - defaultEffectiveValue: defaults.publisherStyles ?? true, - isEffective: { [layout] _ in layout == .reflowable } - ) - /// Direction of the reading progression across resources. /// /// This can be changed to influence directly the layout (e.g. LTR or RTL). @@ -326,7 +364,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = enumPreference( @@ -335,7 +372,6 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor = - rangePreference( - preference: \.typeScale, - effectiveValue: { $0.settings.typeScale }, - defaultEffectiveValue: defaults.typeScale ?? 1.2, - isEffective: { [layout] in - layout == .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. @@ -428,11 +444,22 @@ public final class EPUBPreferencesEditor: StatefulPreferencesEditor { fatalError() } + + @available(*, unavailable, message: "Not available anymore") + public var typeScale: AnyRangePreference { fatalError() } + + @available(*, unavailable, message: "Not needed anymore") + public var publisherStyles: AnyPreference { fatalError() } + + @available(*, unavailable, message: "Use darkenImages and invertImages instead") + public var imageFilter: AnyEnumPreference { fatalError() } } diff --git a/Sources/Navigator/EPUB/Preferences/EPUBSettings.swift b/Sources/Navigator/EPUB/Preferences/EPUBSettings.swift index 65bbd6a33..bd987255b 100644 --- a/Sources/Navigator/EPUB/Preferences/EPUBSettings.swift +++ b/Sources/Navigator/EPUB/Preferences/EPUBSettings.swift @@ -12,20 +12,22 @@ import ReadiumShared /// See `EPUBPreferences` public struct EPUBSettings: ConfigurableSettings { public var backgroundColor: Color? - public var columnCount: ColumnCount + public var blendImages: Bool? + public var columnCount: Int + public var darkenImages: Double? public var fontFamily: FontFamily? public var fontSize: Double public var fontWeight: Double? public var hyphens: Bool? - public var imageFilter: ImageFilter? + public var invertGaiji: Double? + public var invertImages: Double? public var language: Language? public var letterSpacing: Double? public var ligatures: Bool? + public var lineLength: Double public var lineHeight: Double? - public var pageMargins: Double public var paragraphIndent: Double? public var paragraphSpacing: Double? - public var publisherStyles: Bool public var readingProgression: ReadingProgression public var scroll: Bool public var spread: Spread @@ -33,7 +35,6 @@ public struct EPUBSettings: ConfigurableSettings { public var textColor: Color? public var textNormalization: Bool public var theme: Theme - public var typeScale: Double? public var verticalText: Bool public var wordSpacing: Double? @@ -45,20 +46,22 @@ public struct EPUBSettings: ConfigurableSettings { public init( backgroundColor: Color?, - columnCount: ColumnCount, + blendImages: Bool?, + columnCount: Int, + darkenImages: Double?, fontFamily: FontFamily?, fontSize: Double, fontWeight: Double?, hyphens: Bool?, - imageFilter: ImageFilter?, + invertGaiji: Double?, + invertImages: Double?, language: Language?, letterSpacing: Double?, ligatures: Bool?, + lineLength: Double, lineHeight: Double?, - pageMargins: Double, paragraphIndent: Double?, paragraphSpacing: Double?, - publisherStyles: Bool, readingProgression: ReadingProgression, scroll: Bool, spread: Spread, @@ -66,25 +69,26 @@ public struct EPUBSettings: ConfigurableSettings { textColor: Color?, textNormalization: Bool, theme: Theme, - typeScale: Double?, verticalText: Bool, wordSpacing: Double? ) { self.backgroundColor = backgroundColor + self.blendImages = blendImages self.columnCount = columnCount + self.darkenImages = darkenImages self.fontFamily = fontFamily self.fontSize = fontSize self.fontWeight = fontWeight self.hyphens = hyphens - self.imageFilter = imageFilter + self.invertGaiji = invertGaiji + self.invertImages = invertImages self.language = language self.letterSpacing = letterSpacing self.ligatures = ligatures + self.lineLength = lineLength self.lineHeight = lineHeight - self.pageMargins = pageMargins self.paragraphIndent = paragraphIndent self.paragraphSpacing = paragraphSpacing - self.publisherStyles = publisherStyles self.readingProgression = readingProgression self.scroll = scroll self.spread = spread @@ -92,7 +96,6 @@ public struct EPUBSettings: ConfigurableSettings { self.textColor = textColor self.textNormalization = textNormalization self.theme = theme - self.typeScale = typeScale self.verticalText = verticalText self.wordSpacing = wordSpacing cssLayout = CSSLayout(verticalText: verticalText, language: language, readingProgression: readingProgression) @@ -136,9 +139,11 @@ public struct EPUBSettings: ConfigurableSettings { self.init( backgroundColor: preferences.backgroundColor, + blendImages: preferences.blendImages, columnCount: preferences.columnCount ?? defaults.columnCount - ?? .auto, + ?? 1, + darkenImages: preferences.darkenImages, fontFamily: preferences.fontFamily, fontSize: preferences.fontSize ?? defaults.fontSize @@ -147,25 +152,22 @@ public struct EPUBSettings: ConfigurableSettings { ?? defaults.fontWeight, hyphens: preferences.hyphens ?? defaults.hyphens, - imageFilter: preferences.imageFilter - ?? defaults.imageFilter, + invertGaiji: preferences.invertGaiji, + invertImages: preferences.invertImages, language: language, letterSpacing: preferences.letterSpacing ?? defaults.letterSpacing, ligatures: preferences.ligatures ?? defaults.ligatures, + lineLength: preferences.lineLength + ?? defaults.lineLength + ?? 1.0, lineHeight: preferences.lineHeight ?? defaults.lineHeight, - pageMargins: preferences.pageMargins - ?? defaults.pageMargins - ?? 1.0, paragraphIndent: preferences.paragraphIndent ?? defaults.paragraphIndent, paragraphSpacing: preferences.paragraphSpacing ?? defaults.paragraphSpacing, - publisherStyles: preferences.publisherStyles - ?? defaults.publisherStyles - ?? true, readingProgression: readingProgression, scroll: scroll, spread: preferences.spread @@ -180,13 +182,49 @@ public struct EPUBSettings: ConfigurableSettings { ?? false, theme: preferences.theme ?? .light, - typeScale: preferences.typeScale - ?? defaults.typeScale, verticalText: verticalText, wordSpacing: preferences.wordSpacing ?? defaults.wordSpacing ) } + + @available(*, unavailable, message: "Not supported anymore") + public var typeScale: Double? { nil } + + @available(*, unavailable, message: "Use lineLength") + public var pageMargins: Double? { nil } + + @available(*, unavailable, message: "Not needed anymore") + public var publisherStyles: Bool? { nil } + + @available(*, unavailable, message: "Use the other initializer") + public init( + backgroundColor: Color?, + columnCount: ColumnCount, + fontFamily: FontFamily?, + fontSize: Double, + fontWeight: Double?, + hyphens: Bool?, + imageFilter: ImageFilter?, + language: Language?, + letterSpacing: Double?, + ligatures: Bool?, + lineHeight: Double?, + pageMargins: Double, + paragraphIndent: Double?, + paragraphSpacing: Double?, + publisherStyles: Bool, + readingProgression: ReadingProgression, + scroll: Bool, + spread: Spread, + textAlign: TextAlignment?, + textColor: Color?, + textNormalization: Bool, + theme: Theme, + typeScale: Double?, + verticalText: Bool, + wordSpacing: Double? + ) { fatalError() } } /// Default setting values for the EPUB navigator. @@ -196,41 +234,36 @@ public struct EPUBSettings: ConfigurableSettings { /// /// See `EPUBPreferences`. public struct EPUBDefaults { - public var columnCount: ColumnCount? + public var columnCount: Int? public var fontSize: Double? public var fontWeight: Double? public var hyphens: Bool? - public var imageFilter: ImageFilter? public var language: Language? public var letterSpacing: Double? public var ligatures: Bool? + public var lineLength: Double? public var lineHeight: Double? - public var pageMargins: Double? public var paragraphIndent: Double? public var paragraphSpacing: Double? - public var publisherStyles: Bool? public var readingProgression: ReadingProgression? public var scroll: Bool? public var spread: Spread? public var textAlign: TextAlignment? public var textNormalization: Bool? - public var typeScale: Double? public var wordSpacing: Double? public init( - columnCount: ColumnCount? = nil, + columnCount: Int? = nil, fontSize: Double? = nil, fontWeight: Double? = nil, hyphens: Bool? = nil, - imageFilter: ImageFilter? = nil, language: Language? = nil, letterSpacing: Double? = nil, ligatures: Bool? = nil, + lineLength: Double? = nil, lineHeight: Double? = nil, - pageMargins: Double? = nil, paragraphIndent: Double? = nil, paragraphSpacing: Double? = nil, - publisherStyles: Bool? = nil, readingProgression: ReadingProgression? = nil, scroll: Bool? = nil, spread: Spread? = nil, @@ -243,23 +276,56 @@ public struct EPUBDefaults { self.fontSize = fontSize self.fontWeight = fontWeight self.hyphens = hyphens - self.imageFilter = imageFilter self.language = language self.letterSpacing = letterSpacing self.ligatures = ligatures + self.lineLength = lineLength self.lineHeight = lineHeight - self.pageMargins = pageMargins self.paragraphIndent = paragraphIndent self.paragraphSpacing = paragraphSpacing - self.publisherStyles = publisherStyles self.readingProgression = readingProgression self.scroll = scroll self.spread = spread self.textAlign = textAlign self.textNormalization = textNormalization - self.typeScale = typeScale self.wordSpacing = wordSpacing } + + @available(*, unavailable, message: "Use lineLength instead") + public var pageMargins: Double? { nil } + + @available(*, unavailable, message: "Not supported anymore") + public var typeScale: Double? { nil } + + @available(*, unavailable, message: "Not needed anymore") + public var publisherStyles: Bool? { nil } + + @available(*, unavailable, message: "Not supported anymore as a defaults") + public var imageFilter: ImageFilter? { nil } + + @available(*, unavailable, message: "Use the other initializer") + public init( + columnCount: ColumnCount? = nil, + fontSize: Double? = nil, + fontWeight: Double? = nil, + hyphens: Bool? = nil, + imageFilter: ImageFilter? = nil, + language: Language? = nil, + letterSpacing: Double? = nil, + ligatures: Bool? = nil, + lineHeight: Double? = nil, + pageMargins: Double? = nil, + paragraphIndent: Double? = nil, + paragraphSpacing: Double? = nil, + publisherStyles: Bool? = nil, + readingProgression: ReadingProgression? = nil, + scroll: Bool? = nil, + spread: Spread? = nil, + textAlign: TextAlignment? = nil, + textNormalization: Bool? = nil, + typeScale: Double? = nil, + wordSpacing: Double? = nil + ) { fatalError() } } private extension Language { diff --git a/Sources/Navigator/Preferences/Types.swift b/Sources/Navigator/Preferences/Types.swift index a49b1c0cb..a9172f33a 100644 --- a/Sources/Navigator/Preferences/Types.swift +++ b/Sources/Navigator/Preferences/Types.swift @@ -121,6 +121,7 @@ public enum ColumnCount: String, Codable, Hashable { } /// Filter used to render images in a reflowable document. +@available(*, unavailable) public enum ImageFilter: String, Codable, Hashable { case darken case invert diff --git a/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift b/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift index 759b30341..407a25193 100644 --- a/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift +++ b/TestApp/Sources/Reader/Common/Preferences/UserPreferences.swift @@ -94,27 +94,28 @@ struct UserPreferences< reflowableUserPreferences( commit: commit, backgroundColor: editor.backgroundColor, + blendImages: editor.blendImages, columnCount: editor.columnCount, + darkenImages: editor.darkenImages, fontFamily: editor.fontFamily, fontSize: editor.fontSize, fontWeight: editor.fontWeight, hyphens: editor.hyphens, - imageFilter: editor.imageFilter, + invertGaiji: editor.invertGaiji, + invertImages: editor.invertImages, language: editor.language, letterSpacing: editor.letterSpacing, ligatures: editor.ligatures, lineHeight: editor.lineHeight, - pageMargins: editor.pageMargins, + lineLength: editor.lineLength, 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 ) @@ -299,299 +300,285 @@ struct UserPreferences< @ViewBuilder func reflowableUserPreferences( commit: @escaping () -> Void, backgroundColor: AnyPreference? = nil, - columnCount: AnyEnumPreference? = nil, + blendImages: AnyPreference? = nil, + columnCount: AnyRangePreference? = nil, + darkenImages: AnyRangePreference? = nil, fontFamily: AnyPreference? = nil, fontSize: AnyRangePreference? = nil, fontWeight: AnyRangePreference? = nil, hyphens: AnyPreference? = nil, - imageFilter: AnyEnumPreference? = nil, + invertGaiji: AnyPreference? = nil, + invertImages: AnyPreference? = nil, language: AnyPreference? = nil, letterSpacing: AnyRangePreference? = nil, ligatures: AnyPreference? = nil, lineHeight: AnyRangePreference? = nil, - pageMargins: AnyRangePreference? = nil, + lineLength: 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 - ) - } + Section { + 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 scroll != nil || columnCount != nil || pageMargins != nil { - Section { - if let scroll = scroll { - toggleRow( - title: "Scroll", - preference: scroll, - commit: commit - ) - } + Section { + 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, + ) + } + } + + 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" } - ) - } + } + ) + } - if let pageMargins = pageMargins { - stepperRow( - title: "Page margins", - preference: pageMargins, - 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 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" - } - } - ) - } + Section { + if let blendImages = blendImages { + toggleRow( + title: "Blend images", + preference: blendImages, + commit: commit + ) + } - 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 darkenImages = darkenImages { + stepperRow( + title: "Darken images", + preference: darkenImages, + commit: commit + ) + } - if let textColor = textColor { - colorRow( - title: "Text color", - preference: textColor, - commit: commit - ) - } + if let invertImages = invertImages { + toggleRow( + title: "Invert images", + preference: invertImages, + commit: commit + ) + } - if let backgroundColor = backgroundColor { - colorRow( - title: "Background color", - preference: backgroundColor, - commit: commit - ) - } + if let invertGaiji = invertGaiji { + toggleRow( + title: "Invert gaiji", + preference: invertGaiji, + 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" + 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" } - ) - } - - 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" - } - } - ) + Section { + 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 - ) - } + if let lineLength = lineLength { + stepperRow( + title: "Line length", + preference: lineLength, + commit: commit + ) + } - 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 - ) - } + Section { + 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 + ) } } }