Jaga akurasi kelompok baris SplitText dengan membangunnya ulang saat tata letak teks berubah. Gunakan pemisahan otomatis untuk pemicu yang didukung, tambahkan pembangunan ulang eksplisit untuk perubahan tipografi, dan bandingkan hasilnya dengan teks browser yang tidak dipisah di pratinjau desktop Mac Anda.

Panduan ini ditujukan bagi seseorang yang mengedit halaman browser dengan GSAP SplitText dan judul fluid. Tujuannya adalah menjaga agar setiap pembungkus baris yang dihasilkan selaras dengan kata-kata yang saat ini berada pada baris visual tersebut, termasuk ketika lebar judul tetap sementara ukuran font berubah.

Mengapa tipografi fluid dapat membuat kelompok baris tertinggal?

Pembungkus baris yang dihasilkan mencakup kelompok kata tertentu. Setelah ruang yang tersedia atau tipografi berubah, pengelompokan itu mungkin perlu dibangun ulang. GSAP mendokumentasikan autoSplit: true untuk pemuatan font yang selesai dan perubahan lebar ketika baris disertakan dalam pemisahan. Pemicu yang didokumentasikan tersebut tidak berarti tersedia pengamat umum untuk setiap perubahan tipografi. Dokumentasi SplitText

Bayangkan sebuah judul dengan font-size: clamp(2rem, 4vw, 4rem) di dalam kontainer yang dibatasi hingga 42rem. MDN mendefinisikan clamp() sebagai nilai pilihan yang dibatasi oleh nilai minimum dan maksimum. Dalam kasus ini, ukuran font pilihan mengikuti lebar viewport bahkan setelah kontainer mencapai batasnya. Fungsi CSS clamp()

Perhitungan berikut menggunakan ukuran font root ilustratif sebesar 16 piksel CSS dan mengasumsikan ruang yang tersedia cukup agar kontainer mencapai batasnya. Ini adalah dimensi hasil perhitungan, bukan hasil pengukuran browser atau prediksi jumlah baris.

Lebar viewport Lebar kontainer yang dibatasi Ukuran font hasil perhitungan
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

Lebar kontainer tetap sama sementara huruf membesar. Kesimpulan praktisnya, pemantauan lebar saja tidak mencakup kasus ini. Perlakukan perubahan ukuran font terhitung sebagai alasan lain untuk membangun ulang, lalu periksa penempatan kata yang dihasilkan.

Definisikan akurasi berdasarkan hasil render browser yang tidak dipisah pada dimensi dan gaya yang sama. Jangan mensyaratkan judul mempertahankan jumlah baris awalnya: tata letak fluid boleh menghasilkan baris yang berbeda.

Buat referensi yang tidak dipisah sebelum mengubah animasi

Buat dua salinan judul sintetis pendek dalam pratinjau lokal Anda. Beri keduanya lebar, font, ukuran, ketebalan, spasi, dan aturan pembungkusan yang sama. Biarkan salinan pertama apa adanya dan terapkan SplitText pada salinan kedua. Perbandingan sementara ini membuat pengelompokan yang sudah usang terlihat tanpa mengasumsikan tempat suatu kata seharusnya berpindah baris.

Mulailah dengan spasi putih dan pembungkusan biasa. Spesifikasi CSS Text W3C menjelaskan cara white-space mengatur penggabungan spasi putih dan pembungkusan lunak; spesifikasi itu juga menetapkan aturan pemenggalan baris dan spasi yang terpisah. Pembangunan ulang harus mempertahankan aturan yang diinginkan, bukan menggantinya dengan pemisah baris yang disisipkan secara manual. CSS Text Module Level 3

Untuk halaman yang menggunakan font web, tunggu document.fonts.ready sebelum pemisahan pertama. MDN mendokumentasikan bahwa promise ini terpenuhi setelah pemuatan font terkait dan operasi tata letak selesai. Ini menetapkan titik pengukuran awal; ini tidak membekukan perubahan tata letak berikutnya. FontFaceSet: properti ready

Periksa juga font yang benar-benar digunakan di browser. MDN membedakan font yang digunakan dari semua font yang dideklarasikan: misalnya, font opsional mungkin tidak digunakan jika melewatkan jendela pemuatannya. Menunggu kesiapan tidak boleh ditafsirkan sebagai bukti bahwa setiap font yang dideklarasikan menjadi font yang dirender. Document: properti fonts

