Metin düzeni değiştiğinde satır gruplarını yeniden oluşturarak SplitText satırlarını doğru tutun. Desteklenen tetikleyiciler için otomatik bölmeyi kullanın, tipografi değişikliklerinde açıkça yeniden oluşturma ekleyin ve sonucu Mac masaüstü önizlemenizde bölünmemiş tarayıcı metniyle karşılaştırın.

Bu kılavuz, GSAP SplitText ve akışkan bir başlıkla tarayıcı sayfası düzenleyenler içindir. Amaç, başlığın genişliği sabit kalırken yazı tipi boyutu değiştiğinde de her oluşturulan satır sarmalayıcısının o görsel satırda yer alan sözcüklerle eşleşmesini sağlamaktır.

Akışkan tipografi satır gruplarını neden geride bırakabilir?

Oluşturulan bir satır sarmalayıcısı belirli bir sözcük grubunu çevreler. Kullanılabilir alan veya tipografi değiştikten sonra bu gruplandırmanın yeniden oluşturulması gerekebilir. GSAP, bölmeye satırlar da dahil edildiğinde yazı tipi yüklemesinin tamamlanması ve genişlik değişiklikleri için autoSplit: true seçeneğini belgeler. Belgelenen bu tetikleyiciler, her tipografi değişikliği için genel bir izleyici bulunduğu anlamına gelmez. SplitText belgeleri

font-size: clamp(2rem, 4vw, 4rem) değerini 42rem ile sınırlandırılmış bir kapsayıcı içinde kullanan bir başlığı ele alalım. MDN, clamp() değerini alt ve üst sınırlarla kısıtlanan tercih edilen bir değer olarak tanımlar. Burada, kapsayıcı üst sınıra ulaştıktan sonra bile tercih edilen yazı tipi boyutu görüntü alanının genişliğine göre değişir. clamp() CSS işlevi

Aşağıdaki hesaplamada örnek olarak 16 CSS piksel kök yazı tipi boyutu kullanılmış ve kapsayıcının üst sınırına ulaşması için yeterli alan bulunduğu varsayılmıştır. Bunlar hesaplanmış boyutlardır; tarayıcıda ölçülmüş sonuçlar veya tahmin edilmiş satır sayıları değildir.

Görüntü alanı genişliği Üst sınır uygulanmış kapsayıcı genişliği Hesaplanan yazı tipi boyutu
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

Harfler büyürken kapsayıcı aynı genişlikte kalır. Buradan, yalnızca genişliği izlemenin bu durumu kapsamadığı sonucu çıkar. Hesaplanan yazı tipi boyutundaki değişikliği yeniden oluşturma nedeni olarak ele alın ve ardından sözcüklerin yerleşimini kontrol edin.

Doğruluğu, aynı boyut ve stillerde tarayıcının bölünmemiş görünümüne göre tanımlayın. Başlığın ilk satır sayısını korumasını şart koşmayın: akışkan bir düzen farklı satırlar oluşturabilir.

Animasyonu değiştirmeden önce bölünmemiş bir referans oluşturun

Yerel önizlemenizde kısa ve yapay bir başlığın iki kopyasını oluşturun. İkisine de aynı genişliği, yazı tipini, boyutu, kalınlığı, harf aralığını ve satır kaydırma kurallarını uygulayın. İlk kopyaya dokunmayın, ikinciye SplitText uygulayın. Bu geçici karşılaştırma, belirli bir sözcüğün nerede satır değiştirmesi gerektiğini varsaymadan eski bir gruplandırmayı görünür kılar.

Normal boşluk karakterleri ve satır kaydırmayla başlayın. W3C CSS Text belirtimi, white-space özelliğinin boşlukların daraltılmasını ve yumuşak satır kaydırmayı nasıl denetlediğini tanımlar; ayrıca satır sonu ve boşluklandırma için ayrı kurallar da içerir. Yeniden oluşturma, bu kuralları elle eklenmiş satır sonlarıyla değiştirmek yerine amaçlanan kuralları korumalıdır. CSS Text Module Level 3

Web yazı tipleri kullanan bir sayfada ilk bölmeden önce document.fonts.ready değerini bekleyin. MDN, bu vaadin ilgili yazı tipi yükleme ve düzen işlemleri tamamlandıktan sonra çözüldüğünü belgeler. Bu, ilk ölçüm noktasını belirler; sonraki düzen değişikliklerini durdurmaz. FontFaceSet: ready özelliği

