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

A set of reference stylesheets for EPUB Reading Systems

/* Readium CSS 
   Safeguards module

   A set of styles to prevent common issues in pagination

   Repo: https://github.com/readium/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 
     Please consider figures might have a figcaption, which is why 95vh in the first place */
  --RS__maxMediaHeight: 95vh;

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

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

/* Sanitize line-heights in webkit e.g. raised cap without a declared line-height
   See effect by checking this demo in Safari: https://codepen.io/JayPanoz/pen/gRmzrE
   Note: glyphs has to be reset to inline for CJK */
html {
  -webkit-line-box-contain: block glyphs replaced;
}

:lang(ja) {
  -webkit-line-box-contain: block inline replaced;
}

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

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

/* Size medias */
/* You can override CSS variables by re-defining it for all elements or a specific one */
img, svg, audio, 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-width: var(--RS__maxMediaWidth);

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

  /* 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;
}

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