Håll SplitText-radgrupper korrekta genom att bygga om dem när textlayouten ändras. Använd automatisk uppdelning för de utlösare som stöds, lägg till uttryckliga ombyggnader vid typografiska ändringar och jämför resultatet med webbläsarens text utan uppdelning i förhandsvisningen på din Mac.

Den här guiden är avsedd för dig som redigerar en webbsida med GSAP SplitText och en responsiv rubrik. Målet är att hålla varje genererad radomslutning i linje med orden som för närvarande hör till den visuella raden, även när rubrikens bredd är oförändrad medan teckenstorleken ändras.

Varför kan responsiv typografi lämna radgrupperna inaktuella?

En genererad radomslutning omsluter en viss grupp ord. När det tillgängliga utrymmet eller typografin ändras kan grupperingen behöva byggas om. GSAP dokumenterar autoSplit: true för när typsnittsladdningen slutförs och när bredden ändras, om rader ingår i uppdelningen. Dessa dokumenterade utlösare innebär inte att det finns en generell övervakare för varje typografisk ändring. SplitText-dokumentation

Tänk dig en rubrik med font-size: clamp(2rem, 4vw, 4rem) i en behållare vars bredd är begränsad till 42rem. MDN definierar clamp() som ett föredraget värde som begränsas av ett minimi- och maxvärde. Här följer den föredragna teckenstorleken visningsområdets bredd även efter att behållaren nått sin maxbredd. CSS-funktionen clamp()

Beräkningen nedan utgår från en illustrativ rotteckenstorlek på 16 CSS-pixlar och förutsätter att det finns tillräckligt med utrymme för att behållaren ska nå sin maxbredd. Det här är beräknade mått, inte uppmätta webbläsarresultat eller förutsägelser av radantal.

Visningsområdets bredd Begränsad behållarbredd Beräknad teckenstorlek
900 CSS px 672 CSS px 36 CSS px
1200 CSS px 672 CSS px 48 CSS px
1600 CSS px 672 CSS px 64 CSS px

Behållaren behåller samma bredd medan bokstäverna blir större. Den praktiska slutsatsen är att övervakning av bredden inte räcker i det här fallet. Behandla ändringen av beräknad teckenstorlek som ytterligare ett skäl att bygga om och kontrollera sedan ordplaceringen.

Definiera korrekthet utifrån webbläsarens återgivning utan uppdelning vid samma mått och med samma stilar. Kräv inte att rubriken ska behålla sitt ursprungliga radantal: en responsiv layout får skapa olika rader.

Skapa en referens utan uppdelning innan du ändrar animationen

Skapa två kopior av en kort, syntetisk rubrik i din lokala förhandsvisning. Ge dem samma bredd, typsnitt, storlek, vikt, avstånd och radbrytningsregler. Låt den första vara orörd och använd SplitText på den andra. Den här tillfälliga jämförelsen gör en inaktuell gruppering synlig utan att förutsätta var ett visst ord ska radbrytas.

Börja med vanlig blankteckenhantering och radbrytning. W3C:s CSS Text-specifikation definierar hur white-space styr hopslagning av blanksteg och mjuk radbrytning. Den definierar även separata regler för radbrytning och avstånd. En ombyggnad bör bevara de avsedda reglerna i stället för att ersätta dem med manuellt infogade radbrytningar. CSS Text Module Level 3

Vänta på document.fonts.ready innan du gör den första uppdelningen på en sida som använder webbtypsnitt. MDN dokumenterar att det här löftet löses när den relevanta typsnittsladdningen och layoutåtgärderna har slutförts. Det ger en utgångspunkt för mätningen, men låser inte senare layoutändringar. FontFaceSet: ready-egenskapen

Kontrollera också vilket typsnitt som faktiskt används i webbläsaren. MDN skiljer mellan använda typsnitt och alla deklarerade typsnitt: ett valfritt typsnitt kanske till exempel inte används om det missar sitt laddningsfönster. Att vänta tills laddningen är klar ska inte tolkas som ett bevis på att varje deklarerat typsnitt blev det återgivna typsnittet. Document: fonts-egenskapen

Implementera automatisk uppdelning och en uttrycklig kontroll av responsiv storlek

Den här kompletta webbläsarmodulen skapar en referens utan uppdelning, en animerad kopia och en knapp med texten Toggle spacing. Använd en tillfällig förhandsvisningssida i ett befintligt JavaScript-projekt vars paketerare kan hitta npm-importer, stöder await på toppnivå och kör webbläsarens startfil efter att dokumentets body-element har skapats. Ha Node.js och npm installerade på din Mac.

Installera GSAP från projektkatalogen med följande kommando. Använd GSAP 3.13 eller senare för det här återanropsflödet. GSAP:s installationsdokumentation beskriver npm-installation och uttrycklig pluginregistrering. Installation

npm install gsap

Ersätt den tillfälliga förhandsvisningens startmodul för webbläsaren med den här koden. Initieringen följer det dokumenterade mönstret SplitText.create(). Toningseffekten använder gsap.from() för att animera från noll opacitet till det befintliga utseendet. 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();
});

Animationen skapas inuti onSplit() och returneras så att SplitText kan rensa upp den och synkronisera den vid ombyggnader. GSAP dokumenterar det här återanropsflödet i version 3.13 och senare. SplitText-dokumentation

Den tillagda storlekshanteraren kontrollerar bara den beräknade teckenstorleken och begär en ombyggnad när storleksändringen har pausat. Fördröjningen på 150 millisekunder är ett illustrativt implementeringsval. Exemplet strävar efter korrekta grupper när storleksändringen har stabiliserats; det lovar inte korrekt gruppering under varje mellanliggande bildruta vid storleksändringen.

