diff --git a/assets/css/main.css b/assets/css/main.css index 892b00b..c0738dd 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -49,11 +49,11 @@ h3{ font-size: 1em; } -h2 + h3{ +/*h2 + h3{ margin-top: 0.5em; opacity: 0.8; font-weight: normal; -} +}*/ h5, h6{ font-size: var(--textSize); @@ -155,6 +155,7 @@ figure[data-crop="false"] img { } .print-image .print-red{ + position: relative; background: var(--rouge); } @@ -331,3 +332,6 @@ header .mobile__menu_btn .rotate-bottom { + + + diff --git a/assets/css/print-template.css b/assets/css/print-template.css index 4c1686a..9fcf5db 100644 --- a/assets/css/print-template.css +++ b/assets/css/print-template.css @@ -436,13 +436,13 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;} } /* -------- FOOTNOTES ---------- */ -span.footnote { +/*span.footnote { float: footnote; } .footnote::footnote-call { content: counter(footnote, decimal) " "; -} +}*/ diff --git a/assets/css/print.css b/assets/css/print.css index e9b7ce5..79886e8 100644 --- a/assets/css/print.css +++ b/assets/css/print.css @@ -2,53 +2,346 @@ /* --------- Paramètres de base ---------- */ @page{ - size: 165mm 240mm + size: 165mm 240mm; /* bleed: 6mm; marks: crop;*/ } @page :left { - margin: 16mm 25mm 10mm 10mm; - @top-left-corner { + margin: 20mm 36mm 18mm 12mm; +/* @top-left-corner { content: counter(page); - font-size: 7pt; + font-size: 11pt; text-align: center; - font-family: var(--fontFamily); - } + font-family: "Bilzig Trial"; + }*/ @top-center{ - content: string(title); - font-size: 7pt; - text-align: center; - text-transform: uppercase; - width: 105%; - margin-left: 0%; + font-family: var(--fontFamily); + content: "D6cor > essai"; + font-size: 8pt; + color: var(--bleu); + text-align: left; + margin-top: 4mm; + /*text-align: center;*/ + /*text-transform: uppercase;*/ + /*width: 105%;*/ + /*margin-left: 0%;*/ + } + @bottom-left{ + font-family: var(--fontFamily); + content: counter(page); + font-size: 11pt; + color: var(--vert); + margin-top:-5mm; + margin-left: 8mm; } } @page :right { - margin: 16mm 10mm 10mm 25mm; - @top-right-corner { + margin: 20mm 12mm 18mm 36mm; + /*@top-right-corner { content: counter(page); font-size: 7pt; text-align: center; font-family: var(--fontFamily); - } + }*/ @top-center{ content: string(chapter); - font-size: 7pt; - text-align: center; - text-transform: uppercase; - width: 105%; - margin-left: -9%; + font-family: var(--fontFamily); + font-size: 8pt; + color: var(--bleu); + text-align: right; + margin-top: 4mm; + } + @bottom-right{ + font-family: var(--fontFamily); + content: counter(page); + font-size: 11pt; + color: var(--vert); + margin-top:-5mm; + margin-right: 8mm; } } .chapter{ break-before: right; + counter-reset: callNote_marginNote markerNote_marginNote; } - .chapter h2{ - page-break-after: always; + /* borders */ + .pagedjs_margin-top-left-corner-holder:before{ + content: " "; + background: var(--vert); + width: 100%; + height: var(--border); + position: absolute; + } + + .pagedjs_margin-left:before{ + content: " "; + position: absolute; + top:0; + background: var(--bleu); + width: var(--border); + height: var(--pagedjs-height); + z-index: 2; + } + + .pagedjs_right_page .pagedjs_margin-left:before{ + content: none; + } + + .pagedjs_margin-right:after{ + content: " "; + position: absolute; + top:0; + right: 0; + background: var(--bleu); + width: var(--border); + height: var(--pagedjs-height); + z-index: 2; + } + + .pagedjs_left_page .pagedjs_margin-right:after{ + content: none; + } + + .pagedjs_margin-bottom:after{ + content: " "; + background: var(--rouge); + width: 100%; + height: var(--border); + position: absolute; + bottom: 0; + left: 0; } } + +/* ---- INTERPAGES ------ */ + +.interpage figure{ + height: calc(var(--pagedjs-height) - (var(--border) * 2)) !important; + margin-top: calc(var(--border) + 3mm); +} + +/* ---- PAGE DE TITRE ------ */ + +.chapter-title{ + page: chapterTitle; + display: flex; + flex-direction: column; + align-items: center; +} + +@page chapterTitle{ + background: var(--bleu); + margin: 12mm 0mm; + @top-left-corner {content: none;} + @top-left {content: none;} + @top-center {content: none;} + @top-right {content: none;} + @top-right-corner {content: none;} + @left-top {content: none;} + @left-middle {content: none;} + @left-bottom {content: none;} + @right-top {content: none;} + @right-middle {content: none;} + @right-bottom {content: none;} + @bottom-left-corner {content: none;} + @bottom-left {content: none;} + @bottom-center {content: none;} + @bottom-right {content: none;} + @bottom-right-corner {content: none;} +} + +.chapter-title h2, +.chapter-title h3, +.chapter-title p { + display: inline-block; + position: relative; + margin: 0; + color: #FFF; + font-size: var(--textSize); + text-align: center; +} + +/* ascii-fill : pas de flex:1, hauteur fixée par JS */ + .ascii-fill { + white-space: pre; + overflow: hidden; + line-height: 1.5; + flex-shrink: 0; + color: #FFF; + font-size: var(--textSize); + text-align: center; + font-family: var(--fontFamily); + width: 100%; + } + + .chapter-title, + .biographie { + font-family: var(--fontFamily); + color: #FFF; + text-align: center; + width: 90%; + margin: auto; + /*padding: 30px;*/ + } + + pre { + font-family: var(--fontFamily); + font-size: var(--textSize); + line-height: 1.5; + white-space: pre-wrap; + } + + /* ------- TITLES ------- */ + .chapter-content h3{ + /*width: calc(var(--pagedjs-width) - 12mm);*/ + text-align: center; + } + + .chapter-content h3:before{ + content: "+------------------------------------------------+"; + display: block; + margin-bottom: 2mm; + } + + .chapter-content h3:after{ + content: "+------------------------------------------------+"; + display: block; + margin-top: 1mm; + margin-bottom: 1mm; + } + + .pagedjs_right_page .chapter-content h3{ + /*margin-left: calc((var(--pagedjs-margin-left) - 16mm) * -1);*/ + } + + .chapter-content h4{ + text-align: center; + } + + + .chapter-content h4:before{ + content: "> > > > > > < < < < < < \a > > > > "; + white-space: pre; + } + + .chapter-content h4:after{ + content: " < < < < \a > > > > > > < < < < < <"; + white-space: pre; + } + + /* -------- IMAGES ------- */ + .float-image{ + position: relative !important; + top: auto !important; + left: auto !important; + width: auto !important; + float: right; /* ou left selon la position souhaitée */ + clear: right; + width: 45% !important; + + margin-top: 2mm; + + } + + .pagedjs_left_page .float-image{ + float: right; + margin-right: calc(var(--pagedjs-margin-right) / 2 * -1); + margin-left: 5mm; + } + + .pagedjs_right_page .float-image{ + float: left; + margin-left: calc(var(--pagedjs-margin-left) / 2 * -1); + margin-right: 5mm; + } + + .float-image figcaption{ + position: relative; + color: var(--bleu); + font-size: 8.5pt; + font-family: "Bilzig Trial"; + text-align: left; + } + + .float-image figcaption p{ + color: var(--bleu); + font-size: 8.5pt; + font-family: "Bilzig Trial"; + text-align: left; + } + + /* ------- NOTES ------- */ + + .margin-note{ + font-size: 8.5pt; + line-height: 1.41; + font-family: "Bilzig Trial"; + color: var(--bleu); + text-align: left; + position: relative !important; + top: auto !important; + left: auto !important; + width: auto !important; + float: right; /* ou left selon la position souhaitée */ + clear: right; + + /* Largeur de la note dans le corps du texte */ + width: 45% !important; + + padding: 1mm 3mm 0mm; + + } + + .pagedjs_left_page .margin-note { + float: right; + margin-right: calc(var(--pagedjs-margin-right) / 2 * -1); + padding: 1mm 0mm 0mm 3mm; + } + + .pagedjs_right_page .margin-note { + float: left; + margin-left: calc(var(--pagedjs-margin-left) / 2 * -1); + text-align: right; + padding: 1mm 3mm 0mm 0mm; + } + + .note-call_margin-note::before{ + content: "{"; + margin-right: 0.5mm; + } + + .note-call_margin-note::after{ + content: "}"; + margin-left: 0.5mm; + } + + .note-marker_margin-note{ + margin-right: 2mm; + } + + .note-marker_margin-note::before{ + content: "{"; + margin-right: 1mm; + } + + .note-marker_margin-note::after{ + content: "}"; + margin-left: 1mm; + } + + + + + + + + + + + + diff --git a/assets/css/variables.css b/assets/css/variables.css index 1c83404..1bf84e7 100644 --- a/assets/css/variables.css +++ b/assets/css/variables.css @@ -1,12 +1,16 @@ :root{ --margin: 1em; - --fontFamily: sans-serif; - --textSize: 17px; + /*--fontFamily: "Routed Gothic";*/ + --fontFamily: "JetBrains Mono NL"; + /*--textSize: 11pt;*/ + --textSize: 9pt; --ratio : auto; --rouge: #ff665e; --vert: #44d62c; --bleu: #0078bf; + + --border: 4mm; } \ No newline at end of file diff --git a/assets/js/handlers-old.js b/assets/js/handlers-old.js new file mode 100644 index 0000000..466f3e4 --- /dev/null +++ b/assets/js/handlers-old.js @@ -0,0 +1,109 @@ +class asciiTextFill extends Paged.Handler { + constructor(chunker, polisher, caller) { + super(chunker, polisher, caller); + } + + afterRendered(pages) { + const PAD = 4; + + /* ── 1. Mesurer charW et lineH avec une pre cachée ── */ + const probe = document.createElement('pre'); + probe.style.cssText = [ + 'position:absolute', 'visibility:hidden', 'top:0', 'left:0', + 'font-family:"Courier New",monospace', 'font-size:9pt', + 'line-height:1.5', 'white-space:pre' + ].join(';'); + // 10 lignes de 100 tirets → mesure fiable + probe.textContent = Array(10).fill('-'.repeat(100)).join('\n'); + document.body.appendChild(probe); + const pr = probe.getBoundingClientRect(); + const charW = pr.width / 200; + const lineH = pr.height / 20; + document.body.removeChild(probe); + + /* ── 2. COLS = nb de caractères par ligne dans la zone imprimable ── */ + const COLS = Math.floor(pages[0].width / charW); + // const COLS = pages[0].width; + const DASH = '-'.repeat(COLS); + + /* ── 3. makeBox centré dans COLS ── */ + function makeBox(lines) { + const maxLen = Math.max(...lines.map(l => l.length)); + const innerW = maxLen + PAD * 2; + const border = '|' + '-'.repeat(innerW) + '|'; + const empty = ' '.repeat(innerW + 2); + const rows = lines.map(l => + ' '.repeat(PAD) + l + ' '.repeat(innerW - PAD - l.length) + ); + const offset = Math.max(0, Math.floor((COLS - (innerW + 2)) / 2)); + const sp = ' '.repeat(offset); + return [sp + border, sp + empty, ...rows.map(r => sp + r), sp + empty, sp + border].join('\n'); + } + + /* ── 4. Titre : vider SEULEMENT #chapter-title ── */ + const titleEl = document.getElementById('chapter-title'); + const titleLines = Array.from(titleEl.querySelectorAll('h2, h3')) + .map(n => n.textContent.trim()).filter(Boolean); + if (titleLines.length) { + const pre = document.createElement('pre'); + pre.textContent = titleEl.innerHTML = ''; // vide le div + pre.textContent = makeBox(titleLines); + titleEl.appendChild(pre); + } + + /* ── 5. Bio : vider SEULEMENT #biographie ── */ + const bioEl = document.getElementById('biographie'); + const bioText = Array.from(bioEl.querySelectorAll('p')) + .map(p => p.textContent.trim()).join(' '); + const bioInnerW = COLS - 50; // place pour les | | + + if (bioText) { + // word-wrap manuel + const wrapped = []; + let cur = ''; + bioText.split(/\s+/).forEach(w => { + const test = cur ? cur + ' ' + w : w; + if (test.length <= bioInnerW) { cur = test; } + else { if (cur) wrapped.push(cur); cur = w; } + }); + if (cur) wrapped.push(cur); + + const border = '|' + '-'.repeat(bioInnerW) + '|'; + // const bioRows = wrapped.map(l => '|' + l + ' '.repeat(bioInnerW - l.length) + '|'); + const pre = document.createElement('pre'); + // pre.textContent = [border, ...bioRows, border].join('\n'); + // const bioRows = wrapped.map(l => '|' + l + ' '.repeat(bioInnerW - l.length) + '|'); + pre.textContent = border + '\n\n' + wrapped + '\n\n' + border; + bioEl.innerHTML = ''; + bioEl.appendChild(pre); + } + + /* ── 6. Calculer l'espace dispo et remplir les fills ── */ + // Hauteur intérieure de la page (après padding CSS) + const totalH = pages[0].height; + + // Hauteur réelle des blocs de contenu après génération + const fixedH = titleEl.offsetHeight + bioEl.offsetHeight; + + // Espace à distribuer entre les 3 fills + const spare = Math.max(0, totalH - fixedH); + + // Répartition : 1/3 haut, 1/3 milieu, 1/3 bas + // (modifie ces ratios pour décaler le contenu verticalement) + const ratios = [1/3, 1/3, 1/3]; + const ids = ['fill-top', 'fill-mid', 'fill-bottom']; + + ids.forEach((id, i) => { + const el = document.getElementById(id); + const h = spare * ratios[i]; + const n = Math.max(0, Math.floor(h / lineH)); + el.textContent = Array(n).fill(DASH).join('\n'); + }); + } + +} + +Paged.registerHandlers(asciiTextFill); + + + diff --git a/assets/js/handlers.js b/assets/js/handlers.js new file mode 100644 index 0000000..dc3df17 --- /dev/null +++ b/assets/js/handlers.js @@ -0,0 +1,186 @@ +class asciiTextFill extends Paged.Handler { + constructor(chunker, polisher, caller) { + super(chunker, polisher, caller); + } + + afterRendered(pages) { + const PAD = 5; + const chars = ["-", "+", "{", "[", "}", "]", ";", "<", ">"]; + + /* ── 1. Mesurer charW et lineH avec une pre cachée ── */ + const probe = document.createElement('pre'); + probe.style.cssText = [ + 'position:absolute', 'visibility:hidden', 'top:0', 'left:0', + 'font-family:"Courier New",monospace', 'font-size:9pt', + 'line-height:1.5', 'white-space:pre' + ].join(';'); + probe.textContent = Array(10).fill('-'.repeat(100)).join('\n'); + document.body.appendChild(probe); + const pr = probe.getBoundingClientRect(); + const charW = pr.width / 200; + const lineH = pr.height / 20; + document.body.removeChild(probe); + + /* ── 2. COLS = nb de caractères par ligne dans la zone imprimable ── */ + const COLS = Math.floor(pages[0].width / charW); + const DASH = '-'.repeat(COLS); + + /* ── 3. makeBox centré dans COLS ── */ + function makeBox(lines, char) { + const maxLen = Math.max(...lines.map(l => l.length)); + const innerW = maxLen + PAD * 2; + const border = '|' + char.repeat(innerW) + '|'; + const empty = ' '.repeat(innerW + 2); + const rows = lines.map(l => + ' '.repeat(PAD) + l + ' '.repeat(innerW - PAD - l.length) + ); + const offset = Math.max(0, Math.floor((COLS - (innerW + 2)) / 10)); + const sp = ' '.repeat(offset); + return [sp + border, sp + empty, ...rows.map(r => sp + r), sp + empty, sp + border].join('\n'); + } + + /* ── 4. Itérer sur chaque .chapter ── */ + document.querySelectorAll('.chapter-title').forEach(titleEl => { + let randomChar = chars[Math.floor(Math.random() * chars.length)]; + const DASH = randomChar.repeat(COLS); + if(titleEl){ + const titleLinesH3 = Array.from(titleEl.querySelectorAll('h3')) + .map(n => n.textContent.trim()).filter(Boolean); + if (titleLinesH3.length) { + // Supprimer les h2/h3 originaux + titleEl.querySelectorAll('h3').forEach(el => el.remove()); + const preH3 = document.createElement('pre'); + preH3.textContent = makeBox(titleLinesH3, randomChar); + // Insérer la boîte juste après fill-top + const fillTop = titleEl.querySelector('.fill-top'); + fillTop.insertAdjacentElement('afterend', preH3); + } + const titleLinesH2 = Array.from(titleEl.querySelectorAll('h2')) + .map(n => n.textContent.trim()).filter(Boolean); + if (titleLinesH2.length) { + // Supprimer les h2/h3 originaux + titleEl.querySelectorAll('h2').forEach(el => el.remove()); + const pre = document.createElement('pre'); + pre.textContent = makeBox(titleLinesH2, randomChar); + // Insérer la boîte juste après fill-top + const fillTop = titleEl.querySelector('.fill-top'); + fillTop.insertAdjacentElement('afterend', pre); + } + const bioEl = titleEl.querySelector('.biographie'); + if(bioEl){ + const bioText = Array.from(bioEl.querySelectorAll('p')) + .map(p => p.textContent.trim()).join(' '); + const bioInnerW = COLS - 50; + + if (bioText) { + const wrapped = []; + let cur = ''; + bioText.split(/\s+/).forEach(w => { + const test = cur ? cur + ' ' + w : w; + if (test.length <= bioInnerW) { cur = test; } + else { if (cur) wrapped.push(cur); cur = w; } + }); + if (cur) wrapped.push(cur); + + const border = '|' + randomChar.repeat(bioInnerW) + '|'; + const pre = document.createElement('pre'); + pre.textContent = border + '\n\n' + wrapped.join('\n') + '\n\n' + border; + bioEl.innerHTML = ''; + bioEl.appendChild(pre); + } + } + const totalH = pages[0].height; + const fixedH = titleEl.offsetHeight; + // const fixedH = (titleEl ? titleEl.offsetHeight : 0) + (bioEl ? bioEl.offsetHeight : 0); + const spare = Math.max(0, totalH - fixedH); + + const ratios = [1/3, 1/3, 1/3]; + const fills = ['.fill-top', '.fill-mid', '.fill-bottom']; + + fills.forEach((sel, i) => { + const el = titleEl.querySelector(sel); + if (!el) return; + const n = Math.max(0, Math.floor((spare * ratios[i]) / lineH)); + el.textContent = Array(n).fill(DASH).join('\n'); + }); + } + + + + }); + + + // document.querySelectorAll('.chapter').forEach(chapter => { + // // /* ── Titre : h2 + h3 dans .chapter-title ── */ + // // const titleEl = chapter.querySelector('.chapter-title'); + // // if(titleEl){ + // // const titleLinesH3 = Array.from(titleEl.querySelectorAll('h3')) + // // .map(n => n.textContent.trim()).filter(Boolean); + // // if (titleLinesH3.length) { + // // // Supprimer les h2/h3 originaux + // // titleEl.querySelectorAll('h3').forEach(el => el.remove()); + // // const preH3 = document.createElement('pre'); + // // preH3.textContent = makeBox(titleLinesH3); + // // // Insérer la boîte juste après fill-top + // // const fillTop = titleEl.querySelector('.fill-top'); + // // fillTop.insertAdjacentElement('afterend', preH3); + // // } + // // const titleLinesH2 = Array.from(titleEl.querySelectorAll('h2')) + // // .map(n => n.textContent.trim()).filter(Boolean); + // // if (titleLinesH2.length) { + // // // Supprimer les h2/h3 originaux + // // titleEl.querySelectorAll('h2').forEach(el => el.remove()); + // // const pre = document.createElement('pre'); + // // pre.textContent = makeBox(titleLinesH2); + // // // Insérer la boîte juste après fill-top + // // const fillTop = titleEl.querySelector('.fill-top'); + // // fillTop.insertAdjacentElement('afterend', pre); + // // } + // // } + + // // /* ── Bio : .biographie dans ce chapter ── */ + // // const bioEl = chapter.querySelector('.biographie'); + // // if(bioEl){ + // // const bioText = Array.from(bioEl.querySelectorAll('p')) + // // .map(p => p.textContent.trim()).join(' '); + // // const bioInnerW = COLS - 50; + + // // if (bioText) { + // // const wrapped = []; + // // let cur = ''; + // // bioText.split(/\s+/).forEach(w => { + // // const test = cur ? cur + ' ' + w : w; + // // if (test.length <= bioInnerW) { cur = test; } + // // else { if (cur) wrapped.push(cur); cur = w; } + // // }); + // // if (cur) wrapped.push(cur); + + // // const border = '|' + '-'.repeat(bioInnerW) + '|'; + // // const pre = document.createElement('pre'); + // // pre.textContent = border + '\n\n' + wrapped.join('\n') + '\n\n' + border; + // // bioEl.innerHTML = ''; + // // bioEl.appendChild(pre); + // // } + // // } + + // const totalH = pages[0].height; + // // const fixedH = titleEl.offsetHeight + bioEl.offsetHeight; + // const fixedH = (titleEl ? titleEl.offsetHeight : 0) + (bioEl ? bioEl.offsetHeight : 0); + // const spare = Math.max(0, totalH - fixedH); + + // const ratios = [1/3, 1/3, 1/3]; + // const fills = ['.fill-top', '.fill-mid', '.fill-bottom']; + + // fills.forEach((sel, i) => { + // const spare = Math.max(0, totalH - fixedH); + // const el = chapter.querySelector(sel); + // if (!el) return; + // const n = Math.max(0, Math.floor((spare * ratios[i]) / lineH)); + // el.textContent = Array(n).fill(DASH).join('\n'); + // }); + + // }); + } +} + +Paged.registerHandlers(asciiTextFill); \ No newline at end of file diff --git a/assets/js/plugins/margin-notes.js b/assets/js/plugins/margin-notes.js index 36f77c9..962fb0b 100644 --- a/assets/js/plugins/margin-notes.js +++ b/assets/js/plugins/margin-notes.js @@ -1,7 +1,7 @@ // -------------- M A R G I N N O T E S S C R I P T ----------------- let classNotes = "margin-note"; // ← Change the CLASS of the notes here -let notesFloat = "left"; // ← Change the POSITION of the notes here +let notesFloat = "inside"; // ← Change the POSITION of the notes here class marginNotes extends Paged.Handler { constructor(chunker, polisher, caller) { @@ -97,16 +97,9 @@ class marginNotes extends Paged.Handler { counter-increment: callNote_' + toCamelClassNote(classNotes) + ';\ }\ \ - .note-call_' + classNotes + '::after {\ - content: counter(callNote_' + toCamelClassNote(classNotes) + ');\ - }\ - \ .note-marker_' + classNotes + ' {\ counter-increment: markerNote_' + toCamelClassNote(classNotes) + ';\ }\ - .note-marker_' + classNotes + '::before {\ - content: counter(markerNote_' + toCamelClassNote(classNotes) + ') "";\ - }\ ' + notePosition ); diff --git a/assets/pagedjs/interface.html b/assets/pagedjs/interface.html index 99d5984..b297fff 100644 --- a/assets/pagedjs/interface.html +++ b/assets/pagedjs/interface.html @@ -37,6 +37,12 @@ +
+ + +

@@ -45,12 +51,6 @@ Preview
-
- - -