Gardez les groupes de lignes de SplitText exacts en les reconstruisant lorsque la mise en page du texte change. Utilisez le découpage automatique pour les déclencheurs pris en charge, ajoutez des reconstructions explicites pour les changements typographiques et comparez le résultat au texte du navigateur non découpé dans l’aperçu sur votre Mac.

Ce guide s’adresse à une personne qui modifie une page Web avec GSAP SplitText et un titre à typographie fluide. L’objectif est de faire en sorte que chaque conteneur de ligne généré corresponde aux mots qui appartiennent actuellement à cette ligne visuelle, y compris lorsque la largeur du titre reste fixe tandis que sa taille de police change.

Pourquoi la typographie fluide peut-elle laisser les groupes de lignes en décalage ?

Un conteneur de ligne généré englobe un groupe de mots précis. Lorsque l’espace disponible ou la typographie change, il peut être nécessaire de reconstruire ce groupe. GSAP documente autoSplit: true pour la fin du chargement des polices et les changements de largeur lorsque les lignes sont incluses dans le découpage. Ces déclencheurs documentés ne constituent pas un mécanisme général de surveillance de chaque changement typographique. Documentation SplitText

Prenons un titre contenant font-size: clamp(2rem, 4vw, 4rem) dans un conteneur limité à 42rem. MDN définit clamp() comme une valeur préférée encadrée par un minimum et un maximum. Ici, la taille de police préférée suit la largeur de la fenêtre d’affichage même après que le conteneur a atteint sa limite. Fonction CSS clamp()

Le calcul suivant utilise une taille de police racine illustrative de 16 pixels CSS et suppose que l’espace disponible est suffisant pour que le conteneur atteigne sa limite. Il s’agit de dimensions calculées, et non de résultats mesurés dans un navigateur ou de nombres de lignes prédits.

Largeur de la fenêtre d’affichage Largeur du conteneur limité Taille de police calculée
900 px CSS 672 px CSS 36 px CSS
1200 px CSS 672 px CSS 48 px CSS
1600 px CSS 672 px CSS 64 px CSS

Le conteneur conserve la même largeur tandis que les lettres grandissent. On peut en déduire que la surveillance de la largeur seule ne couvre pas ce cas. Considérez le changement de taille de police calculée comme une raison supplémentaire de reconstruire les groupes, puis vérifiez le placement des mots obtenu.

Définissez l’exactitude par rapport au rendu non découpé du navigateur aux mêmes dimensions et avec les mêmes styles. N’exigez pas que le titre conserve son nombre initial de lignes : une mise en page fluide peut produire des lignes différentes.

Établir une référence non découpée avant de modifier l’animation

Créez deux copies d’un court titre synthétique dans votre aperçu local. Donnez-leur la même largeur, la même police, la même taille, la même graisse, le même espacement et les mêmes règles de retour à la ligne. Laissez la première intacte et appliquez SplitText à la seconde. Cette comparaison temporaire rend visible un groupement périmé sans supposer où un mot donné devrait passer à la ligne.

Commencez par les espaces ordinaires et le retour à la ligne. La spécification CSS Text du W3C définit la façon dont white-space contrôle la réduction des espaces et les retours à la ligne souples ; elle définit également des règles distinctes pour les sauts de ligne et l’espacement. Une reconstruction doit préserver les règles voulues au lieu de les remplacer par des sauts de ligne insérés manuellement. CSS Text Module Level 3

Pour une page qui utilise des polices Web, attendez document.fonts.ready avant le premier découpage. MDN indique que cette promesse est résolue une fois les opérations pertinentes de chargement des polices et de mise en page terminées. Cela établit un point de mesure initial ; cela ne fige pas les changements ultérieurs de mise en page. FontFaceSet : propriété ready

Vérifiez également la police réellement utilisée dans le navigateur. MDN distingue les polices utilisées de toutes les polices déclarées : une police facultative, par exemple, peut ne pas être utilisée si elle manque sa fenêtre de chargement. Il ne faut pas interpréter l’attente de l’état prêt comme la preuve que chaque police déclarée est devenue la police rendue. Document : propriété fonts

Mettre en œuvre le découpage automatique et une vérification explicite de la taille fluide

Le module complet pour navigateur ci-dessous crée une référence non découpée, une copie animée et un bouton Toggle spacing. Utilisez une page d’aperçu jetable dans un projet JavaScript existant dont le bundler résout les imports npm, prend en charge await de premier niveau et exécute son point d’entrée navigateur après la création du corps du document. Node.js et npm doivent être installés sur votre Mac.