Knappen för avstånd visar en andra uttrycklig utlösare. Den ändrar båda kopiorna och anropar sedan split.split(). GSAP dokumenterar att den här metoden först återställer den befintliga uppdelningen när det behövs. I det här lilla exemplet kan en breddändring och en ändring av teckenstorleken också leda till överlappande ombyggnadsbegäranden. Samla dem om profilering visar att det utförs onödigt arbete på en större sida. split()

Modulen klarade en JavaScript-syntaxkontroll och de illustrativa måttberäkningarna kördes. Webbläsarlayout och animation kördes inte här; gör de visuella kontrollerna nedan i din lokala förhandsvisning.

Välj utlösare för ombyggnad utifrån vad som ändras i layouten

Exemplet övervakar ett uttryck för responsiv teckenstorlek. När du anpassar det ska du identifiera koden eller layoutåtgärden som ändrar texten och lägga ombyggnaden där. Förutsätt inte att exemplet upptäcker orelaterade klassändringar, behållarstyrd typografi eller kontinuerligt animerade teckensnittsegenskaper.

Vad som ändras på sidan Föreslagen hantering
Textens bredd Aktivera den dokumenterade automatiska uppdelningen och kontrollera resultatet.
Visningsområdesstyrd teckenstorlek vid en fast textbredd Jämför den beräknade storleken efter storleksändringen och bygg sedan om när den ändras.
En kontroll ändrar teckenavstånd, vikt eller typsnittsinställningar Begär en ombyggnad när kontrollen har tillämpat de nya stilarna.
Typografin beror på en omgivande behållare Observera behållaren som styr dimensioneringen och kontrollera relevant beräknad typografi.
Komponenten blir synlig efter att ha varit dold Initiera eller bygg om när den har sina avsedda återgivna mått.

För behållarstyrda layouter rapporterar ResizeObserver ändringar i elementstorlek oberoende av ändringar i visningsområdets storlek. Observera behållaren som tillhandahåller dimensioneringsunderlaget. En observerare på själva textrutan kan inte betraktas som en avisering för varje ändring av beräknad stil. ResizeObserver

Undvik att bygga om urskillningslöst vid varje observerad höjdändring. Ombyggnad kan i sig påverka layouten. MDN dokumenterar cykler i storleksobserverare och förklarar att en återkopplingsloop måste hanteras genom att styra beroendet. Att skjuta upp arbetet till en annan bildruta bryter inte en underliggande oändlig cykel. Jämför relevanta indata innan du begär ännu en ombyggnad. ResizeObserver-fel vid observation

Om rubriktexten ändras ska du återställa den gamla uppdelningen innan du ersätter innehållet och sedan initiera en ny instans från den nya källtexten. GSAP dokumenterar att revert() återställer det ursprungliga innehållet före uppdelningen. Om du redigerar genererade omslutningar och sedan återställer kan redigeringarna gå förlorade. revert()

Kontrollera radbrytning utan att ändra webbläsarens textformning

Öppna den lokala förhandsvisningen i webbläsaren på din Mac och ändra fönsterstorleken långsamt; släpp sedan. Jämför det sista ordet på varje rad i båda kopiorna när ombyggnaden och toningen har avslutats. Upprepa när behållaren nått sin maxbredd och när den är tillräckligt smal för att krympa. Klicka på Toggle spacing vid varje storlek.

Använd den här felsökningssekvensen om kopiorna inte stämmer överens:

  1. Kontrollera att båda kopiorna har samma tillgängliga bredd och beräknade typografi.
  2. Bygg om vid den aktuella storleken. Om det löser skillnaden undersöker du vilken utlösare som saknas.
  3. Om skillnaden kvarstår tar du bort stilar från genererade radomslutningar och testar igen.
  4. Återställ texten utan uppdelning och kontrollera att den underliggande CSS:en ger avsedd radbrytning.
  5. Ändra en layoutindata i taget tills skillnaden går att återskapa.

Låt webbläsarens textmotor sköta teckenformningen. W3C anger under vilka omständigheter formningen måste fortsätta över gränser mellan inline-element och när den måste brytas, bland annat vid separerande utfyllnad, ramar eller marginaler på inline-element. Det innebär att stilar på omslutningar kan påverka det som mäts. Lägg inte till avstånd mellan enskilda teckenrutor bara för att återskapa en tidigare skärmbild. Formning över elementgränser

Räkna inte visuella rader genom att dela innerText vid nyradstecken. WHATWG definierar innerText som återgiven text med insamlingsregler för text, explicita radbrytningar och strukturella gränser. Den tillhandahåller inte en lista med mjukt radbrutna visuella rader. Behåll webbläsarens återgivning utan uppdelning som jämförelsereferens. Egenskaperna innerText och outerText

Följ bibliotekets dokumenterade begränsningar: GSAP avråder från att använda text-wrap: balance tillsammans med uppdelning och anger att SplitText inte är utformat för SVG-textnoder. För balanserade rubriker låter du texten vara odelad och animerar hela elementet. För radomslutningar använder du vanlig radbrytning på ett HTML-textelement. SplitText: tips och begränsningar

Du är klar när den uppdelade kopian följer kopian utan uppdelning genom de faktiska ändringarna av bredd och typografi. Placera uttryckliga ombyggnader nära ändringarna som kräver dem, behåll referensen under felsökningen och ta bort den tillfälliga dubbletten och radkonturerna innan du integrerar rubriken på den färdiga sidan.

Källor