@readium/css/css/src/modules/ReadiumCSS-base.css

A set of reference stylesheets for EPUB Reading Systems

/* Readium CSS
   Base module

   A minimal stylesheet for all ebooks

   Repo: https://github.com/readium/css */

/* Define viewport, HTML5-style */
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
  zoom: 1;
}

:root {
  /* Default font-stacks */
  @import-json "../../vars/fontStacks.json";

  /* Config */
  --RS__baseFontFamily: var(--RS__oldStyleTf);

  /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */
  --RS__lineHeightCompensation: 1;

  --RS__baseLineHeight: calc(1.5 * var(--RS__lineHeightCompensation));

  /* Default colors (previously implemented as day mode) */
  @import-json "../../vars/colors.json";

  background-color: var(--RS__backgroundColor) !important;
  color: var(--RS__textColor) !important;
}

/* Note: We’re not defining colors of links cos’ the selector specificity with :link and :visited could override publishers’ styles */

/* 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 */
::-moz-selection {
  background-color: var(--RS__selectionBackgroundColor);
  color: var(--RS__selectionTextColor);
}

::selection {
  background-color: var(--RS__selectionBackgroundColor);
  color: var(--RS__selectionTextColor);
}

/* Set default font for the html doc, so that it can be overridden by the authors’s stylesheet */
html {
  font-family: var(--RS__baseFontFamily);
  /* Fallback line-height */
  line-height: 1.6; /* Fits a little bit better for all languages than 1.5 */
  line-height: var(--RS__baseLineHeight);
  text-rendering: optimizeLegibility;
}

/* 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) */
h1, h2, h3 {
  line-height: normal;
}

:lang(ja),
:lang(zh),
:lang(ko) {
  word-wrap: break-word;
  -webkit-line-break: strict;
  -epub-line-break: strict;
  line-break: strict;
}

/* Set default font for Math */

math {
  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;
}

/* Language Overrides
   That will only work if either html or body have a (xml:)lang attribute, not for inline overrides */

:lang(am) {
  --RS__baseFontFamily: Kefa, Nyala, Roboto, Noto, "Noto Sans Ethiopic", serif;
  --RS__lineHeightCompensation: 1.167;
}

:lang(ar) {
  --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif;
}

:lang(bn) {
  --RS__baseFontFamily: "Kohinoor Bangla", "Bangla Sangam MN", Vrinda, Roboto, Noto, "Noto Sans Bengali", sans-serif;
  --RS__lineHeightCompensation: 1.067;
}

:lang(bo) {
  --RS__baseFontFamily: Kailasa, "Microsoft Himalaya", Roboto, Noto, "Noto Sans Tibetan", sans-serif;
}

:lang(chr) {
  --RS__baseFontFamily: "Plantagenet Cherokee", Roboto, Noto, "Noto Sans Cherokee";
  --RS__lineHeightCompensation: 1.167;
}

:lang(fa) {
  --RS__baseFontFamily: "Geeza Pro", "Arabic Typesetting", Roboto, Noto, "Noto Naskh Arabic", "Times New Roman", serif;
}

:lang(gu) {
  --RS__baseFontFamily: "Gujarati Sangam MN", "Nirmala UI", Shruti, Roboto, Noto, "Noto Sans Gujarati", sans-serif;
  --RS__lineHeightCompensation: 1.167;
}

:lang(he) {
  --RS__baseFontFamily: "New Peninim MT", "Arial Hebrew", Gisha, "Times New Roman", Roboto, Noto, "Noto Sans Hebrew" sans-serif;
  --RS__lineHeightCompensation: 1.1;
}

:lang(hi) {
  --RS__baseFontFamily: "Kohinoor Devanagari", "Devanagari Sangam MN", Kokila, "Nirmala UI", Roboto, Noto, "Noto Sans Devanagari", sans-serif;

  --RS__lineHeightCompensation: 1.1;
}

:lang(hy) {
  --RS__baseFontFamily: Mshtakan, Sylfaen, Roboto, Noto, "Noto Serif Armenian", serif;
}

:lang(iu) {
  --RS__baseFontFamily: "Euphemia UCAS", Euphemia, Roboto, Noto, "Noto Sans Canadian Aboriginal", sans-serif;
}

