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

A set of reference stylesheets for EPUB Reading Systems

/* Readium CSS 
   Pagination module

   A set of styles to paginate ePublications

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

/* Config */

/* Columns are responsive by default, even if column-width is set in pixels, 
   which means two-page spread will switch to single page depending on current font-size.
   If you want more control, I’m afraid you’ll have to update colWidth/colGap dynamically, 
   which is how a significant amount of RS do at the moment. */

/* Default for smartphone portrait (small screens) */
:root {
  /* Your columns’ width floor */
  --RS__colWidth: 45em; /* The width at which we’ll switch to 2 columns by default. PS: you can’t set it in rem */

  /* Ideal number of columns (depending on columns’ width floor) */
  --RS__colCount: 1;

  /* Gap between columns (in pixels so that it won’t resize with font-size) */
  --RS__colGap: 0;

  /* Optimal line-length (rem will take :root font-size into account, whatever the body’s font-size) */
  --RS__maxLineLength: 40rem;

  /* Default page horizontal margins (in pixels so that it won’t resize with font-size) */
  --RS__pageGutter: 20px; /* See if colGap and pageGutter can be the same var */
}

/* Reset page margins for Forward compatibility */
@page {
  margin: 0 !important;
}

/* :root selector has same specificity as a class i.e. 0010
   We might have to change that to html / context 
   -> https://css-tricks.com/almanac/selectors/r/root/ */
:root {
  /* Prevents options pop-up when long tap in webkit */
  -webkit-touch-callout: none;

  /* Fix bug for older Chrome */
  -webkit-perspective: 1;

  /* Column size will depend on this if we want to make it responsive */
  font-size: 100% !important;

  /* In case you use left position to scroll, can be removed if using transform: translateX() */
  position: relative;

  /* Switch to newer box model (not inherited by authors’ styles) */
  box-sizing: border-box;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  height: 100vh;
  max-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;

  /* Init pagination */
  /* TODO: document columns’ logic cos it might feel weird at first */
  -webkit-column-count: var(--RS__colCount);
  -moz-column-count: var(--RS__colCount);
  column-count: var(--RS__colCount);

  -webkit-column-width: var(--RS__colWidth);
  -moz-column-width: var(--RS__colWidth);
  column-width: var(--RS__colWidth);

  -webkit-column-gap: var(--RS__colGap);
  -moz-column-gap: var(--RS__colGap);
  column-gap: var(--RS__colGap);

  /* Default is balance and we want columns to be filled entirely (100vh) */
  -moz-column-fill: auto;
  column-fill: auto;

  -webkit-text-size-adjust: 100%;
}

body {
  /*  overflow: hidden; bugfix: contents won’t paginate in Firefox and one sample in Safari */
  width: 100%;

  /* Limit line-length but we have to reset when 2 columns and control the viewport.
     By using max-width + margin auto, margins will shrink when font-size increases,
     which is what would be expected in terms of typography. */
  max-width: var(--RS__maxLineLength) !important;
  margin: 0 auto !important;

  /* We need a minimum padding on body so that descandants/ascendants in italic/script are not cut-off.
     Drawback: we have to use border-box so that it doesn’t screw the box model,
     which means it impacts colWidth and max-width */
  box-sizing: border-box;
  padding: 0 var(--RS__pageGutter) !important;
}

/* We’ll now redefine margins and columns depending on the minimum width available
   The goal is having the simplest model possible and avoid targeting devices */

/* Smartphone landscape */
@media screen and (min-width: 35em) {
  :root {
    --RS__pageGutter: 30px;
  }
}
  
/* Tablet portrait */
@media screen and (min-width: 45em) {
  :root {
    --RS__pageGutter: 40px;
  }
}
  
/* Desktop + tablet large */
/* We get the previous settings, we just change the margins */
@media screen and (min-width: 75em) {
  :root {
    --RS__pageGutter: 50px;
  }
}

/* At this point (80em or so), constraining line length must be done at the web view/iframe level, or by limiting the size of :root itself */

/* Responsive columns */
@media screen and (--responsive-columns),
screen and (--min-device-columns) and (--max-device-columns) and (orientation: landscape) {
  :root {
    /* The size at which we want 2 columns to switch to 1 (depending on font-size) */
    --RS__colWidth: 20em; /* 20 * 16 = 320px but 20 * 28 = 560px so it will switch to 1 col @ 175% font-size (user-setting) on an iPad */
    /* We constrain to 2 columns so that we can never get 3 or 4, etc. */
    --RS__colCount: 2;
    --RS__maxLineLength: 39.99rem; /* If we don’t use this, colNumber user setting won’t work in Safari… */
  }
}