UNPKG

16.6 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/* Readium CSS
299 Fonts module
300
301 A stylesheet for embedded fonts
302
303 Repo: https://github.com/readium/readium-css */
304
305/* /!\ Mind the path (relative to the folders in which you have stylesheets and the fonts) */
306
307@font-face {
308 font-family: AccessibleDfA;
309 font-style: normal;
310 font-weight: normal;
311 src: local("AccessibleDfA"),
312 url("fonts/AccessibleDfA.otf") format("opentype");
313}
314
315@font-face {
316 font-family: "IA Writer Duospace";
317 font-style: normal;
318 font-weight: normal;
319 src: local("iAWriterDuospace-Regular"),
320 url("fonts/iAWriterDuospace-Regular.ttf") format("truetype");
321}
322
323/* If you have different weights/styles,
324 use `font-weight` and `font-style`,
325 not prefixes in the font-family name,
326 or else it will be a nightmare to manage in user settings. */
327
328/* Readium CSS
329 HTML5 SR Patch stylesheet
330
331 A set of style to adjust HTML5 Suggested Rendering to paginated content
332
333 Repo: https://github.com/readium/readium-css */
334
335/* Fragmentation */
336
337body {
338 widows: 2;
339 orphans: 2;
340}
341
342figcaption, th, td {
343 widows: 1;
344 orphans: 1;
345}
346
347h2, h3, h4, h5, h6, dt,
348hr, caption {
349 -webkit-column-break-after: avoid;
350 page-break-after: avoid;
351 break-after: avoid;
352}
353
354h1, h2, h3, h4, h5, h6, dt,
355figure, tr {
356 -webkit-column-break-inside: avoid;
357 page-break-inside: avoid;
358 break-inside: avoid;
359}
360
361/* Hyphenation */
362
363body {
364 -webkit-hyphenate-character: "\002D";
365 -moz-hyphenate-character: "\002D";
366 -ms-hyphenate-character: "\002D";
367 hyphenate-character: "\002D";
368 -webkit-hyphenate-limit-lines: 3;
369 -ms-hyphenate-limit-lines: 3;
370 hyphenate-limit-lines: 3;
371}
372
373h1, h2, h3, h4, h5, h6, dt,
374figcaption, pre, caption, address,
375center, code, var {
376 -ms-hyphens: none;
377 -moz-hyphens: none;
378 -webkit-hyphens: none;
379 -epub-hyphens: none;
380 hyphens: none;
381}
382
383/* OTF */
384
385body {
386 font-variant-numeric: oldstyle-nums proportional-nums;
387}
388
389:lang(ja) body,
390:lang(zh) body,
391:lang(ko) body {
392 font-variant-numeric: lining-nums proportional-nums;
393}
394
395h1, h2, h3, h4, h5, h6, dt {
396 font-variant-numeric: lining-nums proportional-nums;
397}
398
399table {
400 font-variant-numeric: lining-nums tabular-nums;
401}
402
403code, var {
404 font-variant-ligatures: none;
405 font-variant-numeric: lining-nums tabular-nums slashed-zero;
406}
407
408rt {
409 font-variant-east-asian: ruby;
410}
411
412:lang(ar) {
413 font-variant-ligatures: common-ligatures;
414}
415
416:lang(ko) {
417 font-kerning: normal;
418}
419
420/* Night mode */
421
422hr {
423 color: inherit;
424 border-color: currentColor;
425}
426
427table, th, td {
428 border-color: currentColor;
429}
430
431/* Horizontal Spacing */
432
433figure, blockquote {
434 margin: 1em 5%;
435}
436
437/*
438
439:lang(ja) figure, :lang(ja) blockquote,
440:lang(zh-Hant) figure, :lang(zh-Hant) blockquote,
441:lang(zh-TW) figure, :lang(zh-TW) blockquote,
442:lang(mn) figure, :lang(mn) blockquote {
443 margin: 5% 1em;
444}
445
446*/
447
448ul, ol {
449 padding-left: 5%;
450}
451
452/*
453
454:lang(ja) ul, :lang(ja) ol,
455:lang(zh-Hant) ul, :lang(zh-Hant) ol,
456:lang(zh-TW) ul, :lang(zh-TW) ol,
457:lang(mn) ul, :lang(mn) ol {
458 padding-top: 5%;
459}
460
461*/
462
463dd {
464 margin-left: 5%;
465}
466
467/*
468
469:lang(ja) dd,
470:lang(zh-Hant) dd,
471:lang(zh-TW) dd,
472:lang(mn) dd {
473 margin-top: 5%;
474}
475
476*/
477
478pre {
479 white-space: pre-wrap;
480 -ms-tab-size: 2;
481 -moz-tab-size: 2;
482 -webkit-tab-size: 2;
483 tab-size: 2;
484}
485
486/* Normalization */
487
488abbr[title], acronym[title] {
489 text-decoration: dotted underline;
490}
491
492nobr wbr {
493 white-space: normal;
494}
495
496/* Make ruby text and parentheses non-selectable (TBC) */
497
498ruby > rt, ruby > rp {
499 -webkit-user-select: none;
500 -moz-user-select: none;
501 -ms-user-select: none;
502 user-select: none;
503}
504
505/* Internationalization */
506
507*:lang(ja),
508*:lang(zh),
509*:lang(ko),
510:lang(ja) cite, :lang(ja) dfn, :lang(ja) em, :lang(ja) i,
511:lang(zh) cite, :lang(zh) dfn, :lang(zh) em, :lang(zh) i,
512:lang(ko) cite, :lang(ko) dfn, :lang(ko) em, :lang(ko) i {
513 font-style: normal;
514}
515
516:lang(ja) a,
517:lang(zh) a,
518:lang(ko) a {
519 text-decoration: none;
520}
521
522/* Readium CSS
523 Safeguards module
524
525 A set of styles to prevent common issues in pagination
526
527 Repo: https://github.com/readium/readium-css */
528
529/* Config */
530
531/* We’ll be using an "RS__" prefix so that we can prevent collisions with authors’ CSS */
532
533:root {
534 /* max-width for media, you can override that via JS if not compiled to static */
535 --RS__maxMediaWidth: 100%;
536
537 /* max-height for media, you can override that via JS if not compiled to static
538 Please consider figures might have a figcaption, which is why 95vh in the first place */
539 --RS__maxMediaHeight: 95vh;
540
541 /* value for medias’ box-sizing */
542 --RS__boxSizingMedia: border-box;
543
544 /* value for table’s box-sizing */
545 --RS__boxSizingTable: border-box;
546}
547
548/* Sanitize line-heights in webkit e.g. raised cap without a declared line-height
549 See effect by checking this demo in Safari: https://codepen.io/JayPanoz/pen/gRmzrE
550 Note: glyphs has to be reset to inline for CJK */
551
552html {
553 -webkit-line-box-contain: block glyphs replaced;
554}
555
556:lang(ja) {
557 -webkit-line-box-contain: block inline replaced;
558}
559
560/* Wrap long strings if larger than line-length */
561
562a, h1, h2, h3, h4, h5, h6 {
563 word-wrap: break-word;
564}
565
566div {
567 max-width: var(--RS__maxMediaWidth);
568}
569
570/* Size medias */
571
572/* You can override CSS variables by re-defining it for all elements or a specific one */
573
574img, svg, audio, video {
575
576 /* Object-fit allows us to keep the correct aspect-ratio */
577 object-fit: contain;
578
579 width: auto;
580 height: auto;
581
582 /* Some files don’t have max-width */
583 max-width: var(--RS__maxMediaWidth);
584
585 /* We’re setting a max-height, especially for covers */
586 max-height: var(--RS__maxMediaHeight) !important;
587 /* We probably don’t need to use modern box-sizing as auto behaves like it */
588 box-sizing: var(--RS__boxSizingMedia);
589
590 /* For page-break, we must use those 3
591 We can’t use a variable there, webkit seems to no support them for those properties */
592 -webkit-column-break-inside: avoid;
593 page-break-inside: avoid;
594 break-inside: avoid;
595}
596
597/* Try preventing border being cut-off, webkit + blink have content-box by default */
598
599table {
600 max-width: var(--RS__maxMediaWidth);
601 box-sizing: var(--RS__boxSizingTable);
602}
603/*# sourceMappingURL=ReadiumCSS-before.css.map */
\No newline at end of file