Installez GSAP depuis le répertoire du projet à l’aide de la commande suivante. Utilisez GSAP 3.13 ou une version ultérieure pour ce flux de travail avec rappel. La documentation d’installation de GSAP couvre l’installation npm et l’enregistrement explicite des plug-ins. Installation

npm install gsap

Remplacez le module point d’entrée du navigateur de l’aperçu jetable par ce code. L’initialisation suit le modèle documenté SplitText.create(). Le fondu utilise gsap.from() pour animer l’opacité de zéro jusqu’à l’apparence existante. SplitText.create(), gsap.from()

import { gsap } from 'gsap';
import { SplitText } from 'gsap/SplitText';

gsap.registerPlugin(SplitText);

const style = document.createElement('style');
style.textContent = `
.flow-demo {
  width: min(100%, 42rem);
  font-family: system-ui, sans-serif;
}
.flow-demo h2 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 1rem 0;
  white-space: normal;
  text-wrap: wrap;
}
.flow-line { outline: 1px solid #aaa; }
`;
document.head.append(style);

const host = document.createElement('section');
host.className = 'flow-demo';
const reference = document.createElement('h2');
reference.textContent =
  'Panel Alpha holds a series of soft shapes beside Panel Beta.';
const target = reference.cloneNode(true);
const button = document.createElement('button');
button.type = 'button';
button.textContent = 'Toggle spacing';
host.append(reference, target, button);
document.body.append(host);

await document.fonts.ready;

const split = SplitText.create(target, {
  type: 'lines',
  linesClass: 'flow-line',
  autoSplit: true,
  onSplit(self) {
    return gsap.from(self.lines, {
      opacity: 0,
      duration: 0.3,
      stagger: 0.04
    });
  }
});

let timer;
let fontSize = getComputedStyle(target).fontSize;

function checkFluidSize() {
  clearTimeout(timer);
  timer = setTimeout(() => {
    const next = getComputedStyle(target).fontSize;
    if (next !== fontSize) {
      fontSize = next;
      split.split();
    }
  }, 150);
}
window.addEventListener('resize', checkFluidSize);

let spaced = false;
button.addEventListener('click', () => {
  spaced = !spaced;
  reference.style.letterSpacing = target.style.letterSpacing =
    spaced ? '0.06em' : 'normal';
  split.split();
});

L’animation est créée dans onSplit() et renvoyée pour que SplitText puisse la nettoyer et la synchroniser lors des reconstructions. GSAP documente ce flux de travail avec rappel dans la version 3.13 et les versions ultérieures. Documentation SplitText

Le gestionnaire de redimensionnement ajouté vérifie uniquement la taille de police calculée et demande une reconstruction après une pause du redimensionnement. Le délai de 150 millisecondes est un choix d’implémentation illustratif. Cet exemple vise à obtenir des groupes exacts une fois le redimensionnement terminé ; il ne garantit pas un groupement correct à chaque image intermédiaire du redimensionnement.

Le bouton d’espacement illustre un deuxième déclencheur explicite. Il modifie les deux copies, puis appelle split.split(). GSAP indique que cette méthode rétablit d’abord le découpage existant si nécessaire. Dans ce petit exemple, un changement de largeur et un changement de taille de police peuvent aussi entraîner des demandes de reconstruction qui se chevauchent ; regroupez-les si le profilage révèle du travail inutile sur une page plus importante. split()

Le module a passé une vérification de syntaxe JavaScript et les calculs dimensionnels illustratifs ont été exécutés. Le rendu et l’animation dans le navigateur n’ont pas été exécutés ici ; effectuez les vérifications visuelles ci-dessous dans votre aperçu local.

Choisir les déclencheurs de reconstruction selon les changements de mise en page

L’exemple surveille une expression de taille de police fluide. Pour l’adapter, repérez le code ou l’événement de mise en page qui modifie le texte et placez la reconstruction à ce niveau. Ne supposez pas que l’exemple détecte les changements de classe sans rapport, la typographie déterminée par un conteneur ou les propriétés de police animées en continu.