Terapkan pemisahan otomatis plus pemeriksaan ukuran fluid eksplisit

Modul browser lengkap berikut membuat referensi yang tidak dipisah, salinan animasi, dan tombol Toggle spacing. Gunakan halaman pratinjau sementara dalam proyek JavaScript yang sudah ada, dengan bundler yang menyelesaikan impor npm, mendukung await tingkat atas, dan menjalankan entri browser setelah body dokumen tersedia. Pastikan Node.js dan npm terpasang di Mac Anda.

Pasang GSAP dari direktori proyek dengan perintah berikut. Gunakan GSAP 3.13 atau versi lebih baru untuk alur kerja callback ini. Dokumentasi instalasi GSAP menjelaskan pemasangan npm dan pendaftaran plugin secara eksplisit. Instalasi

npm install gsap

Ganti modul entri browser pratinjau sementara dengan kode ini. Inisialisasi mengikuti pola SplitText.create() yang didokumentasikan. Efek fade menggunakan gsap.from() untuk menganimasikan opasitas dari nol hingga tampilan yang sudah ada. 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();
});

Animasi dibuat di dalam onSplit() dan dikembalikan agar SplitText dapat membersihkannya dan menyinkronkannya di setiap pembangunan ulang. GSAP mendokumentasikan alur kerja callback ini pada versi 3.13 dan yang lebih baru. Dokumentasi SplitText

Penangan pengubahan ukuran yang ditambahkan hanya memeriksa ukuran font terhitung dan meminta pembangunan ulang setelah jeda pengubahan ukuran. Penundaan 150 milidetik adalah pilihan implementasi ilustratif. Contoh ini bertujuan menghasilkan kelompok yang akurat setelah pengubahan ukuran selesai; contoh ini tidak menjanjikan pengelompokan yang benar pada setiap bingkai perantara saat ukuran berubah.

Tombol spasi menunjukkan pemicu eksplisit kedua. Tombol ini mengubah kedua salinan, lalu memanggil split.split(). GSAP mendokumentasikan bahwa metode ini terlebih dahulu mengembalikan pemisahan yang ada jika diperlukan. Perubahan lebar dan ukuran font juga dapat memicu permintaan pembangunan ulang yang tumpang tindih dalam contoh kecil ini; gabungkan pemicunya jika pembuatan profil menunjukkan pekerjaan yang tidak perlu pada halaman yang lebih besar. split()

Modul ini lolos pemeriksaan sintaks JavaScript, dan perhitungan dimensi ilustratif telah dijalankan. Tata letak dan animasi browser tidak dijalankan di sini; selesaikan pemeriksaan visual di bawah ini dalam pratinjau lokal Anda.

Pilih pemicu pembangunan ulang berdasarkan perubahan tata letak

Contoh ini memantau satu ekspresi ukuran font fluid. Saat menyesuaikannya, identifikasi kode atau peristiwa tata letak yang mengubah teks, lalu tempatkan pembangunan ulang pada titik tersebut. Jangan menganggap contoh ini mendeteksi perubahan kelas yang tidak terkait, tipografi yang dikendalikan kontainer, atau properti font yang terus dianimasikan.

Perubahan pada halaman Anda Penanganan yang disarankan
Lebar elemen teks Aktifkan perilaku pemisahan otomatis yang didokumentasikan dan verifikasi hasilnya.
Ukuran font yang mengikuti viewport pada lebar teks tetap Bandingkan ukuran terhitung setelah pengubahan ukuran, lalu bangun ulang saat nilainya berubah.
Kontrol mengubah jarak antarhuruf, ketebalan, atau pengaturan font Minta pembangunan ulang setelah kontrol menerapkan gaya baru.
Tipografi bergantung pada kontainer di sekelilingnya Amati kontainer yang mengendalikan ukuran tersebut dan periksa tipografi terhitung yang relevan.
Komponen menjadi terlihat setelah disembunyikan Inisialisasi atau bangun ulang setelah komponen memiliki dimensi render yang diinginkan.

