Skip to content

Commit e34b47d

Browse files
JayPanozJayPanoz
authored
Readium css normalization fix (#167)
1 parent 377b386 commit e34b47d

File tree

4 files changed

+128
-117
lines changed

4 files changed

+128
-117
lines changed

‎navigator/CHANGELOG.MD‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [2.2.3] - 2025-11-01
9+
10+
### Fixed
11+
12+
- Implements fix from ReadiumCSS where text normalization would override the font weight set through the Preferences API
13+
14+
### Changed
15+
16+
- Updates ReadiumCSS with some slight improvement for text alignment
17+
818
## [2.2.2] - 2025-10-30
919

1020
### Added

‎navigator/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@readium/navigator",
3-
"version": "2.2.2",
3+
"version": "2.2.3",
44
"type": "module",
55
"description": "Next generation SDK for publications in Web Apps",
66
"author": "readium",
@@ -49,7 +49,7 @@
4949
},
5050
"devDependencies": {
5151
"@laynezh/vite-plugin-lib-assets": "^2.1.0",
52-
"@readium/css": "2.0.0-beta.19",
52+
"@readium/css": "2.0.0-beta.20",
5353
"@readium/navigator-html-injectables": "workspace:*",
5454
"@readium/shared": "workspace:*",
5555
"@types/path-browserify": "^1.0.3",

‎navigator/src/webpub/css/WebPubStylesheet.ts‎

Lines changed: 111 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
// WebPubCSS is equivalent to ReadiumCSS for WebPub
2+
// Respects the stylesheet order from after
23

34
export const webPubStylesheet = `
4-
/* FontFamily */
5-
6-
:root[style*="--USER__fontFamily"] {
7-
font-family: var(--USER__fontFamily) !important;
8-
}
9-
10-
:root[style*="--USER__fontFamily"] * {
11-
font-family: revert !important;
12-
}
13-
14-
/* FontWeight */
5+
/* TextAlign */
156
16-
:root[style*="--USER__fontWeight"] body {
17-
font-weight: var(--USER__fontWeight) !important;
7+
:root[style*="--USER__textAlign"] {
8+
text-align: var(--USER__textAlign);
189
}
1910
20-
/* Attempt to handle known bolds */
21-
:root[style*="--USER__fontWeight"] b,
22-
:root[style*="--USER__fontWeight"] strong {
23-
font-weight: bolder;
11+
:root[style*="--USER__textAlign"] body,
12+
:root[style*="--USER__textAlign"] p:not([class*="title"]):not(blockquote p):not(figcaption p):not(header p):not(hgroup p):not(div:has(+ *) > h1 + p):not(div:has(+ *) > p:has(+ h1)),
13+
:root[style*="--USER__textAlign"] li,
14+
:root[style*="--USER__textAlign"] dd {
15+
text-align: var(--USER__textAlign) !important;
16+
-moz-text-align-last: auto !important;
17+
-epub-text-align-last: auto !important;
18+
text-align-last: auto !important;
2419
}
2520
2621
/* Hyphens */
@@ -45,84 +40,14 @@ export const webPubStylesheet = `
4540
hyphens: inherit;
4641
}
4742
48-
/* LetterSpacing */
49-
50-
:root[style*="--USER__letterSpacing"] h1,
51-
:root[style*="--USER__letterSpacing"] h2,
52-
:root[style*="--USER__letterSpacing"] h3,
53-
:root[style*="--USER__letterSpacing"] h4,
54-
:root[style*="--USER__letterSpacing"] h5,
55-
:root[style*="--USER__letterSpacing"] h6,
56-
:root[style*="--USER__letterSpacing"] p,
57-
:root[style*="--USER__letterSpacing"] li,
58-
:root[style*="--USER__letterSpacing"] div,
59-
:root[style*="--USER__letterSpacing"] dt,
60-
:root[style*="--USER__letterSpacing"] dd {
61-
letter-spacing: var(--USER__letterSpacing);
62-
font-variant: none;
63-
}
64-
65-
/* Ligatures */
66-
67-
:root[style*="--USER__ligatures"] {
68-
font-variant-ligatures: var(--USER__ligatures) !important;
69-
}
70-
71-
:root[style*="--USER__ligatures"] * {
72-
font-variant-ligatures: inherit !important;
73-
}
74-
75-
/* LineHeight */
76-
77-
:root[style*="--USER__lineHeight"] {
78-
line-height: var(--USER__lineHeight) !important;
79-
}
80-
81-
:root[style*="--USER__lineHeight"] body,
82-
:root[style*="--USER__lineHeight"] p,
83-
:root[style*="--USER__lineHeight"] li,
84-
:root[style*="--USER__lineHeight"] div {
85-
line-height: inherit;
86-
}
87-
88-
/* ParagraphIndent */
89-
90-
:root[style*="--USER__paraIndent"] p {
91-
text-indent: var(--USER__paraIndent) !important;
92-
}
93-
94-
:root[style*="--USER__paraIndent"] p *,
95-
:root[style*="--USER__paraIndent"] p:first-letter {
96-
text-indent: 0 !important;
97-
}
98-
99-
/* ParagraphSpacing */
100-
101-
:root[style*="--USER__paraSpacing"] p {
102-
margin-block: var(--USER__paraSpacing) !important;
103-
}
104-
105-
/* Ruby */
106-
107-
:root[style*="readium-noRuby-on"] body rt,
108-
:root[style*="readium-noRuby-on"] body rp {
109-
display: none;
110-
}
111-
112-
/* TextAlign */
43+
/* FontFamily */
11344
114-
:root[style*="--USER__textAlign"] {
115-
text-align: var(--USER__textAlign);
45+
:root[style*="--USER__fontFamily"] {
46+
font-family: var(--USER__fontFamily) !important;
11647
}
11748
118-
:root[style*="--USER__textAlign"] body,
119-
:root[style*="--USER__textAlign"] p:not(blockquote p):not(figcaption p):not(hgroup p),
120-
:root[style*="--USER__textAlign"] li,
121-
:root[style*="--USER__textAlign"] dd {
122-
text-align: var(--USER__textAlign) !important;
123-
-moz-text-align-last: auto !important;
124-
-epub-text-align-last: auto !important;
125-
text-align-last: auto !important;
49+
:root[style*="--USER__fontFamily"] * {
50+
font-family: revert !important;
12651
}
12752
12853
/* TextNormalize */
@@ -132,13 +57,13 @@ export const webPubStylesheet = `
13257
font-style: normal !important;
13358
}
13459
135-
:root[style*="readium-a11y-on"] *:not(code):not(var):not(kbd):not(samp) {
60+
:root[style*="readium-a11y-on"] body *:not(code):not(var):not(kbd):not(samp) {
13661
font-family: inherit !important;
13762
font-weight: inherit !important;
13863
font-style: inherit !important;
13964
}
14065
141-
:root[style*="readium-a11y-on"] * {
66+
:root[style*="readium-a11y-on"] body * {
14267
text-decoration: none !important;
14368
font-variant-caps: normal !important;
14469
font-variant-position: normal !important;
@@ -151,22 +76,6 @@ export const webPubStylesheet = `
15176
vertical-align: baseline !important;
15277
}
15378
154-
/* Word Spacing */
155-
156-
:root[style*="--USER__wordSpacing"] h1,
157-
:root[style*="--USER__wordSpacing"] h2,
158-
:root[style*="--USER__wordSpacing"] h3,
159-
:root[style*="--USER__wordSpacing"] h4,
160-
:root[style*="--USER__wordSpacing"] h5,
161-
:root[style*="--USER__wordSpacing"] h6,
162-
:root[style*="--USER__wordSpacing"] p,
163-
:root[style*="--USER__wordSpacing"] li,
164-
:root[style*="--USER__wordSpacing"] div,
165-
:root[style*="--USER__wordSpacing"] dt,
166-
:root[style*="--USER__wordSpacing"] dd {
167-
word-spacing: var(--USER__wordSpacing);
168-
}
169-
17079
/* Zoom */
17180
17281
:root {
@@ -201,4 +110,96 @@ export const webPubStylesheet = `
201110
zoom: var(--USER__zoom) !important;
202111
}
203112
}
113+
114+
/* LineHeight */
115+
116+
:root[style*="--USER__lineHeight"] {
117+
line-height: var(--USER__lineHeight) !important;
118+
}
119+
120+
:root[style*="--USER__lineHeight"] body,
121+
:root[style*="--USER__lineHeight"] p,
122+
:root[style*="--USER__lineHeight"] li,
123+
:root[style*="--USER__lineHeight"] div {
124+
line-height: inherit;
125+
}
126+
127+
/* ParagraphSpacing */
128+
129+
:root[style*="--USER__paraSpacing"] p {
130+
margin-block: var(--USER__paraSpacing) !important;
131+
}
132+
133+
/* ParagraphIndent */
134+
135+
:root[style*="--USER__paraIndent"] p {
136+
text-indent: var(--USER__paraIndent) !important;
137+
}
138+
139+
:root[style*="--USER__paraIndent"] p *,
140+
:root[style*="--USER__paraIndent"] p:first-letter {
141+
text-indent: 0 !important;
142+
}
143+
144+
/* WordSpacing */
145+
146+
:root[style*="--USER__wordSpacing"] h1,
147+
:root[style*="--USER__wordSpacing"] h2,
148+
:root[style*="--USER__wordSpacing"] h3,
149+
:root[style*="--USER__wordSpacing"] h4,
150+
:root[style*="--USER__wordSpacing"] h5,
151+
:root[style*="--USER__wordSpacing"] h6,
152+
:root[style*="--USER__wordSpacing"] p,
153+
:root[style*="--USER__wordSpacing"] li,
154+
:root[style*="--USER__wordSpacing"] div,
155+
:root[style*="--USER__wordSpacing"] dt,
156+
:root[style*="--USER__wordSpacing"] dd {
157+
word-spacing: var(--USER__wordSpacing);
158+
}
159+
160+
/* LetterSpacing */
161+
162+
:root[style*="--USER__letterSpacing"] h1,
163+
:root[style*="--USER__letterSpacing"] h2,
164+
:root[style*="--USER__letterSpacing"] h3,
165+
:root[style*="--USER__letterSpacing"] h4,
166+
:root[style*="--USER__letterSpacing"] h5,
167+
:root[style*="--USER__letterSpacing"] h6,
168+
:root[style*="--USER__letterSpacing"] p,
169+
:root[style*="--USER__letterSpacing"] li,
170+
:root[style*="--USER__letterSpacing"] div,
171+
:root[style*="--USER__letterSpacing"] dt,
172+
:root[style*="--USER__letterSpacing"] dd {
173+
letter-spacing: var(--USER__letterSpacing);
174+
font-variant: none;
175+
}
176+
177+
/* FontWeight */
178+
179+
:root[style*="--USER__fontWeight"] body {
180+
font-weight: var(--USER__fontWeight) !important;
181+
}
182+
183+
/* Attempt to handle known bolds */
184+
:root[style*="--USER__fontWeight"] b,
185+
:root[style*="--USER__fontWeight"] strong {
186+
font-weight: bolder;
187+
}
188+
189+
/* Ruby */
190+
191+
:root[style*="readium-noRuby-on"] body rt,
192+
:root[style*="readium-noRuby-on"] body rp {
193+
display: none;
194+
}
195+
196+
/* Ligatures */
197+
198+
:root[style*="--USER__ligatures"] {
199+
font-variant-ligatures: var(--USER__ligatures) !important;
200+
}
201+
202+
:root[style*="--USER__ligatures"] * {
203+
font-variant-ligatures: inherit !important;
204+
}
204205
`;

‎pnpm-lock.yaml‎

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)