Tarayıcıda gerçekten kullanılan yazı tipini de kontrol edin. MDN, kullanılan yazı tiplerini tanımlı tüm yazı tiplerinden ayırır: örneğin isteğe bağlı bir yazı tipi, yükleme aralığını kaçırırsa kullanılmayabilir. Hazır olmayı beklemek, tanımlı tüm yazı tiplerinin oluşturulan yüz olarak kullanıldığını kanıtlamaz. Document: fonts özelliği

Otomatik bölmeyi ve açık akışkan boyut kontrolünü birlikte uygulayın

Aşağıdaki eksiksiz tarayıcı modülü, bölünmemiş bir referans, animasyonlu bir kopya ve bir Toggle spacing düğmesi oluşturur. npm içe aktarımlarını çözen, en üst düzey await kullanımını destekleyen ve tarayıcı giriş dosyasını belge gövdesi oluşturulduktan sonra çalıştıran bir derleyici içeren mevcut bir JavaScript projesinde geçici bir önizleme sayfası kullanın. Mac'inizde Node.js ve npm yüklü olsun.

Proje dizininden aşağıdaki komutla GSAP'ı yükleyin. Bu geri çağırım iş akışı için GSAP 3.13 veya üzerini kullanın. GSAP yükleme belgelerinde npm kurulumu ve eklentilerin açıkça kaydedilmesi anlatılır. Kurulum

npm install gsap

Geçici önizlemenin tarayıcı giriş modülünü bu kodla değiştirin. Başlatma, belgelenen SplitText.create() düzenini izler. Soluklaştırma, mevcut görünümden sıfır opaklığa geçiş yapmak için gsap.from() kullanır. 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();
});

Animasyon onSplit() içinde oluşturulur ve SplitText'in animasyonu temizleyip yeniden oluşturmalar arasında eşitleyebilmesi için geri döndürülür. GSAP bu geri çağırım iş akışını 3.13 ve sonraki sürümlerde belgeler. SplitText belgeleri

Eklenen yeniden boyutlandırma işleyicisi yalnızca hesaplanan yazı tipi boyutunu denetler ve yeniden boyutlandırma durakladıktan sonra yeniden oluşturma isteğinde bulunur. 150 milisaniyelik gecikme, örnek amaçlı bir uygulama tercihidir. Bu örnek, yeniden boyutlandırma durulduğunda doğru gruplar oluşturmayı amaçlar; her ara yeniden boyutlandırma karesinde doğru gruplandırma vadetmez.

Boşluk düğmesi ikinci bir açık tetikleyiciyi gösterir. Her iki kopyayı değiştirir ve ardından split.split() çağrısını yapar. GSAP, gerektiğinde bu yöntemin önce mevcut bölmeyi geri aldığını belgeler. Bu küçük örnekte genişlik ve yazı tipi boyutu değişikliği de örtüşen yeniden oluşturma isteklerine yol açabilir; daha büyük bir sayfada gereksiz iş olduğu profil çıkarmayla görülürse bu istekleri birleştirin. split()

Modül JavaScript sözdizimi denetiminden geçti ve örnek boyut hesaplamaları çalıştırıldı. Tarayıcı düzeni ve animasyonu burada çalıştırılmadı; aşağıdaki görsel denetimleri yerel önizlemenizde tamamlayın.

Yeniden oluşturma tetikleyicilerini düzeninizdeki değişikliklere göre seçin

Örnek, akışkan bir yazı tipi boyutu ifadesini izler. Uyarlarken metni değiştiren kodu veya düzen olayını belirleyin ve yeniden oluşturmayı bu noktada çalıştırın. Örneğin ilgisiz sınıf değişikliklerini, kapsayıcıya bağlı tipografiyi veya sürekli animasyonlu yazı tipi özelliklerini algıladığını varsaymayın.

Sayfanızda ne değişiyor Önerilen yaklaşım
Metin öğesinin genişliği Belgelenen otomatik bölme davranışını etkinleştirin ve sonucu doğrulayın.
Sabit metin genişliğinde görüntü alanına bağlı yazı tipi boyutu Yeniden boyutlandırmadan sonra hesaplanan boyutu karşılaştırın ve değiştiğinde yeniden oluşturun.
Bir denetim harf aralığını, kalınlığı veya yazı tipi ayarlarını değiştiriyor Denetim yeni stilleri uyguladıktan sonra yeniden oluşturma isteğinde bulunun.
Tipografi çevresindeki bir kapsayıcıya bağlı Boyutu belirleyen kapsayıcıyı izleyin ve ilgili hesaplanmış tipografiyi kontrol edin.
Bileşen gizliyken görünür hâle geliyor Bileşen amaçlanan oluşturulmuş boyutlarına ulaştığında başlatın veya yeniden oluşturun.

