Julie/decor-6-expe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add symbol nav left page

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 09:48:16 +01:00
parent 15aaf441cd
commit 512d62e5df
6 changed files with 139 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

16
maquette-tests/assets/css/01_var.css
View file

@ -1,5 +1,12 @@
:root{ :root{
--symbol: "=";
--unit: 70px;
--sub-unit: 17.5px;
--font: 'Routed Gothic', sans-serif; --font: 'Routed Gothic', sans-serif;
--font: 'Wagram Slab', serif; --font: 'Wagram Slab', serif;
--font: 'Bilzig', serif; --font: 'Bilzig', serif;
@ -52,16 +59,17 @@
--baseline: 18px; --baseline: 18px;
--fs-nav: 11px; --fs-nav: 11px;
--fs-subtitle: 11px; --fs-subtitle: 16px;
--fs-notes: 11px; --fs-notes: 11px;
--unit: 20px;
--gap: 8px; --gap: 8px;
--sign-size: 16px; --sign-size: 16px;
--sign-baseline: 18px; --sign-baseline: 18px;
--sign-spacing: 0.4rem; --sign-spacing: 0.45rem;
--sign-spacing: 7.2px;
--sign-color: var(--red); --sign-color: var(--red);

65
maquette-tests/assets/css/03_layout.css
View file

@ -6,9 +6,7 @@
margin-bottom: 14mm; margin-bottom: 14mm;
bleed: 6mm; bleed: 6mm;
marks: crop; marks: crop;
--symbol-top: 1px;
} }
@page:left { @page:left {
@ -17,29 +15,51 @@
@top-left { @top-left {
content: element(decor); content: element(decor);
width: 0px;
vertical-align: top; vertical-align: top;
padding-top: 8mm; padding-top: calc(8mm - var(--symbol-top));
width: calc(var(--unit)*2);
font-size: var(--fs-subtitle);
}
@top-center{
content: element(author);
vertical-align: top;
padding-top: calc(8mm - var(--symbol-top));
text-align: left;
white-space: nowrap;
padding-right: 1.5ch;
padding-left: 0.5ch;
font-size: var(--fs-subtitle);
} }
@top-right { @top-right {
content: element(author); content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
vertical-align: top; font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
vertical-align: top;
padding-top: 8mm; padding-top: 8mm;
width: 100%; width: 100%;
padding-top: 8mm;
text-align: right;
} }
@top-left-corner { @top-left-corner {
content: counter(page); content: var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
vertical-align: top; vertical-align: top;
padding-top: 8mm; padding-top: 8mm;
text-align: left; text-align: left;
margin-left: 11mm; margin-left: 3mm;
} }
@ -133,4 +153,27 @@
.nav-decor { .nav-decor {
position: running(decor); position: running(decor);
}
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
padding-left: 1ch;
width: calc(var(--unit) + var(--sub-unit));
position: relative;
top: var(--symbol-top);
}
/* DELETE BEFORE PRINT */
.pagedjs_margin-top-right-corner-holder{
background-color: white;
width: 40px;
position: absolute;
right: -41px;
} }

2
maquette-tests/assets/css/notes.css
View file

@ -12,7 +12,7 @@
} }
.container-following-note { .container-following-note {
margin-left: 30%; margin-left: calc(var(--unit)*2);
} }

23
maquette-tests/assets/css/subtitles.css
View file

