Framer meluncurkan fitur baru yang disebut "Fit Text", yang memungkinkan Anda membuat judul dengan ukuran yang menyesuaikan dengan kontainer apa pun. Fitur ini mendukung banyak baris, pemformatan sebaris, lebar minimum/maksimum sambil mempertahankan kinerja tinggi.

Masalah: Keterbatasan CSS

Sebelum membahas masalah ini, kami mengkaji beberapa perpustakaan yang ada, tetapi ada masalah umum. Masalahnya adalah harus mengukur ukuran sebenarnya dari teks sebelum dirender untuk memperbesar teks. Namun, situs Framer dibuat secara statis, dan harus dirender dengan sempurna di browser mana pun sebelum JavaScript dijalankan.

Kemudian kami mencoba font-size: 100vw, yang bekerja baik jika ingin mengisi layar penuh. Namun, untuk menyesuaikan teks ke dalam kontainer sembarang, dibutuhkan perhitungan rumit dengan CSS calc atas ukuran semua elemen induk dalam satuan vw. Meskipun secara teori mungkin, ini sulit diterapkan karena kita tidak dapat mengetahui ukuran elemen induk dari dalam kode komponen.

Solusi: SVG + viewBox + foreignObject

Metode yang ditemukan berikutnya adalah menggunakan viewBox dan foreignObject dari SVG. Ketika teks dirender sebagai foreignObject dalam SVG, Anda dapat memberikan efek zoom, tanpa masalah dengan keteraksesan atau SEO.

Namun, ada satu syarat. Anda harus menghitung bounding box dari teks secara tepat dan menyinkronkannya ke dalam viewBox setiap kali teks berubah. Jika tidak, teks akan terpotong atau tidak teratur. Oleh karena itu, pendekatan ini sebenarnya tidak mungkin untuk situs pengguna umum.

Otomatisasi: Cara Framer Menanganinya

Framer mengotomatiskan proses ini untuk menyelesaikan masalahnya. Saat mengatur teks sebagai “Fit”, FramerFramer mengukur ukuran teks pada ukuran font saat ini dan mendapatkan bounding box, kemudian membuat SVG dan viewBox yang sesuai.

Ketika pengguna mengedit teks, Framer kembali mengukur dan mengupdate viewBox. Saat pengeditan, viewBox dikonversi kembali ke satuan piksel untuk memberikan pengalaman pengeditan yang alami, dan setelah pengeditan selesai, ukuran otomatis disesuaikan kembali berdasarkan viewBox. Semua ini dilakukan dengan mulus tanpa memengaruhi kinerja di kanvas.

Hasil: Pengubahan Ukuran yang Halus

Ketika situs diluncurkan, viewBox sudah termasuk dalam perhitungan sehingga teks dirender dengan ukuran yang tepat bahkan sebelum JavaScript dimuat. Ukuran disesuaikan dengan halus tanpa flicker, jeda pengubahan ukuran, atau fade-in.

Tantangan ke Depan: Query Kontainer

Ketika browser di masa depan mendukung query kontainer secara memadai, FramerFramer berencana untuk mengadopsinya. Kita dapat menggunakan satuan regular seperti cqw, tetapi vw dan cqw didasarkan pada kontainer bukan viewport. Ini memungkinkan bekerja secara alami di tingkat komponen tanpa calc() CSS yang rumit.

Fit Text adalah contoh bagus bagaimana Framer mengotomatisasi fitur yang awalnya rumit untuk diterapkan, sehingga pengguna dapat fokus membuat situs yang kreatif. Silakan gunakan fitur ini untuk menghasilkan hasil yang kreatif di masa mendatang.

Tulisan ini adalah terjemahan dan adaptasi dari konten blog resmi Framer, ' Advanced responsive typography: technical implementation of Fit Text'.