initial

.gitignore

+.DS_Store
\ No newline at end of file

README.md

+
+# Printing in Relation to Graphic Art
+
+Example of a book design with paged.js, 102 pages
+
+- Page layout (spread, margins content...)
+- Table of content
+- Running Headers
+- Named pages
+- Page breaks
+- Absolute positionning and flexbox in a page
+- Full page image (on cover)
+
+
+**Running Paged.js**: [https://gitlab.pagedmedia.org/tools/pagedjs-documentation/blob/master/Part01_Getting-Started-with-paged.md](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/blob/master/Part01_Getting-Started-with-paged.md)
+

css/interface/baseline.css

+
+
+@media screen {
+
+    .pagedjs_page{
+        --pagedjs-baseline: 11px;
+        --pagedjs-baseline-position: -4px;
+        --pagedjs-baseline-color: cyan;
+        background: linear-gradient( var(--color-paper) 0%, var(--color-paper) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px),  var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
+        background-size: 100% var(--pagedjs-baseline);
+        background-repeat: repeat-y;
+        background-position-y: var(--pagedjs-baseline-position);
+    }
+
+
+}
\ No newline at end of file

css/interface/interface.css

+
+
+/* Change the look */
+:root{
+  --color-background:  whitesmoke;
+  --color-pageBox: #666;
+  --color-paper: white;
+  --color-marginBox: transparent;
+}
+
+
+/* To define how the book look on the screen: */
+@media screen {
+  body {
+      background-color: var(--color-background);
+  }
+  .pagedjs_pages {
+      display: flex;
+      width: calc(var(--width) * 2);
+      flex: 0;
+      flex-wrap: wrap;
+      margin: 0 auto;
+  }
+  .pagedjs_page {
+      background-color: var(--color-paper);
+      box-shadow: 0 0 0 1px var(--color-pageBox);
+      margin: 0;
+      flex-shrink: 0;
+      flex-grow: 0;
+      margin-top: 10mm;
+  }
+  .pagedjs_first_page {
+      margin-left: var(--width);
+  }
+
+  .pagedjs_page:last-of-type{ 
+      margin-bottom: 10mm;
+  }
+
+
+  /* show the margin-box */
+
+  .pagedjs_margin-top-left-corner-holder,
+  .pagedjs_margin-top,
+  .pagedjs_margin-top-left,
+  .pagedjs_margin-top-center,
+  .pagedjs_margin-top-right,
+  .pagedjs_margin-top-right-corner-holder,
+  .pagedjs_margin-bottom-left-corner-holder,
+  .pagedjs_margin-bottom,
+  .pagedjs_margin-bottom-left,
+  .pagedjs_margin-bottom-center,
+  .pagedjs_margin-bottom-right,
+  .pagedjs_margin-bottom-right-corner-holder,
+  .pagedjs_margin-right,
+  .pagedjs_margin-right-top,
+  .pagedjs_margin-right-middle,
+  .pagedjs_margin-right-bottom,
+  .pagedjs_margin-left,
+  .pagedjs_margin-left-top,
+  .pagedjs_margin-left-middle,
+  .pagedjs_margin-left-bottom{
+      box-shadow: 0 0 0 1px inset var(--color-marginBox);
+  }
+
+}
+
+
+

css/interface/recto-verso.css

+@media screen {
+
+  .pagedjs_pages {
+      flex-direction: column;
+      width: 100%;
+  }
+
+  .pagedjs_first_page {
+      margin-left: 0;
+  }
+
+  .pagedjs_page {
+      margin: 0 auto;
+      margin-top: 10mm;
+  }
+
+}
\ No newline at end of file

css/layout.css

+@media print {
+
+    /* ALL PAGES ----------------------------------------------------------------------- */
+
+    @page {
+        size: 148mm 210mm;
+        margin-top: 100px;
+        margin-bottom: 65px;
+    }
+
+
+    /* LEFT PAGES ---------------------------------------------------------------------- */
+
+    @page :left {
+        margin-left: 36mm;
+        margin-right: 12mm;
+
+        /* page number */
+        @top-left-corner {
+            content: counter(page);
+            font-family: 'hk-grotesk';
+            font-weight: 600;
+            padding-right: 12mm;
+            vertical-align: top;
+            padding-top: 25px;
+        }
+
+         /* running header (book title)  */
+        @top-left {
+            content: element(booktitle);
+            vertical-align: top;
+            padding-top: 25px;
+        }
+    }
+
+    /*  running header (book title) 
+        way 1 : keep HTML element and style inside the running header, remove the element from the flux  */
+    #booktitle { 
+        position: running(booktitle); 
+        font-family: 'hk-grotesk';
+        font-weight: 600;
+        text-indent: 0;
+    }
+
+
+    /* RIGHT PAGES --------------------------------------------------------------------- */
+
+    @page :right {
+        margin-left: 12mm;
+        margin-right: 36mm;
+
+        /* page number */
+        @top-right-corner {
+            content: counter(page);
+            font-family: 'hk-grotesk';
+            font-weight: 600;
+            padding-left: 12mm;
+            vertical-align: top;
+            padding-top: 25px;
+        }
+
+        /* running header (chapter title)  */
+        @top-right {
+            content: string(chapTitle);
+            font-family: 'hk-grotesk';
+            font-weight: 600;
+            vertical-align: top;
+            padding-top: 25px;
+        }
+    }
+
+    /*  running header (book title) 
+        way 2 : copy an HTML element into running header, don't keep HTML and style  */
+    h1 { string-set: chapTitle content(text); }
+    
+
+    /* PAGE BREAKS --------------------------------------------------------------------- */
+
+    #halftitle, 
+    #toc, 
+    #prefatory-note,
+    #introduction, 
+    #toc {
+        break-before: right;
+    }
+
+    .chapter {
+        break-before: right;
+    }
+
+    figure {
+        break-inside: avoid;
+    }
+
+
+    /* BLANK PAGES --------------------------------------------------------------------- */
+
+    @page :blank {
+
+        @top-left-corner { content: none; }
+        @top-left { content: none; }
+        @top-right-corner { content: none; }
+        @top-right { content: none; }
+
+    }
+
+
+
+    /* TABLE OF CONTENT ---------------------------------------------------------------- */
+
+    #toc a[href]::after {
+        content: target-counter(attr(href), page);
+        float: right;
+    }
+
+
+    #toc li{
+        overflow-x: hidden;
+        display: flex; 
+    }
+
+    #toc li::after{
+        content: ".................................................................................................................................................";
+        float: left;
+        width: 0;
+        padding-left: 5px;
+        letter-spacing: 2px;
+    }
+
+
+    #toc li a::after{
+        position: absolute;
+        right: 0;
+        background-color: #f8f2ec;
+        padding-left: 6px;
+    }
+
+    #toc li a{
+        right: 0;
+    }
+
+
+    
+
+    /* COVER PAGE ---------------------------------------------------------------------- */
+
+    @page :first {
+        background-color: #a6a6b3;
+        margin-top: 18mm;
+        margin-bottom: 18mm;
+        color: white;
+        @top-right-corner { content: none; }
+        @top-right{ content: none; }
+    }
+
+   
+    /* Image full page */
+    #cover img {
+        height: var(--height);
+        width: var(--width);
+        object-fit: cover;
+        position: absolute;
+        top: calc(var(--margin-top)*-1);
+        left: calc(var(--margin-left)*-1);
+        z-index: 0;
+        mix-blend-mode: color-burn;
+        opacity: 0.8;
+    }
+
+    /* positioning in relation to the page */
+    #author {
+        position: absolute;
+        bottom: 0;
+    }
+
+
+    /* ABSOLUTE POSITIONNING ----------------------------------------------------------- */
+
+    #copyright {
+        position: absolute;
+        bottom: 0;
+    }
+
+
+    /* FLEXBOX IN THE PAGE ------------------------------------------------------------- */
+
+    #halftitle {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: stretch;
+    }
+
+
+    /* NAMED PAGE (chapter) ------------------------------------------------------------ */
+
+    .chapter { page: chapter; }
+
+    @page chapter :first {
+        @top-right { content: none; }
+    }
+
+    
+
+    /* NAMED PAGE (frontmatter) -------------------------------------------------------- */
+
+    /* Named pages */
+    #copyright,
+    #halftitle, 
+    #toc, 
+    #prefatory-note,
+    #introduction, 
+    #toc {
+        page: frontmatter;
+    }
+
+    @page frontmatter {
+        background-color: #f8f2ec;
+    }
+
+    @page frontmatter:first{
+        @top-left-corner { content: none; }
+        @top-left { content: none; }
+        @top-right { content: none; }
+    }
+
+    /* don't work for now */
+    @page frontmatter:blank {
+        background-color: #f8f2ec;
+    }
+
+    /* Hack to have blank page of named page */
+    .pagedjs_frontmatter_page + .pagedjs_blank_page {
+        background-color: #f8f2ec;
+    }
+
+
+    /* SPECIFIC PAGES ------------------------------------------------------------------ */
+
+    
+    @page:nth(3){ 
+        @top-right-corner { content: none; }
+    }
+
+    @page:nth(5){ 
+        @top-right-corner { content: none; }
+    }
+
+
+
+    /* WIDOWS AND ORPHANS -------------------------------------------------------------- */
+
+    /*  
+    - Not specific to paged.js
+    - Support only on Chrome/Chromium
+    */
+    #introduction p, .chapter p {
+        widows: 3;
+        orphans: 3;
+    }
+
+
+    /* HYPHENS ------------------------------------------------------------------------- */
+
+     /*  
+    - Not specific to paged.js
+    - Support only on Chrome/Chromium with OSX and on Firefox with Linux
+    */
+    p{ 
+        hyphens: auto; 
+    }
+
+
+    /* FIGURE -------------------------------------------------------------------------- */
+
+    figure {
+        width: 100%;
+        position: relative;
+    }
+
+    figure img {
+        width: 126%;
+        max-width: auto;
+        object-fit: cover;
+        /* set on baseline*/
+        height: calc(var(--baseline)*12.5 + 8px);
+        padding-top: 10px;
+        padding-bottom: 2px;
+    }
+
+    figure figcaption{ 
+        width: 126%;
+        display: block;
+    }
+
+ 
+    figure + p {
+        text-indent: 0;
+         /* set on baseline*/
+         padding-bottom: 3px;
+    }
+    
+
+
+
+
+    /* BACKMATTER ---------------------------------------------------------------------- */
+
+    #colophon, #project-gutenberg{ page: backmatter; }
+
+    @page backmatter {
+        background-color: #f8f2ec;
+        @top-left-corner { content: none; }
+        @top-left { content: none; }
+        @top-right { content: none; }
+    }
+
+    #colophon{ break-before: right; }
+    #project-gutenberg{ break-before: page; }
+
+    pre{
+        position: absolute;
+        bottom: -8mm;
+        left: -22mm;
+    }
+
+
+
+    /* SOME HACK ---------------------------------------------------------------------- */
+   
+    /* fill the rest of the page because the figure is at the end of the page  */
+    #figure-3 img {
+        height: calc(var(--baseline)*13.5 + 8px);
+    }
+
+    /* applies this style to all figures on the left pages */
+    .pagedjs_left_page figure {
+        left: -26%;
+    }
+
+     /* select the last page of the document  */
+     .pagedjs_page:last-of-type{ }
+
+
+
+}

