paged.js Baseline

baseline.css

:root {
  
  
  
  --baseline: var(--font-lineHeight);
  --baseline-color: red;
}

.pagedjs_page {
  /* grid baseline */
  background: 
  repeating-linear-gradient( 
    white 0, 
    white calc(var(--baseline) - 1px), 
      var(--baseline-color) calc(var(--baseline)));
  background-size: cover;
  background-repeat: repeat-y;
  /* start of the first baseline: 30pt from top: putted it as 40px */
  background-position-y: 40px;
}


.pagedjs_sheet .pagedjs_pagebox{
  &::after {
    content: "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44";
    line-height: var(--font-lineHeight);
    z-index: 3000;
    font-variant-numeric: normal;
    position: absolute;
    top: 0;
    margin-top: var(--margin-top);
    right: 1em;
    color: var(--baseline-color);
    display: block;
    text-align: right;
    width: 2ch;
  }
}

@media print {
  .pagedjs_page {
    --baseline-color: transparent;
  }
  .pagedjs_page_content::after {
    color: var(--baseline-color);
  }





}

vars.css

:root {
/* fonts for the book */
    --font-body: "Minion Pro", serif;
    --font-head: "Minion Pro", serif;
    --font-title: "Minion Pro", serif;
    --font-code: "Courier New";
    --font-toc: "Minion Pro", serif;
    --font-smallCaps: "Minion Pro", serif;
    --font-bodyLink: var(--font-head);


/* color */
    --color-body: black;
    --color-primary: black;
    --color-primaryPre: black;    
    --color-secondary: darkred;
    --color-link: black;
    --color-four: black;
    --color-marginBox: transparent;
    --color-tableBody: grey;




    --font-bodyWeight: 300;
    --font-bodyStyle: normal;

/* var for the styles and weight for the body text -- inheritance, do we really need that? */
    --font-bodyBold: var(--font-body);
    --font-bodyBoldWeight: 500;
    --font-bodyItalic: var(--font-body);
    --font-bodyItalicWeight: 500;
    --font-bodyItalicStyle: italic;
    --font-headWeight: 400;
    --font-headStyle: normal;

/* var for the headings -- inheritance, do we really need that? */  
    --font-headBold: var(--font-head);
    --font-headBoldWeight: 400;
    --font-headItalic: var(--font-head);
    --font-headItalicWeight: 500;
    --font-headItalicStyle: italic;


    --font-size: 13px; /* 9.75 pt*/
    --font-lineHeight: 16px; /* 12 pt*/


    --textAlign: justify;
    --letterSpacing: 0;

    --bodyListAlign: left;
}