Comments (2)
JayPanoz
commented on June 11, 2024
A small update: we’re using CSS variables in the iOS implementation, for both flags and updated values, with inheritance kicking in whenever possible.
Which means that if you need it to be cross-platform, flags can be custom data-* attributes, most values can be appended as inline styles on html and some other user-settings can once again be custom data-* attributes, with preset values.
For instance
<html style="font-size: 200%; font-family: Seravek, sans-serif" data-reading-mode="night" data-user-margins="xl">
So you should still be able to manage everything in the same place: the html tag. I’ve made sure that our approach could quickly turn to fallbacks if needed when we started designing it.
Of course it requires you edit stylesheets’ selectors a little bit (user settings) but you should get ± the same performance as the one we can currently get in iOS.
from readium-css.
JayPanoz
commented on June 11, 2024
So to put it simply:
- Most of ReadiumCSS should work if you build a static representation (using the
postcss-css-variablesplugin, as described in the PostCSS doc), so you can definitely use it; - user settings won’t though, so you’ll have to implement that using JS for instance.
In other words, change the custom selectors to manage reading modes, flags (advanced settings) and use either custom attributes or classes, then manage user preferences using JS (you can test for CSS variables using JS, as explained in the CSS variables doc).
There is little chance this decision will be reversed in the future as it’s a lot of work for a small usage and user settings fallbacks were partial, and subpar, especially as we removed support for Android 4.x.x.
You can still use this issue for questions though.
from readium-css.
Related Issues (20)
- Some combination of authored styles causing "cover" image to disappear HOT 1
- Adjusting font size for text in blockquote HOT 1
- Paragraphs and headings not affected by font-size HOT 19
- -webkit-line-box-contain: block glyphs replaced; breaks line-height HOT 10
- dark mode with white images HOT 4
- Fixed-layout font-size affected by Android device settings HOT 1
- `-webkit-perspective: 1` kills performance in CSS column paginated large HTML documents HOT 11
- EPUB with `overflow-x: hidden` style breaks pagination HOT 12
- CSS HTML5 patch causes some digits to descent from baseline HOT 4
- CSS HTML5 patch causes some digits to descent from baseline
- CSS HTML5 patch causes some digits to descent from baseline
- Long hyperlinks overlap on the next column HOT 3
- forcing "start" text alignment (left or right depending on document language) does not work with "inherit" HOT 1
- Overflow on long words HOT 4
- in scroll mode, "page width" (line length) is too short HOT 19
- Target for Browser/Webview support? HOT 3
- Dist stylesheets and minification HOT 4
- Default Stylesheet for non-reflowable EPUB contents e.g. reading mode HOT 2
- ReadiumCSS Reset/Unset
- Fonts update HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from readium-css.