:lang(ja) {
  --RS__baseFontFamily: YuGothic, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif;

  /* For CJK, the line-height is usually 15–20% more than for Latin */
  --RS__lineHeightCompensation: 1.167;

  /* Extra variables for Japanese font-stacks as we may want to reuse them for user settings + default */
  /* This setting uses the BIZ UD font for serif and the Yu font for sans serif on Windows. Note: When using the BIZ UD font for vertical writing display, if you set half-width (ASCII) characters to stand upright with `text-orientation: upright`, the width of these characters is narrow. By specifying `font-variant-east-asian: full-width;` at the same time, you can display the characters with the width of one full-width character. */
  --RS__serif-ja: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDPMincho", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  --RS__sans-serif-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3", "YuGothic", "Yu Gothic Medium", "BIZ UDPGothic", "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  --RS__serif-ja-v: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDMincho", "Yu Mincho", "ＭＳ明朝", "MS Mincho", serif;
  --RS__sans-serif-ja-v: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3", "YuGothic", "Yu Gothic Medium", "BIZ UDGothic", "Yu Gothic", "ＭＳゴシック", "MS Gothic", sans-serif;
}

:lang(km) {
  --RS__baseFontFamily: "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", Roboto, Noto, "Noto Sans Khmer", sans-serif;
  --RS__lineHeightCompensation: 1.067;
}

:lang(kn) {
  --RS__baseFontFamily: "Kannada Sangam MN", "Nirmala UI", Tunga, Roboto, Noto, "Noto Sans Kannada", sans-serif;
  --RS__lineHeightCompensation: 1.1;
}

:lang(ko) {
  --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif;

  /* For CJK, the line-height is usually 15–20% more than for Latin */
  --RS__lineHeightCompensation: 1.167;
}

:lang(lo) {
  --RS__baseFontFamily: "Lao Sangam MN", "Leelawadee UI", "Lao UI", Roboto, Noto, "Noto Sans Lao", sans-serif;
}

:lang(ml) {
  --RS__baseFontFamily: "Malayalam Sangam MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Malayalam", sans-serif;
  --RS__lineHeightCompensation: 1.067;
}

:lang(or) {
  --RS__baseFontFamily: "Oriya Sangam MN", "Nirmala UI", Kalinga, Roboto, Noto, "Noto Sans Oriya", sans-serif;
  --RS__lineHeightCompensation: 1.167;
}

:lang(pa) {
  --RS__baseFontFamily: "Gurmukhi MN", "Nirmala UI", Kartika, Roboto, Noto, "Noto Sans Gurmukhi", sans-serif;
  --RS__lineHeightCompensation: 1.1;
}

:lang(si) {
  --RS__baseFontFamily: "Sinhala Sangam MN", "Nirmala UI", "Iskoola Pota", Roboto, Noto, "Noto Sans Sinhala", sans-serif;
  --RS__lineHeightCompensation: 1.167;
}

:lang(ta) {
  --RS__baseFontFamily: "Tamil Sangam MN", "Nirmala UI", Latha, Roboto, Noto, "Noto Sans Tamil", sans-serif;
  --RS__lineHeightCompensation: 1.067;
}

:lang(te) {
  --RS__baseFontFamily: "Kohinoor Telugu", "Telugu Sangam MN", "Nirmala UI", Gautami, Roboto, Noto, "Noto Sans Telugu", sans-serif;
}

:lang(th) {
  --RS__baseFontFamily: "Thonburi", "Leelawadee UI", "Cordia New", Roboto, Noto, "Noto Sans Thai", sans-serif;
  --RS__lineHeightCompensation: 1.067;
}

/* The following will also work for zh-Hans */
:lang(zh) {
  --RS__baseFontFamily: "方体", "PingFang SC", "黑体", "Heiti SC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK SC", sans-serif;

  /* For CJK, the line-height is usually 15–20% more than for Latin */
  --RS__lineHeightCompensation: 1.167;
}

:lang(zh-Hant),
:lang(zh-TW) {
  --RS__baseFontFamily: "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif;

  /* For CJK, the line-height is usually 15–20% more than for Latin */
  --RS__lineHeightCompensation: 1.167;
}

:lang(zh-HK) {
  --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif;

  /* For CJK, the line-height is usually 15–20% more than for Latin */
  --RS__lineHeightCompensation: 1.167;
}