From e68aea088d7387637a5f9761164d4a14f347514e Mon Sep 17 00:00:00 2001 From: iGor milhit Date: Tue, 4 Apr 2023 13:45:27 +0200 Subject: [PATCH] =?UTF-8?q?export:=20g=C3=A9n=C3=A8re=20le=20polycopi?= =?UTF-8?q?=C3=A9=20en=20PDF=20avec=20`paged.js`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Ajoute un modèle HTML contenant les éléments nécessaires pour utiliser `paged.js` dans un navigateur web. - Ajoute une feuille de style pour définir les styles utilisés pour le PDF. - Document l'usage de `paged.js`. Co-Authored-by: iGor milhit --- README.md | 15 +++++ interface.css | 180 +++++++++++++++++++++++++++++++++++++++++++++++++ polycopié.css | 46 +++++++++++++ template.html | 73 ++++++++++++++++++++ 4 files changed, 314 insertions(+) create mode 100644 interface.css create mode 100644 polycopié.css create mode 100644 template.html diff --git a/README.md b/README.md index ec99fe9..25706e2 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,8 @@ Pour pouvoir utiliser ce projet, il est nécessaire : ## Convertir le support de cours en PDF +### Avec LaTeX + Pour convertir le support de cours (`polycopié.md`) au format PDF, il faut utiliser la commande suivante : @@ -53,6 +55,19 @@ pandoc --citeproc -t pdf --pdf-engine=tectonic -o polycopié.pdf polycopié.md PDF, ici `tectonic`, mais `xelatex` devrait fonctionner aussi, si il est installé. +### Avec `paged.js` + +```bash +pandoc --self-contained --template=template.html --css=polycopié.css \ + --citeproc --t html -o test.html polycopié.md +``` + + +```bash +pandoc --self-contained --css=polycopié.css \ + --citeproc --t pdf --pdf-engine=pagedjs-cli -o test.html polycopié.md +``` + ## Déroulé de la présentation Le fichier `déroulé.md` décrit le déroulé de la présentation. Si une impression diff --git a/interface.css b/interface.css new file mode 100644 index 0000000..170f47e --- /dev/null +++ b/interface.css @@ -0,0 +1,180 @@ +/* CSS for Paged.js interface – v0.4 */ + +/* Change the look */ +:root { + --color-background: whitesmoke; + --color-pageSheet: #cfcfcf; + --color-pageBox: violet; + --color-paper: white; + --color-marginBox: transparent; + --pagedjs-crop-color: black; + --pagedjs-crop-shadow: white; + --pagedjs-crop-stroke: 1px; +} + +/* To define how the book look on the screen: */ +@media screen, pagedjs-ignore { + body { + background-color: var(--color-background); + } + + .pagedjs_pages { + display: flex; + width: calc(var(--pagedjs-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-pageSheet); + margin: 0; + flex-shrink: 0; + flex-grow: 0; + margin-top: 10mm; + } + + .pagedjs_first_page { + margin-left: var(--pagedjs-width); + } + + .pagedjs_page:last-of-type { + margin-bottom: 10mm; + } + + .pagedjs_pagebox{ + box-shadow: 0 0 0 1px var(--color-pageBox); + } + + .pagedjs_left_page{ + z-index: 20; + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { + border-color: transparent; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ + width: 0; + } + + .pagedjs_right_page{ + z-index: 10; + position: relative; + left: calc(var(--pagedjs-bleed-left)*-1); + } + + /* 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); + } + + /* uncomment this part for recto/verso book : ------------------------------------ */ + + /* + .pagedjs_pages { + flex-direction: column; + width: 100%; + } + + .pagedjs_first_page { + margin-left: 0; + } + + .pagedjs_page { + margin: 0 auto; + margin-top: 10mm; + } + + .pagedjs_left_page{ + width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important; + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{ + border-color: var(--pagedjs-crop-color); + } + + .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ + width: var(--pagedjs-cross-size)!important; + } + + .pagedjs_right_page{ + left: 0; + } + */ + + + + /*--------------------------------------------------------------------------------------*/ + + + + /* uncomment this par to see the baseline : -------------------------------------------*/ + + + /* .pagedjs_pagebox { + --pagedjs-baseline: 22px; + --pagedjs-baseline-position: 5px; + --pagedjs-baseline-color: cyan; + background: linear-gradient(transparent 0%, transparent 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); + } */ + + + /*--------------------------------------------------------------------------------------*/ +} + + + + + +/* Marks (to delete when merge in paged.js) */ + +.pagedjs_marks-crop{ + z-index: 999999999999; + +} + +.pagedjs_bleed-top .pagedjs_marks-crop, +.pagedjs_bleed-bottom .pagedjs_marks-crop{ + box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-top .pagedjs_marks-crop:last-child, +.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{ + box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-left .pagedjs_marks-crop, +.pagedjs_bleed-right .pagedjs_marks-crop{ + box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow); +} + +.pagedjs_bleed-left .pagedjs_marks-crop:last-child, +.pagedjs_bleed-right .pagedjs_marks-crop:last-child{ + box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow); +} diff --git a/polycopié.css b/polycopié.css new file mode 100644 index 0000000..7076fc0 --- /dev/null +++ b/polycopié.css @@ -0,0 +1,46 @@ +@media print{ + body { + font-family: "TheSans","Open Sans", Arial, Helvetica, sans-serif; + } + @page { + size: A4; + margin: 10mm 15mm; + bleed: 6mm; + @bottom-center { + content: counter(page) + } + @footnote { + padding: 1em; + } + } + span.footnote { + float: footnote; + } + @page:left { + margin-left: 25mm; + margin-right: 15mm; + } + @page:right { + margin-left: 15mm; + margin-right: 25mm; + } + @page:first{ + @bottom-center { + content: none; + } + } + h2 { + color: magenta; + text-decoration: underline; + } + #principes-généraux { + break-before: page; + } + #title-block-header { + text-align: center; + } + .author { + display: inline; + padding-right: 10px; + } +} diff --git a/template.html b/template.html new file mode 100644 index 0000000..10faa40 --- /dev/null +++ b/template.html @@ -0,0 +1,73 @@ + + + + + + +$for(author-meta)$ + +$endfor$ +$if(date-meta)$ + +$endif$ +$if(keywords)$ + +$endif$ +$if(description-meta)$ + +$endif$ + $if(title-prefix)$$title-prefix$ – $endif$$pagetitle$ + +$for(css)$ + +$endfor$ + + +$for(header-includes)$ + $header-includes$ +$endfor$ +$if(math)$ + $math$ +$endif$ + + + +$for(include-before)$ +$include-before$ +$endfor$ +$if(title)$ +
+

$title$

+$if(subtitle)$ +

$subtitle$

+$endif$ +$for(author)$ +

$author$

+$endfor$ +$if(date)$ +

$date$

+$endif$ +$if(abstract)$ +
+
$abstract-title$
+$abstract$ +
+$endif$ +
+$endif$ +$if(toc)$ + +$endif$ +$body$ +$for(include-after)$ +$include-after$ +$endfor$ + +