@readium/css/css/src/modules/ReadiumCSS-safeguards-vertical.css

A set of reference stylesheets for EPUB Reading Systems

/* Readium CSS
   Safeguards module for vertical writing

   A set of styles to prevent common issues in pagination

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


/* Config */
/* We’ll be using an "RS__" prefix so that we can prevent collisions with authors’ CSS */
:root {
  /* max-width for media, you can override that via JS if not compiled to static */
  --RS__maxMediaWidth: 100%;

  /* max-height for media, you can override that via JS if not compiled to static  */
  --RS__maxMediaHeight: 100vw;

  /* value for medias’ box-sizing */
  --RS__boxSizingMedia: border-box;

  /* value for table’s box-sizing */
  --RS__boxSizingTable: border-box;
}

/* Wrap long strings if larger than line-length */
a, a span, span a, h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
}

div {
  max-width: var(--RS__maxMediaHeight);
}

/* Size medias */
/* You can override CSS variables by re-defining it for all elements or a specific one */
img, svg|svg, video {
  /* We probably don’t need to use modern box-sizing as auto behaves like it */
  box-sizing: var(--RS__boxSizingMedia);

  width: auto;
  height: auto;

  /* Some files don’t have max-width */
  max-height: var(--RS__maxMediaWidth) !important;

  /* We’re setting a max-height, especially for covers */
  max-width: var(--RS__maxMediaHeight);

  /* Object-fit allows us to keep the correct aspect-ratio */
  object-fit: contain;

  /* For page-break, we must use those 3
     We can’t use a variable there, webkit seems to no support them for those properties */
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Setting width and height for audio creates issues with controls (invisible in Chromium, only the play button is displayed in Webkit).
   These styles should just help a little bit if the fallback is displayed cos audio is not supported. */
audio {
  max-width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* Try preventing border being cut-off, webkit + blink have content-box by default */
table {
  box-sizing: var(--RS__boxSizingTable);
  max-height: var(--RS__maxMediaWidth)
}