Changement dans votre page Traitement suggéré
Largeur de l’élément de texte Activez le comportement de découpage automatique documenté et vérifiez le résultat.
Taille de police dépendant de la fenêtre d’affichage avec largeur de texte fixe Comparez la taille calculée après le redimensionnement, puis reconstruisez lorsqu’elle change.
Un contrôle modifie l’approche, la graisse ou les paramètres de police Demandez une reconstruction après l’application des nouveaux styles par le contrôle.
La typographie dépend d’un conteneur environnant Observez le conteneur qui contrôle le dimensionnement et vérifiez la typographie calculée pertinente.
Le composant devient visible après avoir été masqué Initialisez-le ou reconstruisez-le une fois qu’il a les dimensions de rendu prévues.

Pour les mises en page dépendant d’un conteneur, ResizeObserver signale les changements de taille des éléments indépendamment du redimensionnement de la fenêtre d’affichage. Observez le conteneur qui fournit l’entrée de dimensionnement. On ne peut pas considérer qu’un observateur placé sur la boîte de texte signale chaque changement de style calculé. ResizeObserver

Évitez de reconstruire sans discernement à chaque changement de hauteur observé. La reconstruction peut elle-même affecter la mise en page. MDN documente les cycles de ResizeObserver et explique qu’éviter une boucle de rétroaction nécessite de maîtriser la dépendance ; différer le travail à une autre image ne supprime pas un cycle infini sous-jacent. Comparez les entrées pertinentes avant de demander une nouvelle reconstruction. Erreurs d’observation de ResizeObserver

Si le texte du titre change, rétablissez l’ancien découpage avant de remplacer le contenu, puis initialisez une nouvelle instance à partir du nouveau texte source. GSAP indique que revert() restaure le contenu d’origine d’avant le découpage. Modifier les conteneurs générés puis rétablir l’état risque de supprimer ces modifications. revert()

Vérifier les retours à la ligne sans modifier le façonnage du texte du navigateur

Dans votre navigateur sur Mac, ouvrez l’aperçu local et redimensionnez lentement la fenêtre, puis relâchez-la. Une fois la reconstruction et le fondu terminés, comparez le dernier mot de chaque ligne dans les deux copies. Répétez l’opération lorsque le conteneur est limité et lorsqu’il est assez étroit pour rétrécir. Cliquez sur Toggle spacing à chaque taille.

Suivez cette séquence de diagnostic en cas de divergence entre les copies :

  1. Vérifiez que les deux copies ont la même largeur disponible et la même typographie calculée.
  2. Reconstruisez à la taille actuelle. Si cela résout le décalage, recherchez le déclencheur manquant.
  3. Si le décalage persiste, supprimez les styles des conteneurs de ligne générés et refaites le test.
  4. Rétablissez le texte non découpé et vérifiez que le CSS sous-jacent produit les retours à la ligne voulus.
  5. Modifiez une seule entrée de mise en page à la fois jusqu’à pouvoir reproduire la différence.

Laissez le moteur de texte du navigateur gérer le façonnage des caractères. Le W3C spécifie les situations où le façonnage doit se poursuivre à travers les frontières d’éléments en ligne et celles où il doit s’interrompre, notamment lorsque des espacements internes, bordures ou marges séparent ces éléments. Cela signifie que le style des conteneurs peut modifier ce qui est mesuré. Évitez d’ajouter de l’espacement entre les boîtes de caractères individuelles pour reproduire simplement une capture d’écran antérieure. Façonnage aux frontières entre éléments

Ne comptez pas les lignes visuelles en découpant innerText aux caractères de nouvelle ligne. WHATWG définit innerText comme du texte rendu, assorti de règles de collecte pour le texte, les sauts explicites et les limites structurelles ; cette propriété ne fournit pas de tableau des lignes visuelles obtenues par retour à la ligne automatique. Conservez le rendu non découpé du navigateur comme référence de comparaison. Les propriétés innerText et outerText

Respectez les limites documentées de la bibliothèque : GSAP conseille d’éviter text-wrap: balance avec le découpage et indique que SplitText n’est pas conçu pour les nœuds de texte SVG. Pour les titres équilibrés, laissez le texte non découpé et animez l’élément entier ; pour les conteneurs de ligne, utilisez un retour à la ligne ordinaire sur un élément de texte HTML. Conseils et limites de SplitText

Terminez lorsque la copie découpée suit la copie non découpée malgré les changements réels de largeur et de typographie. Placez les reconstructions explicites près des changements qui les nécessitent, conservez la référence pendant le diagnostic et retirez le doublon temporaire ainsi que les contours de ligne avant d’intégrer le titre à la page finale.

Sources