Untuk tata letak yang dikendalikan kontainer, ResizeObserver melaporkan perubahan ukuran elemen secara terpisah dari pengubahan ukuran viewport. Amati kontainer yang menyediakan masukan ukuran. Pengamat pada kotak teks saja tidak dapat dianggap sebagai pemberitahuan untuk setiap perubahan gaya terhitung. ResizeObserver

Hindari pembangunan ulang tanpa pandang bulu pada setiap perubahan tinggi yang diamati. Pembangunan ulang itu sendiri dapat memengaruhi tata letak. MDN mendokumentasikan siklus resize observer dan menjelaskan bahwa menghindari loop umpan balik memerlukan pengendalian dependensi; menunda pekerjaan ke bingkai lain tidak menghilangkan siklus tak berujung yang mendasarinya. Bandingkan masukan yang relevan sebelum meminta pembangunan ulang lagi. Kesalahan observasi ResizeObserver

Jika teks judul berubah, kembalikan pemisahan lama sebelum mengganti konten, lalu inisialisasi instance baru dari teks sumber yang baru. GSAP mendokumentasikan bahwa revert() memulihkan konten asli sebelum pemisahan. Mengedit pembungkus yang dihasilkan lalu mengembalikannya berisiko membuang hasil edit tersebut. revert()

Verifikasi pembungkusan tanpa mengubah pembentukan teks browser

Di browser Mac Anda, buka pratinjau lokal dan ubah ukuran jendela secara perlahan, lalu lepaskan. Setelah pembangunan ulang dan efek fade selesai, bandingkan kata terakhir pada setiap baris di kedua salinan. Ulangi saat kontainer dibatasi dan saat lebarnya cukup sempit untuk menyusut. Klik Toggle spacing pada setiap ukuran.

Gunakan urutan diagnosis berikut saat kedua salinan tidak cocok:

  1. Pastikan kedua salinan memiliki lebar tersedia dan tipografi terhitung yang sama.
  2. Bangun ulang pada ukuran saat ini. Jika ketidakcocokan teratasi, cari tahu pemicu yang terlewat.
  3. Jika ketidakcocokan masih ada, hapus gaya dari pembungkus baris yang dihasilkan lalu uji lagi.
  4. Pulihkan teks yang tidak dipisah dan verifikasi bahwa CSS dasarnya menghasilkan pembungkusan yang diinginkan.
  5. Ubah satu masukan tata letak pada satu waktu hingga perbedaannya dapat direproduksi.

Pertahankan pembentukan karakter dalam mesin teks browser. W3C menetapkan keadaan ketika pembentukan harus berlanjut melewati batas inline dan keadaan ketika pembentukan harus terputus, termasuk saat memisahkan padding, border, atau margin inline. Artinya, gaya pembungkus dapat memengaruhi hal yang sedang diukur. Hindari menambahkan spasi di antara kotak karakter satu per satu hanya untuk mereproduksi tangkapan layar sebelumnya. Pembentukan Teks di Seluruh Batas Elemen

Jangan menghitung baris visual dengan memisahkan innerText pada karakter baris baru. WHATWG mendefinisikan innerText sebagai teks yang dirender dengan aturan pengumpulan untuk teks, pemisah eksplisit, dan batas struktural; properti ini tidak menyediakan larik berisi baris visual yang dibungkus secara lunak. Jadikan hasil render browser yang tidak dipisah sebagai referensi perbandingan. Properti innerText dan outerText

Patuhi batasan yang didokumentasikan pustaka: GSAP menyarankan agar tidak menggunakan text-wrap: balance bersama pemisahan dan menyatakan bahwa SplitText tidak dirancang untuk simpul teks SVG. Untuk judul seimbang, biarkan teks tetap tidak dipisah dan animasikan seluruh elemennya; untuk pembungkus baris, gunakan pembungkusan biasa pada elemen teks HTML. Tips dan batasan SplitText

Selesaikan ketika salinan yang dipisah mengikuti salinan yang tidak dipisah pada perubahan lebar dan tipografi yang sebenarnya Anda gunakan. Tempatkan pembangunan ulang eksplisit di dekat perubahan yang memerlukannya, pertahankan referensi saat mendiagnosis, lalu hapus duplikat sementara dan garis tepi baris sebelum mengintegrasikan judul ke halaman akhir.

Sumber