css/style.css

+
+/* Style not specific to paged.js ----------------------------------------------------------------------- 
+--------------------------------------------------------------------------------------------------------- */
+
+/* 
+Book design on Chrome on Mac OSX 
+(baseline and line-height is not the same on other web browser and on other OS)
+*/
+
+
+:root{
+    font-size: 16px;
+    --baseline: 22px;
+}
+
+* { 
+    font-size: 1rem;
+    line-height: 22px;
+    margin: 0;
+    padding: 0;
+}
+
+ul{ list-style: none; }
+
+a{ color: currentColor; text-decoration: none; }
+
+
+
+
+/* COVER PAGE ------------------------------------------------- */
+
+#cover h1, 
+#author{
+    font-family: 'permian';
+    font-weight: normal;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    text-indent: 0;  
+    text-align: left;
+}
+
+#cover h1{
+    font-size: 2.5rem;
+    line-height: calc(var(--baseline)*2);
+    margin: 0 auto;
+    padding-top: calc(var(--baseline)*18) /* set on baseline */
+}
+
+#author{
+    font-size: 1.5rem;
+    line-height: calc(var(--baseline)*2);
+}
+
+
+
+
+
+/* COPYRIGHT PAGE ---------------------------------------------- */
+
+
+#copyright p{
+    text-indent: 0;
+    font-family: 'hk-grotesk';
+    font-weight: 500;
+    font-style: italic;
+    font-size: 0.7rem;
+    line-height: calc(var(--baseline)*1);
+    text-indent: 0;
+}
+
+
+
+/* HALFTITLE PAGE ----------------------------------------- */
+
+#halftitle h1, 
+#halftitle h2{
+    font-family: 'permian';
+    font-weight: normal;
+    text-indent: 0;
+    text-align: left;
+}
+
+#halftitle h1{
+    font-size: 2rem;
+    line-height: calc(var(--baseline)*1.5);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: calc(var(--baseline)*3);
+    padding-top: 10px; /* set on baseline */
+}
+
+#halftitle h2{
+    font-size: 1.5rem;
+    line-height: calc(var(--baseline)*1);
+    margin-bottom: calc(var(--baseline)*9);
+    padding-top: 9px; /* set on baseline */
+}
+
+#halftitle .printer{
+    font-family: 'hk-grotesk';
+    font-weight: 500;
+    line-height: calc(var(--baseline)*1);
+    text-indent: 0;
+    border-left: 1px solid black;
+    padding-top: calc(var(--baseline)*0.25);
+    padding-bottom: calc(var(--baseline)*0.25);
+    padding-left: calc(var(--baseline)*0.5);
+}
+
+
+/* TABLE OF CONTENT -------------------------------------- */
+
+/* list-counter */
+#toc { counter-reset: numtoc; }
+#toc .chap { counter-increment: numtoc; }
+#toc .chap::before { 
+    content: counter(numtoc, upper-roman) ". "; 
+    padding-right: 5px;
+    /* display: inline-block;
+    width: 45px; */
+
+}
+
+#toc li{ margin-bottom: calc(var(--baseline)*1); }
+
+#toc-introduction{ margin-bottom: calc(var(--baseline)*1.5)!important; }
+#toc-colophon{ margin-top: calc(var(--baseline)*1.5)!important; }
+
+/* CHAPTER TITLE ----------------------------------------- */
+
+
+.chapter h1, 
+#prefatory-note h1, 
+#introduction h1,
+#toc h1,
+#colophon h1{
+    font-family: 'permian';
+    text-transform: uppercase;
+    font-size: 1rem;
+    line-height: var(--baseline);
+    margin-bottom: 12px;
+    margin-top: calc(var(--baseline)*6);
+    margin-bottom: calc(var(--baseline)*2);
+}
+
+.chapter h1 + p, 
+#introduction h1 + p,
+#prefatory-note h1 + p{
+    text-indent: 0;
+}
+
+
+/* counter */
+body { counter-reset: chapter; }
+.chapter h1 { counter-increment: chapter; }
+.chapter h1::before { content: counter(chapter, lower-roman); }
+
+
+.chapter h1::before{
+    font-size: 2rem;
+    line-height: 0;
+    padding-right: var(--baseline);
+}
+
+
+/* TEXT ---------------------------------------------------- */
+
+p, li{
+    font-family: 'permian';
+}
+
+p{
+    text-indent: 1rem;
+    text-align: justify;
+}
+
+/* blockquote and list */
+
+blockquote, .chapter li{
+    margin: var(--baseline) 1rem;
+}
+
+blockquote p:before{ content: "“"; }
+blockquote p:after{ content: "”"; }
+
+
+blockquote p,
+blockquote + p,
+.chapter li{ text-indent: 0; }
+
+pre{
+    font-size: 0.6rem;
+    line-height: calc(var(--baseline)*0.5);
+}
+
+
+/* FIGURE ---------------------------------------------------- */
+
+
+figure {
+    margin: 0;
+    margin-top: var(--baseline);
+    margin-bottom: calc(var(--baseline)*1.5);
+}
+
+figure img {
+    width: 126%;
+    max-width: auto;
+    object-fit: cover;
+    /* set on baseline*/
+    height: calc(var(--baseline)*12.5 + 8px);
+    padding-top: 10px;
+    padding-bottom: 2px;
+}
+
+figure figcaption{ 
+    font-family: 'hk-grotesk';
+    font-weight: 500;
+    font-style: italic;
+    font-size: 0.7rem;
+    line-height: calc(var(--baseline)*0.5);
+    text-indent: 0;
+    padding-top: calc(var(--baseline)*0.5);
+}
+
+figure + p {
+    text-indent: 0;
+}
+
+
+
+/* Colophon ---------------------------------------------------- */
+
+#colophon h2{
+    font-family: 'hk-grotesk';
+    font-weight: 600; 
+    margin-top: var(--baseline);
+}
+
+#colophon p{ text-indent: 0; }
+
+
+
+
+/* WHITOUT PAGED.JS */
+@media screen{
+    body{
+        max-width: 70vw;
+        padding-left: 15vw;
+    }
+    figure, figure img{ max-width: 500px; }
+}