diff --git a/maquette-tests/assets/css/01_var.css b/maquette-tests/assets/css/01_var.css
index c82f365..5b13174 100644
--- a/maquette-tests/assets/css/01_var.css
+++ b/maquette-tests/assets/css/01_var.css
@@ -6,6 +6,10 @@
--font: 'Routed Gothic', sans-serif;
+
+ --font-title: 'OCR-X';
+
+
/* --font: 'HAL Timezone', serif; */
--mono: 'Selectric Mono', monospace;
--mono: 'Ivory Mono', monospace;
@@ -17,6 +21,8 @@
--font-notes: 'Selectric Mono', monospace;
--font-notes: 'Baskemo Sans', monospace;
+ --font-notes: 'OCR-X';
+
@@ -53,4 +59,11 @@
--gap: 8px;
+ --sign-size: 16px;
+ --sign-baseline: 18px;
+ --sign-spacing: 0.4rem;
+ --sign-color: var(--red);
+
+
+
}
\ No newline at end of file
diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css
index 4881696..8141f0c 100644
--- a/maquette-tests/assets/css/03_layout.css
+++ b/maquette-tests/assets/css/03_layout.css
@@ -7,13 +7,13 @@
bleed: 6mm;
marks: crop;
- margin-left: 33mm;
- margin-right: 11mm;
+
}
@page:left {
-
+ margin-left: 18mm;
+ margin-right: 26mm;
@top-left {
content: element(decor);
@@ -47,9 +47,8 @@
}
@page:right {
- /* margin-left: 18mm;
- margin-right: 26mm; */
-
+ margin-left: 26mm;
+ margin-right: 18mm;
@top-left {
content: element(type);
diff --git a/maquette-tests/assets/css/chapter-header.css b/maquette-tests/assets/css/chapter-header.css
index bab3579..a7163bb 100644
--- a/maquette-tests/assets/css/chapter-header.css
+++ b/maquette-tests/assets/css/chapter-header.css
@@ -2,11 +2,21 @@
.chapter-header {
position: relative;
+ font-family: var(--font-title);
+ font-size: 36px;
+ line-height: 1;
+ break-after: page;
+
+
}
+.chapter-header .bio{
+ display: none;
+}
-.chapter-header p {
+
+/* .chapter-header p {
text-indent: 0px !important;
}
@@ -20,14 +30,7 @@
.chapter-header .hgroup{
- /* margin-top: var(--gap);
- border-left: var(--unit) solid var(--grey);
- border-left: var(--unit) solid var(--grey);
- padding-left: var(--gap);
-
- display: flex;
- flex-direction: column; */
margin-left: 15%;
}
@@ -49,24 +52,7 @@
margin-top: calc(var(--baseline)*6);
margin-bottom: calc(var(--baseline)*2);
- /* background-color: black;
- color: white;
- font-family: var(--mono);
- font-size: var(--fs-nav);
- text-align: center;
-
- font-size: var(--fs-nav);
- line-height: 1;
- padding: 4px 1ch;
- font-weight: normal;
-
- height: var(--unit);
- margin-bottom: 0; */
-
- /* display: inline-block;
- margin-inline: auto;
- margin-top: calc(var(--baseline)*1); */
}
@@ -76,16 +62,4 @@
.chapter-header{
margin-bottom: calc(var(--baseline)*1);
-}
-
-.chapter-header:after{
- /* content: "";
- display: block;
- margin-top: var(--gap);
-
-
- border-top: 2px dashed var(--grey);
-
- margin-bottom: calc(var(--baseline)*1); */
-
-}
\ No newline at end of file
+} */
diff --git a/maquette-tests/assets/css/subtitles.css b/maquette-tests/assets/css/subtitles.css
new file mode 100644
index 0000000..1999136
--- /dev/null
+++ b/maquette-tests/assets/css/subtitles.css
@@ -0,0 +1,62 @@
+h3, h4{
+ break-after: avoid;
+}
+h3, h4{
+ font-weight: normal;
+ margin-top: calc(var(--baseline)*0.5);
+ margin-bottom: calc(var(--baseline)*0.5);
+ font-size: var(--font-size);
+ position: relative;
+ font-size: var(--sign-size);
+ 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);
+}
+
+.h3-before{
+ padding-right: 0.75ch;
+}
+
+.h3-after{
+ padding-left: 0.75ch;
+}
+
+.decor-h3{
+ font-size: var(--sign-size);
+ color: var(--sign-color);
+ letter-spacing: var(--sign-spacing);
+ line-height: var(--sign-baseline);
+ position: absolute;
+}
+
+
+
+
+.decor-h3_small{
+ left: -16mm;
+}
+
+
+ .decor-h3_small div{
+ position: relative;
+ top: calc(var(--baseline)*-2);
+}
+
+.decor-h3_big{
+ right: -22mm;
+ text-align: right;
+}
+
+
+ .decor-h3_big div{
+ position: relative;
+ top: calc(var(--baseline)*-5);
+}
\ No newline at end of file
diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css
index 1e10cd2..ce6997c 100644
--- a/maquette-tests/assets/css/text.css
+++ b/maquette-tests/assets/css/text.css
@@ -17,60 +17,6 @@ p + p{
}
-p::before{
- /* content: ">";
- position: absolute;
- left: 0;
- font-family: var(--mono);
- font-weight: normal;
- font-size: var(--fs-nav); */
-
- /* display: block;
- width: var(--unit);
- height: var(--unit);
- background-color: var(--grey);
- top: 2px;
- display: flex;
- align-items: center; */
- /* justify-content: center; */
-}
-
-
-
-
-
-h3, h4{
- break-after: avoid;
-}
-h3, h4{
- font-weight: normal;
- /* font-size: 14px; */
- font-family: var(--font-subtitle);
- /* font-family: var(--font-subtitle);
- font-size: var(--fs-subtitle);
- background-color: var(--grey);
- font-size: var(--fs-nav);
- line-height: 1;
- padding: 4px 1ch;
- min-height: var(--unit);
- margin-top: calc(var(--baseline)*1.5);
- margin-bottom: calc(var(--baseline)*0.5);
- font-weight: normal; */
- /* padding-left: 1.5ch; */
- margin-top: calc(var(--baseline)*1.5);
- margin-bottom: calc(var(--baseline)*0.5);
- padding-left: 30%;
-}
-
-h3::before,
-h3::after{
- /* content: "+------------------------------------------------+";
- display: block;
- position: relative;
- left: -1.5ch;
- width: calc(100% + 1.5ch); */
-}
-
h4{
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff b/maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff
new file mode 100644
index 0000000..dd404a6
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff2 b/maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff2
new file mode 100644
index 0000000..a18808e
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff2 differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff b/maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff
new file mode 100644
index 0000000..a72618d
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff2 b/maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff2
new file mode 100644
index 0000000..0ddc804
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff2 differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff b/maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff
new file mode 100644
index 0000000..91bc2f7
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff2 b/maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff2
new file mode 100644
index 0000000..879bc63
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff2 differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff b/maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff
new file mode 100644
index 0000000..1e57e58
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff2 b/maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff2
new file mode 100644
index 0000000..ba00760
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff2 differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff b/maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff
new file mode 100644
index 0000000..4d72640
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff2 b/maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff2
new file mode 100644
index 0000000..03ddcc5
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff2 differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff b/maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff
new file mode 100644
index 0000000..a6c52c0
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff differ
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff2 b/maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff2
new file mode 100644
index 0000000..f2ad5f9
Binary files /dev/null and b/maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff2 differ
diff --git a/maquette-tests/assets/fonts/OCR-X/stylesheet.css b/maquette-tests/assets/fonts/OCR-X/stylesheet.css
index 0a4f0ca..bed43e7 100644
--- a/maquette-tests/assets/fonts/OCR-X/stylesheet.css
+++ b/maquette-tests/assets/fonts/OCR-X/stylesheet.css
@@ -1,13 +1,54 @@
@font-face {
- font-family: "OCR X";
- src: url("OCR-XTrial-VariableVF.ttf") format("truetype");
- font-weight: 10 220;
+ font-family: 'OCR-X';
+ src: url('OCR-X-Bold.woff2') format('woff2'),
+ url('OCR-X-Bold.woff') format('woff');
+ font-weight: bold;
font-style: normal;
- }
-
- @font-face {
- font-family: "OCR X";
- src: url("OCR-XTrial-VariableVF.woff2") format("woff2");
- font-weight: 10 220;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'OCR-X';
+ src: url('OCR-X-Black.woff2') format('woff2'),
+ url('OCR-X-Black.woff') format('woff');
+ font-weight: 900;
font-style: normal;
- }
\ No newline at end of file
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'OCR-X';
+ src: url('OCR-X-Light.woff2') format('woff2'),
+ url('OCR-X-Light.woff') format('woff');
+ font-weight: 300;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'OCR-X';
+ src: url('OCR-X-Regular.woff2') format('woff2'),
+ url('OCR-X-Regular.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'OCR-X';
+ src: url('OCR-X-Medium.woff2') format('woff2'),
+ url('OCR-X-Medium.woff') format('woff');
+ font-weight: 500;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'OCR-X';
+ src: url('OCR-X-Thin.woff2') format('woff2'),
+ url('OCR-X-Thin.woff') format('woff');
+ font-weight: 100;
+ font-style: normal;
+ font-display: swap;
+}
+
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-XTrial-VariableVF.ttf b/maquette-tests/assets/fonts/OCR-X_trial/OCR-XTrial-VariableVF.ttf
similarity index 100%
rename from maquette-tests/assets/fonts/OCR-X/OCR-XTrial-VariableVF.ttf
rename to maquette-tests/assets/fonts/OCR-X_trial/OCR-XTrial-VariableVF.ttf
diff --git a/maquette-tests/assets/fonts/OCR-X/OCR-XTrial-VariableVF.woff2 b/maquette-tests/assets/fonts/OCR-X_trial/OCR-XTrial-VariableVF.woff2
similarity index 100%
rename from maquette-tests/assets/fonts/OCR-X/OCR-XTrial-VariableVF.woff2
rename to maquette-tests/assets/fonts/OCR-X_trial/OCR-XTrial-VariableVF.woff2
diff --git a/maquette-tests/assets/fonts/OCR-X_trial/stylesheet.css b/maquette-tests/assets/fonts/OCR-X_trial/stylesheet.css
new file mode 100644
index 0000000..0a4f0ca
--- /dev/null
+++ b/maquette-tests/assets/fonts/OCR-X_trial/stylesheet.css
@@ -0,0 +1,13 @@
+@font-face {
+ font-family: "OCR X";
+ src: url("OCR-XTrial-VariableVF.ttf") format("truetype");
+ font-weight: 10 220;
+ font-style: normal;
+ }
+
+ @font-face {
+ font-family: "OCR X";
+ src: url("OCR-XTrial-VariableVF.woff2") format("woff2");
+ font-weight: 10 220;
+ font-style: normal;
+ }
\ No newline at end of file
diff --git a/maquette-tests/csspageweaver/manifest.json b/maquette-tests/csspageweaver/manifest.json
index 6b9b816..8636b8d 100644
--- a/maquette-tests/csspageweaver/manifest.json
+++ b/maquette-tests/csspageweaver/manifest.json
@@ -29,9 +29,11 @@
"assets/css/chapter-header.css",
"assets/css/item-decor.css",
"assets/css/notes.css",
- "assets/css/text.css"
+ "assets/css/text.css",
+ "assets/css/subtitles.css"
],
"hook": [
+ "/js/items-decor.js"
]
}
diff --git a/maquette-tests/index.html b/maquette-tests/index.html
index 93085ee..47b7816 100644
--- a/maquette-tests/index.html
+++ b/maquette-tests/index.html
@@ -27,6 +27,8 @@
+
+
@@ -221,7 +223,35 @@
fond : un dialecte hybride qui n’autorise que l’élaboration d’idées
aussi précises qu’elles s’avèrent uniformes.
- La langage est un champ de bataille
+
+
+
+
+
=
+
==
+
===
+
==
+
=
+
===La langage est un champ de bataille====
+
+
+
=
+
==
+
===
+
====
+
===
+
==
+
=
+
Si les LLM apparaissent comme de nouveaux acteurs sociolinguistiques,
leurs usages, nombreux et divers, cristallisent aussi une forme de lutte
culturelle. Cette conflictualité se donne à voir sur les réseaux sociaux
diff --git a/maquette-tests/js/items-decor.js b/maquette-tests/js/items-decor.js
index 706c6ea..3ca98da 100644
--- a/maquette-tests/js/items-decor.js
+++ b/maquette-tests/js/items-decor.js
@@ -1,24 +1,62 @@
import { Handler } from '/csspageweaver/lib/paged.esm.js';
-export default class myCustomHandler2 extends Handler {
+export default class itemsDecor extends Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
+ this.symbol = "=";
}
-
+ createDecor(symbol, sizes, sizeClass) {
+ const div = document.createElement("div");
+ div.className = `decor-h3 ${sizeClass}`;
+ sizes.forEach(n => {
+ const line = document.createElement("div");
+ line.textContent = symbol.repeat(n);
+ div.appendChild(line);
+ });
+ return div;
+ }
+
afterPageLayout(pageElement, page, breakToken) {
- let pageArea = pageElement.querySelector(".pagedjs_area");
- let pageAreaTop = pageArea.getBoundingClientRect().top;
- let items = pageElement.querySelectorAll("p, h3, h4, .inline-note");
- items.forEach(function (item) {
- let topOffset = item.getBoundingClientRect().top - pageAreaTop;
- let decor = document.createElement("div");
- decor.classList.add("item-decor");
- decor.style.top = topOffset + "px";
- decor.textContent = pageElement.classList.contains("pagedjs_left_page") ? "<" : ">";
- pageArea.appendChild(decor);
+ 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];
+
+ let subtitles = pageElement.querySelectorAll("h3");
+ subtitles.forEach(subtitle => {
+ if (!subtitle.querySelector(".h3-before")) {
+ const spanBefore = document.createElement("span");
+ spanBefore.className = "h3-before";
+ spanBefore.textContent = symbol.repeat(3);
+ subtitle.insertBefore(spanBefore, subtitle.firstChild);
+ }
+
+ let spanAfter = subtitle.querySelector(".h3-after");
+ if (!spanAfter) {
+ spanAfter = document.createElement("span");
+ spanAfter.className = "h3-after";
+ subtitle.appendChild(spanAfter);
+ }
+
+ spanAfter.textContent = "";
+ const baseHeight = subtitle.offsetHeight;
+ let count = 0;
+ // Pour compléter la ligne: ajoute le symbole dans le span en vérifiant la hauteur du titre, si l'ajout d'un symbole augmente la hauteur du titre, alors on enleve un symbole
+ while (count < 300) {
+ count++;
+ spanAfter.textContent = symbol.repeat(count);
+ if (subtitle.offsetHeight > baseHeight) {
+ spanAfter.textContent = symbol.repeat(count - 1);
+ break;
+ }
+ }
+
+ const firstDecor = this.createDecor(symbol, isLeft ? smallSizes : bigSizes, isLeft ? "decor-h3_small" : "decor-h3_big");
+ const secondDecor = this.createDecor(symbol, isLeft ? bigSizes : smallSizes, isLeft ? "decor-h3_big" : "decor-h3_small");
+ subtitle.parentNode.insertBefore(firstDecor, subtitle);
+ subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
});
}
}
-