@ -3,22 +3,20 @@ h3, h4{
} }
h3, h4{ h3, h4{
font-weight: normal; font-weight: normal;
margin-top: calc(var(--baseline)*0.5); margin-top: calc(var(--baseline)*1);
margin-bottom: calc(var(--baseline)*0.5); margin-bottom: calc(var(--baseline)*1);
font-size: var(--font-size);
position: relative; position: relative;
font-size: var(--sign-size); font-size: var(--fs-subtitle);
color: var(--sign-color); color: var(--sign-color);
} }
.h3-before, .h3-before,
.h3-after{ .h3-after{
letter-spacing:var(--sign-spacing); letter-spacing:var(--sign-spacing);
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
} }
.h3-line { .h3-line {
@ -32,10 +30,12 @@ h3, h4{
.h3-after{ .h3-after{
padding-left: 0.75ch; padding-left: 0.75ch;
position: relative;
left: 6px;
} }
.h3-text{ .h3-text{
background-color: yellow; /* background-color: yellow; */
flex-grow: 2; flex-grow: 2;
} }
@ -51,7 +51,8 @@ h3, h4{
.decor-h3_small{ .decor-h3_small{
left: -16mm; left: -13.5mm;
padding-top: 9px;
} }
@ -61,12 +62,12 @@ h3, h4{
} }
.decor-h3_big{ .decor-h3_big{
right: -22mm; right: -93px;
text-align: right; text-align: right;
} }
.decor-h3_big div{ .decor-h3_big div{
position: relative; position: relative;
top: calc(var(--baseline)*-5); top: calc(var(--baseline) * -3 - 9px);
} }

19
maquette-tests/assets/css/text.css
View file

@ -12,16 +12,9 @@
.container-following-note + p,
p + p{
/* text-indent: 30%; */
position: relative;
/* text-indent: -6ch; */
}
p::before{ p::before{
content: "............."; content: "............";
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
@ -32,13 +25,13 @@ p::before{
left: 0; */ left: 0; */
} }
.following-h3::before{
display: none!important;
h4{
border: var(--border-grey);
background: none;
} }
blockquote p{ blockquote p{
/* font-family: var(--mono); */ /* font-family: var(--mono); */
} }

93
maquette-tests/js/items-decor.js
View file

@ -40,49 +40,47 @@ export default class itemsDecor extends Handler {
return line; return line;
} }
afterPageLayout(pageElement, page, breakToken) { processTitle(subtitle, symbol, withDecor, isLeft) {
const symbol = this.symbol; if (subtitle.querySelector(".h3-line")) return;
const isLeft = pageElement.classList.contains("pagedjs_left_page");
const smallSizes = [1, 2, 3, 2, 1];
const bigSizes = [1, 2, 3, 4, 3, 2, 1];
pageElement.querySelectorAll("h3").forEach(subtitle => { const children = Array.from(subtitle.childNodes);
if (subtitle.querySelector(".h3-line")) return;
const children = Array.from(subtitle.childNodes); // Découper en segments à chaque <br>
const segments = [];
let current = [];
children.forEach(node => {
if (node.nodeName === "BR") {
segments.push(current);
current = [];
} else {
current.push(node);
}
});
segments.push(current);
// Découper en segments à chaque <br> // Reconstruire le titre avec des .h3-line
const segments = []; subtitle.innerHTML = "";
let current = []; segments.forEach(nodes => {
children.forEach(node => { const line = this.createLine(symbol, nodes);
if (node.nodeName === "BR") { subtitle.appendChild(line);
segments.push(current);
current = []; const spanAfter = line.querySelector(".h3-after");
} else { const baseHeight = line.offsetHeight;
current.push(node); let count = 0;
// h3-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
while (count < 300) {
count++;
spanAfter.textContent = symbol.repeat(count);
if (line.offsetHeight > baseHeight) {
spanAfter.textContent = symbol.repeat(count - 1);
break;
} }
}); }
segments.push(current); });
// Reconstruire le h3 avec des .h3-line
subtitle.innerHTML = "";
segments.forEach(nodes => {
const line = this.createLine(symbol, nodes);
subtitle.appendChild(line);
const spanAfter = line.querySelector(".h3-after");
const baseHeight = line.offsetHeight;
let count = 0;
while (count < 300) {
count++;
spanAfter.textContent = symbol.repeat(count);
if (line.offsetHeight > baseHeight) {
spanAfter.textContent = symbol.repeat(count - 1);
break;
}
}
});
if (withDecor) {
const smallSizes = [1, 2, 3, 2, 1];
const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let firstDecor, secondDecor; let firstDecor, secondDecor;
if (isLeft) { if (isLeft) {
firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small"); firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
@ -92,7 +90,24 @@ export default class itemsDecor extends Handler {
secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small"); secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
} }
subtitle.parentNode.insertBefore(firstDecor, subtitle); subtitle.parentNode.insertBefore(firstDecor, subtitle);
subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling); subtitle.parentNode.insertBefore(secondDecor, subtitle);
}
}
afterPageLayout(pageElement, page, breakToken) {
const symbol = this.symbol;
const isLeft = pageElement.classList.contains("pagedjs_left_page");
pageElement.querySelectorAll("h3").forEach(subtitle => {
this.processTitle(subtitle, symbol, true, isLeft);
const next = subtitle.nextElementSibling;
if (next) next.classList.add("following-h3");
});
pageElement.querySelectorAll("h4").forEach(subtitle => {
this.processTitle(subtitle, symbol, false, isLeft);
const next = subtitle.nextElementSibling;
if (next) next.classList.add("following-h4");
}); });
} }
} }