@readium/css/css/src/ReadiumCSS-default-cjk-vertical.css

A set of reference stylesheets for EPUB Reading Systems

@import "modules/ReadiumCSS-namespaces.css";

/* Readium CSS
   Default module for CJK vertical writing

   A stylesheet for unstyled ebooks based on HTML5 Suggested Rendering
   Note: works in combination with Base module

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

/* CONFIG */

:root {
  /* Extra variables for Japanese font-stacks:
     • --RS__serif-ja-v;
     • --RS__sans-serif-ja-v.

     They can be used instead of --RS__baseFontFamily and --RS__compFontFamily */

  --RS__compFontFamily: var(--RS__baseFontFamily);
  --RS__codeFontFamily: var(--RS__monospaceTf);

  --RS__typeScale: 1.125; /* 1.067 | 1.125 | 1.2 | 1.25 | 1.333 | 1.414 | 1.5 | 1.618 */
  --RS__baseFontSize: 87.5%;

  --RS__flowSpacing: 1.5rem;
  --RS__paraSpacing: 0;
  --RS__paraIndent: 1em;

  --RS__linkColor: #0000EE;
  --RS__visitedColor: #551A8B;

  --RS__primaryColor: ;
  --RS__secondaryColor: ;
}

:root:lang(zh) {
  --RS__paraIndent: 2em;
}

:lang("mn-Mong") {
  --RS__baseFontSize: 100%;
}

/* STYLES */

/* Typo */

body {
  font-size: var(--RS__baseFontSize);
  text-align: justify;
  text-justify: inter-character;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--RS__baseFontFamily);
  text-align: left;
  text-align: start;
}

/* Flow content */

blockquote, figure, p, pre,
aside, footer, form, hr {
  margin-right: var(--RS__flowSpacing);
  margin-left: var(--RS__flowSpacing);
}

p {
  margin-right: var(--RS__paraSpacing);
  margin-left: var(--RS__paraSpacing);
  text-indent: var(--RS__paraIndent);
}

pre {
  font-family: var(--RS__codeFontFamily);
}

/* Phrasing content */

code, kbd, samp, tt {
  font-family: var(--RS__codeFontFamily);
}

sub, sup {
  line-height: 1;
  position: relative;
  font-size: 67.5%;
}

sub {
  left: -0.2ex;
}

sup {
  right: 0;
}

em {
  -webkit-text-emphasis: sesame;
  -epub-text-emphasis: sesame;
  text-emphasis: sesame;
}

:link {
  color: var(--RS__linkColor);
}

:visited {
  color: var(--RS__visitedColor);
}

/* Headings */

h1 {
  margin-right: calc(var(--RS__flowSpacing) * 2);
  margin-left: calc(var(--RS__flowSpacing) * 2);
  /* The following is base font size * typescale power of 3 */
  font-size: calc(((1em * var(--RS__typeScale)) * var(--RS__typeScale)) * var(--RS__typeScale));
  text-indent: 2rem;
}

h2 {
  margin-right: calc(var(--RS__flowSpacing) * 2);
  margin-left: var(--RS__flowSpacing);
  /* The following is base font size * typescale power of 2 */
  font-size: calc((1em * var(--RS__typeScale)) * var(--RS__typeScale));
  text-indent: 3rem;
}

h3 {
  margin-right: var(--RS__flowSpacing);
  margin-left: var(--RS__flowSpacing);
  font-size: calc(1em * var(--RS__typeScale));
  text-indent: 4rem;
}

h4 {
  margin-right: var(--RS__flowSpacing);
  margin-left: var(--RS__flowSpacing);
  font-size: 1em;
  font-family: var(--RS__compFontFamily);
  text-indent: 4rem;
}

h5 {
  margin-right: var(--RS__flowSpacing);
  margin-left: var(--RS__flowSpacing);
  font-size: smaller;
  font-family: var(--RS__compFontFamily);
  text-indent: 4rem;
}

h6 {
  margin-right: var(--RS__flowSpacing);
  margin-left: 0;
  font-size: smaller;
  font-family: var(--RS__compFontFamily);
  font-weight: normal;
  text-indent: 4rem;
}

/* Lists */

dl, ol, ul {
  margin-right: var(--RS__flowSpacing);
  margin-left: var(--RS__flowSpacing);
}

/* Table */

table {
  border: 1px solid currentColor;
  border-collapse: collapse;
  empty-cells: show;
  margin: 0 var(--RS__flowSpacing);
}

thead, tbody, tfoot, table > tr {
  vertical-align: top;
}

th {
  text-align: left;
}

th, td {
  border: 1px solid currentColor;
  padding: 4px;
}