diff --git a/maquette-tests/assets/css/01_var.css b/maquette-tests/assets/css/01_var.css
index 5b13174..ddf1dfd 100644
--- a/maquette-tests/assets/css/01_var.css
+++ b/maquette-tests/assets/css/01_var.css
@@ -1,5 +1,12 @@
:root{
+ --symbol: "=";
+ --unit: 70px;
+ --sub-unit: 17.5px;
+
+
+
+
--font: 'Routed Gothic', sans-serif;
--font: 'Wagram Slab', serif;
--font: 'Bilzig', serif;
@@ -52,16 +59,17 @@
--baseline: 18px;
--fs-nav: 11px;
- --fs-subtitle: 11px;
+ --fs-subtitle: 16px;
--fs-notes: 11px;
- --unit: 20px;
+
--gap: 8px;
--sign-size: 16px;
- --sign-baseline: 18px;
- --sign-spacing: 0.4rem;
+ --sign-baseline: 18px;
+ --sign-spacing: 0.45rem;
+ --sign-spacing: 7.2px;
--sign-color: var(--red);
diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css
index 8141f0c..56c0854 100644
--- a/maquette-tests/assets/css/03_layout.css
+++ b/maquette-tests/assets/css/03_layout.css
@@ -6,9 +6,7 @@
margin-bottom: 14mm;
bleed: 6mm;
marks: crop;
-
-
-
+ --symbol-top: 1px;
}
@page:left {
@@ -17,29 +15,51 @@
@top-left {
content: element(decor);
- width: 0px;
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 {
- content: element(author);
- vertical-align: top;
+ 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) ;
+ 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;
width: 100%;
- padding-top: 8mm;
- text-align: right;
+
}
@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;
padding-top: 8mm;
text-align: left;
- margin-left: 11mm;
+ margin-left: 3mm;
}
@@ -133,4 +153,27 @@
.nav-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;
}
\ No newline at end of file
diff --git a/maquette-tests/assets/css/notes.css b/maquette-tests/assets/css/notes.css
index cb2a2ec..ec43341 100644
--- a/maquette-tests/assets/css/notes.css
+++ b/maquette-tests/assets/css/notes.css
@@ -12,7 +12,7 @@
}
.container-following-note {
- margin-left: 30%;
+ margin-left: calc(var(--unit)*2);
}
diff --git a/maquette-tests/assets/css/subtitles.css b/maquette-tests/assets/css/subtitles.css
index 836ac4e..5d43496 100644
--- a/maquette-tests/assets/css/subtitles.css
+++ b/maquette-tests/assets/css/subtitles.css
@@ -3,22 +3,20 @@ h3, h4{
}
h3, h4{
font-weight: normal;
- margin-top: calc(var(--baseline)*0.5);
- margin-bottom: calc(var(--baseline)*0.5);
- font-size: var(--font-size);
+ margin-top: calc(var(--baseline)*1);
+ margin-bottom: calc(var(--baseline)*1);
position: relative;
- font-size: var(--sign-size);
+ font-size: var(--fs-subtitle);
color: var(--sign-color);
}
.h3-before,
.h3-after{
-
letter-spacing:var(--sign-spacing);
font-size: var(--sign-size);
- color: var(--sign-color);
- line-height: var(--sign-baseline);
+ color: var(--sign-color);
+ line-height: var(--sign-baseline);
}
.h3-line {
@@ -32,10 +30,12 @@ h3, h4{
.h3-after{
padding-left: 0.75ch;
+ position: relative;
+ left: 6px;
}
.h3-text{
- background-color: yellow;
+ /* background-color: yellow; */
flex-grow: 2;
}
@@ -51,7 +51,8 @@ h3, h4{
.decor-h3_small{
- left: -16mm;
+ left: -13.5mm;
+ padding-top: 9px;
}
@@ -61,12 +62,12 @@ h3, h4{
}
.decor-h3_big{
- right: -22mm;
+ right: -93px;
text-align: right;
}
.decor-h3_big div{
position: relative;
- top: calc(var(--baseline)*-5);
+ top: calc(var(--baseline) * -3 - 9px);
}
\ No newline at end of file
diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css
index 7053909..cb094dd 100644
--- a/maquette-tests/assets/css/text.css
+++ b/maquette-tests/assets/css/text.css
@@ -12,16 +12,9 @@
-.container-following-note + p,
-p + p{
- /* text-indent: 30%; */
- position: relative;
- /* text-indent: -6ch; */
-
-}
p::before{
- content: ".............";
+ content: "............";
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
@@ -32,13 +25,13 @@ p::before{
left: 0; */
}
-
-
-h4{
- border: var(--border-grey);
- background: none;
+.following-h3::before{
+ display: none!important;
}
+
+
+
blockquote p{
/* font-family: var(--mono); */
}
diff --git a/maquette-tests/js/items-decor.js b/maquette-tests/js/items-decor.js
index e11f0d3..a3f9c22 100644
--- a/maquette-tests/js/items-decor.js
+++ b/maquette-tests/js/items-decor.js
@@ -40,49 +40,47 @@ export default class itemsDecor extends Handler {
return line;
}
- afterPageLayout(pageElement, page, breakToken) {
- const symbol = this.symbol;
- const isLeft = pageElement.classList.contains("pagedjs_left_page");
- const smallSizes = [1, 2, 3, 2, 1];
- const bigSizes = [1, 2, 3, 4, 3, 2, 1];
+ processTitle(subtitle, symbol, withDecor, isLeft) {
+ if (subtitle.querySelector(".h3-line")) return;
- pageElement.querySelectorAll("h3").forEach(subtitle => {
- if (subtitle.querySelector(".h3-line")) return;
+ const children = Array.from(subtitle.childNodes);
- const children = Array.from(subtitle.childNodes);
+ // Découper en segments à chaque
+ 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
- const segments = [];
- let current = [];
- children.forEach(node => {
- if (node.nodeName === "BR") {
- segments.push(current);
- current = [];
- } else {
- current.push(node);
+ // Reconstruire le titre 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;
+ // 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;
if (isLeft) {
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");
}
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");
});
}
}