diff --git a/maquette-tests/assets/css/subtitles.css b/maquette-tests/assets/css/subtitles.css index 1999136..836ac4e 100644 --- a/maquette-tests/assets/css/subtitles.css +++ b/maquette-tests/assets/css/subtitles.css @@ -21,6 +21,11 @@ h3, h4{ line-height: var(--sign-baseline); } +.h3-line { + display: flex; + justify-content: flex-end; +} + .h3-before{ padding-right: 0.75ch; } @@ -29,6 +34,11 @@ h3, h4{ padding-left: 0.75ch; } +.h3-text{ + background-color: yellow; + flex-grow: 2; +} + .decor-h3{ font-size: var(--sign-size); color: var(--sign-color); diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css index ce6997c..7053909 100644 --- a/maquette-tests/assets/css/text.css +++ b/maquette-tests/assets/css/text.css @@ -9,14 +9,29 @@ } + + + .container-following-note + p, p + p{ - text-indent: 30%; + /* text-indent: 30%; */ position: relative; /* text-indent: -6ch; */ } +p::before{ + content: "............."; + font-size: var(--sign-size); + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + line-height: var(--sign-baseline); + position: relative; + top: -3px; + /* position: absolute; + left: 0; */ +} + h4{ diff --git a/maquette-tests/index.html b/maquette-tests/index.html index 47b7816..6add4c2 100644 --- a/maquette-tests/index.html +++ b/maquette-tests/index.html @@ -224,33 +224,12 @@ aussi précises qu’elles s’avèrent uniformes10.

- + + -
-
=
-
==
-
===
-
==
-
=
-
+

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 diff --git a/maquette-tests/js/items-decor.js b/maquette-tests/js/items-decor.js index 3ca98da..e11f0d3 100644 --- a/maquette-tests/js/items-decor.js +++ b/maquette-tests/js/items-decor.js @@ -18,43 +18,79 @@ export default class itemsDecor extends Handler { return div; } + createLine(symbol, nodes) { + const line = document.createElement("span"); + line.className = "h3-line"; + + const spanBefore = document.createElement("span"); + spanBefore.className = "h3-before"; + spanBefore.textContent = symbol.repeat(3); + line.appendChild(spanBefore); + + const spanText = document.createElement("span"); + spanText.className = "h3-text"; + nodes.forEach(node => spanText.appendChild(node)); + line.appendChild(spanText); + + const spanAfter = document.createElement("span"); + spanAfter.className = "h3-after"; + spanAfter.textContent = ""; + line.appendChild(spanAfter); + + 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]; - 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); - } + pageElement.querySelectorAll("h3").forEach(subtitle => { + if (subtitle.querySelector(".h3-line")) return; - let spanAfter = subtitle.querySelector(".h3-after"); - if (!spanAfter) { - spanAfter = document.createElement("span"); - spanAfter.className = "h3-after"; - subtitle.appendChild(spanAfter); - } + const children = Array.from(subtitle.childNodes); - 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; + // 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); - 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"); + // 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; + } + } + }); + + let firstDecor, secondDecor; + if (isLeft) { + firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small"); + secondDecor = this.createDecor(symbol, bigSizes, "decor-h3_big"); + } else { + firstDecor = this.createDecor(symbol, bigSizes, "decor-h3_big"); + secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small"); + } subtitle.parentNode.insertBefore(firstDecor, subtitle); subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling); });