Repository navigation
Update Readium CSS to v2 - #890
Open
stevenzeck wants to merge 47 commits into
Open
stevenzeck wants to merge 47 commits into
stevenzeck wants to merge 47 commits into
Conversation
Makefile updates CSS, and optionally minifies it
stevenzeck
marked this pull request as ready for review
August 24, 2026 16:17
…rgins Replace the `lineLength` preference with `optimalLineLength`, `minimalLineLength` and `maximalLineLength`, which `LayoutResolver` uses to choose the number of columns and limit the width of the lines. `pageMargins` is kept as a factor applied to the minimal margins on each side of the lines. Stop emitting `--RS__pageGutter`: `body` is `border-box`, so the gutter was added on top of the margins computed from the reduced line length. No layout-related properties are emitted until the viewport size is known and the layout is resolved.
`EPUBPreferencesEditor.lineHeight` reported and stepped from 1.2 when the preference was unset, which was the base line height of Readium CSS v1. Readium CSS v2 uses 1.5 (`--RS__baseLineHeight`) for Latin scripts.
Readium CSS v2 applies `--USER__ligatures` in the default (LTR) and RTL stylesheets, but `EPUBPreferencesEditor.ligatures` reported itself as effective only with RTL layouts. It stays ineffective with CJK layouts, where Readium CSS ignores the setting.
With Readium CSS v2, `darkenImages`, `invertImages` and `invertGaiji` are applied as soon as they are set, whatever the theme. Remove the outdated "Requires: appearance = Night" comments from `CSSUserProperties` and rewrite the Preferences guide section, which now explains each filter and what gaiji are.
`EPUBSettings.blendImages` is now a `Bool` falling back on `EPUBDefaults.blendImages`, then `false`. `EPUBPreferencesEditor.blendImages` becomes an `AnyPreference<Bool>`, which can be bound to a toggle without mapping an optional.
`EPUBPreferencesEditor.blendImages`, `darkenImages`, `invertImages`, `invertGaiji` and `noRuby` checked the default layout of the publication to tell if they are effective. They now check whether the reading order contains reflowable resources, like the other reflowable preferences, so they are effective in a fixed-layout publication with a reflowable chapter.
Readium CSS v2 has no themes, so `theme = .dark` or `.sepia` no longer recolored the reflowable content. `theme` is removed from `EPUBPreferences`, `EPUBSettings` and `EPUBPreferencesEditor`, with the `Theme` enum, `CSSUserProperties.appearance` and `CSSAppearance`. Apps build their themes with the `textColor` and `backgroundColor` preferences, and the new `linkColor` and `visitedColor`. An unset color keeps the one of the publication. A `theme` saved by a previous version and the legacy `appearance` setting are migrated to the colors they had with Readium CSS v1, the colors saved explicitly taking precedence. The dark theme also migrates to `invertGaiji`, as it inverted the gaiji. The Test App has a sample theme picker derived from the four colors.
… CSS v2 `letterSpacing` is now effective with CJK languages and `wordSpacing` with right-to-left languages, matching the user settings handled by each bundled Readium CSS v2 stylesheet. An unset `ligatures` preference now reads as `true` in the editor, as nothing is emitted and WebKit renders common ligatures by default.
The `StatefulPreferencesEditor` helpers for preferences whose value is optional (EPUB `columnCount`, `textAlign`, `fontFamily`, `language`, `offsetFirstPage`, PDF `backgroundColor`) returned `.some(nil)` when the preference was unset, so `value ?? effectiveValue` ignored the `EPUBDefaults`. They now return `nil`, like `optionalRangePreference`.
SVG documents can't be reflowed and Readium CSS is injected only in HTML resources, so they are now resolved as fixed-layout like bitmaps, even in a reflowable publication. The fixed-layout page reads their size from the root viewBox (EPUB 3.3), then from their absolute width and height, and makes the root fill the page.
Readium CSS v2 applies `--USER__fontWidth` as `font-stretch` on the body, for the fonts with a width axis (typically variable fonts). The preference is a factor (1.0 = 100%) from 50% to 250%, emitted as a percentage, and effective in the editor only when set and when the publication contains reflowable resources.
The `fontWeight` setting was applied as a raw `font-weight` on `:root`, a leftover of the Readium CSS v1 port. It is now emitted as `--USER__fontWeight` (400 × the factor, limited to 1 ... 1000), so the weight is forced on the body text over the publisher styles and bold text is rendered bolder relative to it.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR updates the toolkit to use Readium CSS v2.
copy-webpack-plugincopies the files from thenode_modulesdirectory intoSources/Navigator/EPUB/Assets/Static/readium-css.noRubyandlineLengthproperties.maxLineLengthin favor of the newdefaultLineLength.columnCountfrom an enum to an Int.imageFilterwithblendImages,darkenImages,invertImages, andinvertGaiji.