UNPKG

15.8 kBCSSView Raw
1/* Readium CSS
2 Config module
3
4 A file allowing implementers to customize flags for reading modes,
5 user settings, etc.
6
7 Repo: https://github.com/readium/readium-css */
8
9/* Custom medias
10 Syntax: @custom-media --variable (prop: value) */
11
12/* Responsive columns
13 The minimum width for which responsive columns (2 -> 1 and vice versa,
14 depending on the current font-size) must be enabled */
15
16/* Mobile columns
17 The minimum and maximum width for mobile devices.
18 We’re forcing the landscape orientation by default,
19 and must still investigate large tablets (iPad Pro, Surface Pro 3, etc.). */
20
21/* Custom selectors
22 Syntax: @custom-selector :--variable selector
23 The selectors you will use for flags/switches
24 You can alternatively use classes or custom data-* attributes */
25
26/* User view = paged | scrolled */
27
28/* Font-family override */
29
30/* Advanced settings */
31
32/* Reading Modes */
33
34/* Filters (images) */
35
36/* Accessibility normalization */
37
38/* Accessibility font. You can add selectors, using “, ” as a separator, if you have multiple fonts */
39
40/* Direction i.e. ltr and rtl */
41
42/* Readium CSS
43 Base module
44
45 A minimal stylesheet for all ebooks
46
47 Repo: https://github.com/readium/readium-css */
48
49@namespace url("http://www.w3.org/1999/xhtml");
50
51@namespace epub url("http://www.idpf.org/2007/ops");
52
53@namespace m url("http://www.w3.org/1998/Math/MathML/");
54
55@namespace svg url("http://www.w3.org/2000/svg");
56
57/* Define viewport, HTML5-style */
58
59@-ms-viewport {
60 width: device-width;
61}
62
63@viewport {
64 width: device-width;
65 zoom: 1;
66}
67
68:root {
69 /* Default font-stacks */
70 --RS__oldStyleTf: "Iowan Old Style", "Sitka Text", Palatino, "Book Antiqua", serif;
71 --RS__modernTf: Athelas, Constantia, Georgia, serif;
72 --RS__sansTf: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
73 --RS__humanistTf: Seravek, Calibri, Roboto, Arial, sans-serif;
74 --RS__monospaceTf: "Andale Mono", Consolas, monospace;
75
76 /* Config */
77 --RS__baseFontFamily: var(--RS__oldStyleTf);
78
79 /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */
80 --RS__lineHeightCompensation: 1;
81
82 /* Dynamic leading based on typeface metrics + font-size setting */
83 --RS__baseLineHeight: calc((1em + (2ex - 1ch) - ((1rem - 16px) * 0.1667)) * var(--RS__lineHeightCompensation));
84}
85
86/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */
87
88html {
89 font-family: var(--RS__baseFontFamily);
90 /* Fallback line-height */
91 line-height: 1.6; /* Fits a little bit better for all languages than 1.5 */
92 line-height: var(--RS__baseLineHeight);
93 text-rendering: optimizeLegibility;
94}
95
96/* 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) */
97
98h1, h2, h3 {
99 line-height: normal;
100}
101
102:lang(ja),
103:lang(zh),
104:lang(ko) {
105 word-wrap: break-word;
106 -webkit-line-break: strict;
107 -epub-line-break: strict;
108 line-break: strict;
109}
110
111/* Set default font for Math */
112
113math {
114 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;
115}
116
117/* Language Overrides
118 That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */
119
120:lang(am) {
121 --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif;
122 --RS__lineHeightCompensation: 1.167;
123}
124
125:lang(ar) {
126 --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif;
127}
128
129:lang(bn) {
130 --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif;
131 --RS__lineHeightCompensation: 1.067;
132}
133
134:lang(bo) {
135 --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif;
136}
137
138:lang(chr) {
139 --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee";
140 --RS__lineHeightCompensation: 1.167;
141}
142
143:lang(fa) {
144 --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif;
145}
146
147:lang(gu) {
148 --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif;
149 --RS__lineHeightCompensation: 1.167;
150}
151
152:lang(he) {
153 --RS__baseFontFamily: "New Peninim MT", "Arial Hebrew", Gisha, "Times New Roman", Roboto, Noto, "Noto Sans Hebrew" sans-serif;
154 --RS__lineHeightCompensation: 1.1;
155}
156
157:lang(hi) {
158 --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif;
159
160 --RS__lineHeightCompensation: 1.1;
161}
162
163:lang(hy) {
164 --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif;
165}
166
167:lang(iu) {
168 --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif;
169}
170
171:lang(ja) {
172 --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif;
173
174 /* For CJK, the line-height is usually 15–20% more than for Latin */
175 --RS__lineHeightCompensation: 1.167;
176
177 /* Extra variables for Japanese font-stacks as we may want to reuse them for user settings + default */
178 --RS__serif-ja: "MS P明朝", "MS PMincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "MS 明朝", "MS Mincho", "Hiragino Mincho ProN", serif;
179 --RS__sans-serif-ja: "MS Pゴシック", "MS PGothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "MS ゴシック", "MS Gothic", "Hiragino Sans", sans-serif;
180 --RS__serif-ja-v: "MS 明朝", "MS Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "MS P明朝", "MS PMincho", "Hiragino Mincho ProN", serif;
181 --RS__sans-serif-ja-v: "MS ゴシック", "MS Gothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "MS Pゴシック", "MS PGothic", "Hiragino Sans", sans-serif;
182}
183
184:lang(km) {
185 --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif;
186 --RS__lineHeightCompensation: 1.067;
187}
188
189:lang(kn) {
190 --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif;
191 --RS__lineHeightCompensation: 1.1;
192}
193
194:lang(ko) {
195 --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif;
196
197 /* For CJK, the line-height is usually 15–20% more than for Latin */
198 --RS__lineHeightCompensation: 1.167;
199}
200
201:lang(lo) {
202 --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif;
203}
204
205:lang(ml) {
206 --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif;
207 --RS__lineHeightCompensation: 1.067;
208}
209
210:lang(or) {
211 --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif;
212 --RS__lineHeightCompensation: 1.167;
213}
214
215:lang(pa) {
216 --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif;
217 --RS__lineHeightCompensation: 1.1;
218}
219
220:lang(si) {
221 --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif;
222 --RS__lineHeightCompensation: 1.167;
223}
224
225:lang(ta) {
226 --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif;
227 --RS__lineHeightCompensation: 1.067;
228}
229
230:lang(te) {
231 --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif;
232}
233
234:lang(th) {
235 --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif;
236 --RS__lineHeightCompensation: 1.067;
237}
238
239/* The following will also work for zh-Hans */
240
241:lang(zh) {
242 --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif;
243
244 /* For CJK, the line-height is usually 15–20% more than for Latin */
245 --RS__lineHeightCompensation: 1.167;
246}
247
248:lang(zh-Hant),
249:lang(zh-TW) {
250 --RS__baseFontFamily: "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif;
251
252 /* For CJK, the line-height is usually 15–20% more than for Latin */
253 --RS__lineHeightCompensation: 1.167;
254}
255
256:lang(zh-HK) {
257 --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif;
258
259 /* For CJK, the line-height is usually 15–20% more than for Latin */
260 --RS__lineHeightCompensation: 1.167;
261}
262
263/* Readium CSS
264 Day/Default mode
265
266 A preset theme for day mode, which is the default
267
268 Repo: https://github.com/readium/readium-css */
269
270/* CONFIG */
271
272:root {
273 --RS__backgroundColor: #FFFFFF;
274 --RS__textColor: #121212;
275
276 /* This can be customized but initial will re-use default value of the browser */
277 --RS__selectionBackgroundColor: #b4d8fe;
278 --RS__selectionTextColor: inherit;
279}
280
281:root {
282 color: var(--RS__textColor) !important;
283 background-color: var(--RS__backgroundColor) !important;
284}
285
286/* 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 */
287
288::-moz-selection {
289 color: var(--RS__selectionTextColor);
290 background-color: var(--RS__selectionBackgroundColor);
291}
292
293::selection {
294 color: var(--RS__selectionTextColor);
295 background-color: var(--RS__selectionBackgroundColor);
296}
297
298/* @import "modules/ReadiumCSS-fonts.css"; */
299
300/* Readium CSS
301 HTML5 SR Patch stylesheet
302
303 A set of style to adjust HTML5 Suggested Rendering to paginated content
304
305 Repo: https://github.com/readium/readium-css */
306
307/* Fragmentation */
308
309body {
310 widows: 2;
311 orphans: 2;
312}
313
314figcaption, th, td {
315 widows: 1;
316 orphans: 1;
317}
318
319h2, h3, h4, h5, h6, dt,
320hr, caption {
321 -webkit-column-break-after: avoid;
322 page-break-after: avoid;
323 break-after: avoid;
324}
325
326h1, h2, h3, h4, h5, h6, dt,
327figure, tr {
328 -webkit-column-break-inside: avoid;
329 page-break-inside: avoid;
330 break-inside: avoid;
331}
332
333/* Hyphenation */
334
335body {
336 -webkit-hyphenate-character: "\002D";
337 -moz-hyphenate-character: "\002D";
338 -ms-hyphenate-character: "\002D";
339 hyphenate-character: "\002D";
340 -webkit-hyphenate-limit-lines: 3;
341 -ms-hyphenate-limit-lines: 3;
342 hyphenate-limit-lines: 3;
343}
344
345h1, h2, h3, h4, h5, h6, dt,
346figcaption, pre, caption, address,
347center, code, var {
348 -ms-hyphens: none;
349 -moz-hyphens: none;
350 -webkit-hyphens: none;
351 -epub-hyphens: none;
352 hyphens: none;
353}
354
355/* OTF */
356
357body {
358 font-variant-numeric: oldstyle-nums proportional-nums;
359}
360
361:lang(ja) body,
362:lang(zh) body,
363:lang(ko) body {
364 font-variant-numeric: lining-nums proportional-nums;
365}
366
367h1, h2, h3, h4, h5, h6, dt {
368 font-variant-numeric: lining-nums proportional-nums;
369}
370
371table {
372 font-variant-numeric: lining-nums tabular-nums;
373}
374
375code, var {
376 font-variant-ligatures: none;
377 font-variant-numeric: lining-nums tabular-nums slashed-zero;
378}
379
380rt {
381 font-variant-east-asian: ruby;
382}
383
384:lang(ar) {
385 font-variant-ligatures: common-ligatures;
386}
387
388:lang(ko) {
389 font-kerning: normal;
390}
391
392/* Night mode */
393
394hr {
395 color: inherit;
396 border-color: currentColor;
397}
398
399table, th, td {
400 border-color: currentColor;
401}
402
403/* Horizontal Spacing */
404
405figure, blockquote {
406 margin: 1em 5%;
407}
408
409/*
410
411:lang(ja) figure, :lang(ja) blockquote,
412:lang(zh-Hant) figure, :lang(zh-Hant) blockquote,
413:lang(zh-TW) figure, :lang(zh-TW) blockquote,
414:lang(mn) figure, :lang(mn) blockquote {
415 margin: 5% 1em;
416}
417
418*/
419
420ul, ol {
421 padding-left: 5%;
422}
423
424/*
425
426:lang(ja) ul, :lang(ja) ol,
427:lang(zh-Hant) ul, :lang(zh-Hant) ol,
428:lang(zh-TW) ul, :lang(zh-TW) ol,
429:lang(mn) ul, :lang(mn) ol {
430 padding-top: 5%;
431}
432
433*/
434
435dd {
436 margin-left: 5%;
437}
438
439/*
440
441:lang(ja) dd,
442:lang(zh-Hant) dd,
443:lang(zh-TW) dd,
444:lang(mn) dd {
445 margin-top: 5%;
446}
447
448*/
449
450pre {
451 white-space: pre-wrap;
452 -ms-tab-size: 2;
453 -moz-tab-size: 2;
454 -webkit-tab-size: 2;
455 tab-size: 2;
456}
457
458/* Normalization */
459
460abbr[title], acronym[title] {
461 text-decoration: dotted underline;
462}
463
464nobr wbr {
465 white-space: normal;
466}
467
468/* Make ruby text and parentheses non-selectable (TBC) */
469
470ruby > rt, ruby > rp {
471 -webkit-user-select: none;
472 -moz-user-select: none;
473 -ms-user-select: none;
474 user-select: none;
475}
476
477/* Internationalization */
478
479*:lang(ja),
480*:lang(zh),
481*:lang(ko),
482:lang(ja) cite, :lang(ja) dfn, :lang(ja) em, :lang(ja) i,
483:lang(zh) cite, :lang(zh) dfn, :lang(zh) em, :lang(zh) i,
484:lang(ko) cite, :lang(ko) dfn, :lang(ko) em, :lang(ko) i {
485 font-style: normal;
486}
487
488:lang(ja) a,
489:lang(zh) a,
490:lang(ko) a {
491 text-decoration: none;
492}
493
494/* Readium CSS
495 Safeguards module
496
497 A set of styles to prevent common issues in pagination
498
499 Repo: https://github.com/readium/readium-css */
500
501/* Config */
502
503/* We’ll be using an "RS__" prefix so that we can prevent collisions with authors’ CSS */
504
505:root {
506 /* max-width for media, you can override that via JS if not compiled to static */
507 --RS__maxMediaWidth: 100%;
508
509 /* max-height for media, you can override that via JS if not compiled to static
510 Please consider figures might have a figcaption, which is why 95vh in the first place */
511 --RS__maxMediaHeight: 95vh;
512
513 /* value for medias’ box-sizing */
514 --RS__boxSizingMedia: border-box;
515
516 /* value for table’s box-sizing */
517 --RS__boxSizingTable: border-box;
518}
519
520/* Sanitize line-heights in webkit e.g. raised cap without a declared line-height
521 See effect by checking this demo in Safari: https://codepen.io/JayPanoz/pen/gRmzrE
522 Note: glyphs has to be reset to inline for CJK */
523
524html {
525 -webkit-line-box-contain: block glyphs replaced;
526}
527
528:lang(ja) {
529 -webkit-line-box-contain: block inline replaced;
530}
531
532/* Wrap long strings if larger than line-length */
533
534a, h1, h2, h3, h4, h5, h6 {
535 word-wrap: break-word;
536}
537
538div {
539 max-width: var(--RS__maxMediaWidth);
540}
541
542/* Size medias */
543
544/* You can override CSS variables by re-defining it for all elements or a specific one */
545
546img, svg, audio, video {
547
548 /* Object-fit allows us to keep the correct aspect-ratio */
549 object-fit: contain;
550
551 width: auto;
552 height: auto;
553
554 /* Some files don’t have max-width */
555 max-width: var(--RS__maxMediaWidth);
556
557 /* We’re setting a max-height, especially for covers */
558 max-height: var(--RS__maxMediaHeight) !important;
559 /* We probably don’t need to use modern box-sizing as auto behaves like it */
560 box-sizing: var(--RS__boxSizingMedia);
561
562 /* For page-break, we must use those 3
563 We can’t use a variable there, webkit seems to no support them for those properties */
564 -webkit-column-break-inside: avoid;
565 page-break-inside: avoid;
566 break-inside: avoid;
567}
568
569/* Try preventing border being cut-off, webkit + blink have content-box by default */
570
571table {
572 max-width: var(--RS__maxMediaWidth);
573 box-sizing: var(--RS__boxSizingTable);
574}
575/*# sourceMappingURL=ReadiumCSS-before.css.map */
\No newline at end of file