support double line in subtitles

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);

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{

maquette-tests/index.html

@@ -224,33 +224,12 @@
             aussi précises qu’elles s’avèrent uniformes<a href="#fn10" class="footnote-ref" id="fnref10"
                 role="doc-noteref"><sup>10</sup></a>.</p>
 
-                <!-- <div class="decor-h3">
+             
-                    <div>+</div>
+             
-                    <div>++</div>
-                    <div>+++</div>
-                     <div>++</div>
-                     <div>+</div>
-                </div> -->
 
-                 <div class="decor-h3 decor-h3_small">
+        <h3>La langage est un champ de bataille</h3>
-                    <div>=</div>
-                    <div>==</div>
-                    <div>===</div>
-                     <div>==</div>
-                     <div>=</div>
-                </div>
 
-        <h3><span class="h3-before">===</span>La langage est un champ de bataille<span class="h3-after">====</sapn></h3>
+          
-
-            <div class="decor-h3 decor-h3_big">
-                    <div>=</div>
-                    <div>==</div>
-                    <div>===</div>
-                    <div>====</div>
-                    <div>===</div>
-                     <div>==</div>
-                     <div>=</div>
-                </div>
 
         <p>Si les LLM apparaissent comme de nouveaux acteurs sociolinguistiques,
             leurs usages, nombreux et divers, cristallisent aussi une forme de lutte

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");
+      pageElement.querySelectorAll("h3").forEach(subtitle => {
-      subtitles.forEach(subtitle => {
+        if (subtitle.querySelector(".h3-line")) return;
-        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");
+        const children = Array.from(subtitle.childNodes);
-        if (!spanAfter) {
-          spanAfter = document.createElement("span");
-          spanAfter.className = "h3-after";
-          subtitle.appendChild(spanAfter);
-        }
 
-        spanAfter.textContent = "";
+        // Découper en segments à chaque <br>
-        const baseHeight = subtitle.offsetHeight;
+        const segments = [];
-        let count = 0;
+        let current = [];
-        // 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
+        children.forEach(node => {
-        while (count < 300) {
+          if (node.nodeName === "BR") {
-          count++;
+            segments.push(current);
-          spanAfter.textContent = symbol.repeat(count);
+            current = [];
-          if (subtitle.offsetHeight > baseHeight) {
+          } else {
-            spanAfter.textContent = symbol.repeat(count - 1);
+            current.push(node);
-            break;
           }
-        }
+        });
+        segments.push(current);
 
-        const firstDecor  = this.createDecor(symbol, isLeft ? smallSizes : bigSizes,   isLeft ? "decor-h3_small" : "decor-h3_big");
+        // Reconstruire le h3 avec des .h3-line
-        const secondDecor = this.createDecor(symbol, isLeft ? bigSizes   : smallSizes, isLeft ? "decor-h3_big"   : "decor-h3_small");
+        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);
       });