variable titles exports fixed

web/modules/custom/leshed_svg_export/README.md

@@ -119,23 +119,54 @@ Comportement Drupal (`Drupal.behaviors.leshedSvgExport`) :
   demanderait soit de modifier le CSS du thème, soit de recouvrir le titre
   d'un calque — les deux sont exclus. Sur tout titre sans cette règle
   (l'immense majorité), le survol fonctionne normalement.
-- Au clic : capture la largeur du conteneur du titre, puis pour chaque
-  `.char` dans l'ordre du DOM — position (`getBoundingClientRect()`),
-  style calculé (`font-family`, `font-style`, tous les axes de
-  `font-variation-settings`, `text-transform`) — et convertit `.char.textContent`
-  selon le `text-transform` réellement appliqué (uppercase / lowercase /
-  capitalize, ce dernier basé sur le premier `.char` de chaque `.word`)
-  avant de demander le tracé du bon caractère.
+- Au clic : pour chaque `.char` dans l'ordre du DOM — position
+  (`getBoundingClientRect()`), style calculé (`font-family`, `font-style`,
+  tous les axes de `font-variation-settings`, `text-transform`) — et
+  convertit `.char.textContent` selon le `text-transform` réellement
+  appliqué (uppercase / lowercase / capitalize, ce dernier basé sur le
+  premier `.char` de chaque `.word`) avant de demander le tracé du bon
+  caractère. **Les dimensions du canevas sont mesurées à partir de
+  l'étendue réelle de ces `.char`** (min/max de leurs `getBoundingClientRect()`),
+  pas depuis `titleEl.getBoundingClientRect()` : certains titres du thème
+  ont un `max-height` plus petit que leur contenu une fois retourné à la
+  ligne, avec `overflow: visible` (rien n'est coupé visuellement à
+  l'écran) — dans ce cas, la boîte du titre lui-même ne reflète que la
+  hauteur contrainte, pas l'étendue réelle du texte qui déborde ; s'y fier
+  tronquait les titres sur plusieurs lignes.
+- **L'échelle de rendu tient compte de la transformation CSS du titre**
+  (`getScaleFactor()`) : le thème anime certains titres en
+  `transform: scale()` au scroll (`initPageFull()` dans `main.js`), et
+  `getComputedStyle().fontSize` ne reflète jamais cette transformation,
+  contrairement à `getBoundingClientRect()` — utiliser `font-size` seul
+  rendait les glyphes trop grands par rapport à leur espacement mesuré, un
+  écart qui s'accumulait lettre après lettre et débordait du canevas, en
+  bas et à droite (fin de ligne) surtout. Le facteur d'échelle est lu
+  directement depuis la matrice `transform` calculée du titre (`DOMMatrix`),
+  **pas déduit** en comparant la largeur mesurée d'un `.char` à son avance
+  de glyphe HarfBuzz — une première version faisait ça, mais le thème pose
+  aussi `letter-spacing: -0.1em` sur chaque lettre, inclus dans la largeur
+  mesurée, ce qui faussait le calcul sur tous les caractères (pas
+  seulement sous transformation active), jusqu'à rendre certaines lettres
+  invisibles.
 - Assemble le SVG (fond transparent, remplissage noir uniquement — décision
   volontaire, pas configurable) et déclenche le téléchargement (`Blob` +
-  `<a download>`). Une marge égale à 30 % de la plus grande taille de police
+  `<a download>`). Une marge égale à 30 % de la plus grande taille de
+  police *effective* (issue du point précédent, pas de `font-size` brut)
   du titre (`ITALIC_OVERFLOW_MARGIN_RATIO`) est ajoutée tout autour du
   canevas : les lettres italiques débordent de leur boîte d'avance nominale
   (surtout en haut des hampes), et `getBoundingClientRect()` du titre ne
   tient pas compte de ce débordement — sans cette marge, un cadrage au plus
   juste coupe parfois ces lettres.
 - Pour le PNG : rasterise le SVG assemblé via un `<canvas>` à ×4 la taille
-  affichée (`PNG_SCALE`), puis `canvas.toBlob('image/png')`.
+  affichée (`PNG_SCALE`), puis `canvas.toBlob('image/png')`. Cette échelle
+  est réduite (jamais augmentée) pour qu'aucune dimension du canevas ne
+  dépasse `MAX_CANVAS_DIMENSION` (3000px, largement suffisant pour un usage
+  print réel — environ 25cm à 300 DPI). Nécessaire pour un titre long sur
+  plusieurs lignes en police énorme (12em) : ×4 la taille CSS affichée n'a
+  de sens que pour un texte court comme le logo — pour un long titre, la
+  taille "à l'écran" est déjà immense, donc ×4 produisait des fichiers
+  démesurés (et pouvait dépasser la taille de `<canvas>` que le navigateur
+  autorise).
 
 ### `js/harfbuzz-export.js`