ajouté cesures sur titres variables

web/themes/custom/leshed/assets/js/main.js

@@ -4,6 +4,7 @@ import '../scss/main.scss'
 import "splitting/dist/splitting.css";
 import "splitting/dist/splitting-cells.css";
 import Splitting from "splitting";
+import { hyphenateSync } from "hyphen/fr";
 
 // import Content from './vuejs/Content.vue'
 
@@ -79,7 +80,9 @@ import Splitting from "splitting";
       for (const txt of titles) {
         const splitted = Splitting({ target: txt, by: 'chars' });
         for (const word of splitted[0].words) {
-          styleWordChars(Array.from(word.getElementsByClassName('char')));
+          const chars = Array.from(word.getElementsByClassName('char'));
+          styleWordChars(chars);
+          hyphenateWord(chars);
         }
       }
     }
@@ -175,6 +178,37 @@ import Splitting from "splitting";
       }
     }
 
+    /**
+     * Insère des césures logicielles (U+00AD) aux points de coupure valides.
+     *
+     * Comme chaque lettre est un span (display:inline) sans « run » de texte
+     * continu, `hyphens: auto` est inopérant : on calcule donc les points de
+     * césure (motifs FR) et on insère un soft hyphen — en nœud texte, entre les
+     * lettres concernées — qui n'autorise une coupure (avec tiret) qu'à ces
+     * endroits. Les mots trop longs coupent proprement au lieu de casser
+     * n'importe où.
+     */
+    function hyphenateWord(chars) {
+      if (chars.length < 5) return;
+      const SOFT = '\u00AD';
+      const text = chars.map((c) => c.textContent).join('');
+      const hyphenated = hyphenateSync(text);
+      if (!hyphenated.includes(SOFT)) return;
+
+      let letter = 0;
+      for (const ch of hyphenated) {
+        if (ch === SOFT) {
+          const target = chars[letter];
+          if (letter > 0 && target && target.parentNode) {
+            target.parentNode.insertBefore(document.createTextNode(SOFT), target);
+          }
+        }
+        else {
+          letter++;
+        }
+      }
+    }
+
     function initBurgerMenu() {
       let header_right = document.getElementById('burger-btn');
       header_right.parentElement.addEventListener('click', function(e){