Kapsayıcıya bağlı düzenlerde ResizeObserver, öğe boyutu değişikliklerini görüntü alanının yeniden boyutlandırılmasından bağımsız olarak bildirir. Boyut girdisini sağlayan kapsayıcıyı izleyin. Yalnızca metin kutusundaki bir gözlemci, hesaplanan her stil değişikliği için bildirim olarak kabul edilemez. ResizeObserver

Gözlemlenen her yükseklik değişikliğinde gelişigüzel yeniden oluşturmaktan kaçının. Yeniden oluşturma da düzeni etkileyebilir. MDN, ResizeObserver döngülerini belgeler ve geri bildirim döngüsünü önlemek için bağımlılığın denetlenmesi gerektiğini açıklar; işi başka bir kareye ertelemek altta yatan sonsuz döngüyü ortadan kaldırmaz. Bir yeniden oluşturma daha istemeden önce ilgili girdileri karşılaştırın. ResizeObserver gözlem hataları

Başlık metni değişirse içeriği değiştirmeden önce eski bölmeyi geri alın, ardından yeni kaynak metinden yeni bir örnek başlatın. GSAP, revert() yönteminin bölme öncesindeki özgün içeriği geri yüklediğini belgeler. Oluşturulmuş sarmalayıcıları düzenleyip ardından geri almak bu düzenlemelerin kaybolmasına yol açabilir. revert()

Tarayıcı metin biçimlendirmesini değiştirmeden satır kaydırmayı doğrulayın

Mac tarayıcınızda yerel önizlemeyi açın, pencereyi yavaşça yeniden boyutlandırın ve ardından bırakın. Yeniden oluşturma ve soluklaştırma tamamlandıktan sonra iki kopyadaki her satırın son sözcüğünü karşılaştırın. Kapsayıcı üst sınırındayken ve daralıp küçülecek kadar azken bu işlemi tekrarlayın. Her boyutta Toggle spacing düğmesine tıklayın.

Kopyalar uyuşmadığında şu tanılama adımlarını izleyin:

  1. İki kopyanın kullanılabilir genişliğinin ve hesaplanmış tipografisinin aynı olduğunu doğrulayın.
  2. Geçerli boyutta yeniden oluşturun. Uyumsuzluk giderilirse eksik tetikleyiciyi araştırın.
  3. Uyumsuzluk sürüyorsa oluşturulmuş satır sarmalayıcılarının stillerini kaldırıp yeniden deneyin.
  4. Bölünmemiş metni geri yükleyin ve temel CSS'nin amaçlanan satır kaydırmayı ürettiğini doğrulayın.
  5. Farkı yeniden oluşturana kadar her seferinde tek bir düzen girdisini değiştirin.

Karakter biçimlendirmesini tarayıcının metin motorunda bırakın. W3C, biçimlendirmenin satır içi sınırların ötesinde devam etmesi gereken ve ayrılması gereken durumları tanımlar; ayrılması gerekenlere satır içi dolguyu, kenarlıkları veya kenar boşluklarını ayırmak da dahildir. Bu nedenle sarmalayıcı stilleri ölçülmekte olan şeyi etkileyebilir. Daha önceki bir ekran görüntüsünü yeniden üretmek için tek tek karakter kutuları arasına boşluk eklemeyin. Öğe Sınırları Boyunca Biçimlendirme

Görsel satırları innerText değerini yeni satır karakterlerine göre bölerek saymayın. WHATWG, innerText değerini metin, açık satır sonları ve yapısal sınırlar için toplama kuralları olan oluşturulmuş metin olarak tanımlar; bu özellik yumuşak satır kaydırmalarla oluşan görsel satırların dizisini sağlamaz. Karşılaştırma için bölünmemiş tarayıcı görünümünü kullanın. innerText ve outerText özellikleri

Kitaplığın belgelenmiş sınırlamalarına uyun: GSAP, bölme sırasında text-wrap: balance kullanmaktan kaçınılmasını önerir ve SplitText'in SVG metin düğümleri için tasarlanmadığını belirtir. Dengeli başlıklarda metni bölünmemiş tutup tüm öğeyi canlandırın; satır sarmalayıcıları için HTML metin öğesinde normal satır kaydırma kullanın. SplitText ipuçları ve sınırlamalar

Bölünmüş kopya, gerçek genişlik ve tipografi değişikliklerinde bölünmemiş kopyayı izlediğinde işlem tamamlanır. Açık yeniden oluşturma çağrılarını bunları gerektiren değişikliklere yakın tutun, tanılama sırasında referansı koruyun ve başlığı tamamlanmış sayfaya eklemeden önce geçici kopyayı ve satır ana hatlarını kaldırın.

Kaynaklar