Commit 13942217 authored by Julie Blanc's avatar Julie Blanc

initial

parents
Pipeline #213 failed with stages
in 12 seconds
.DS_Store
\ No newline at end of file
# 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)
@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
/* 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);
}
}
@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
@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{ }
}
/* 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{