Buat teks statis-responsif hanya dengan CSS dan Tailwind

Klarifikasi

Buat kalian yang (seharusnya) sudah baca judul artikel ini, mungkin bakal bingung sama maksudnya

"'Buat teks statis... responsif...', lah jadi statis? Atau responsif?" 😵‍💫

Sini-sini biar dijelasin dulu.

Ambil contoh dari website ini, di laman utama tulisan terlihat ada teks judul besar dengan teks "TULISAN".

Sekarang coba diperhatikan dan diingat ukuran teksnya di layar saat ini, terus ubah ukuran browser kalau menggunakan laptop atau komputer. Buat yang menggunakan ponsel, putar layarnya 90°.

Terlihat apa yang terjadi terhadap teks judulnya? Yap, teks judulnya ikut ke-resize bersama dengan layarnya, namun masih mempertahankan

1. Rasio dirinya sendiri, dan
2. Posisi setiap karakternya.

Efek ini akan lebih terlihat kalau dites pakai laptop atau komputer dari ukuran browser besar ke kecil. Inilah yang dimaksud dengan "statis tapi responsif", statis secara posisi dan komposisi, namun responsif secara keseluruhan.

Re-kreasi

Untuk membuat efek ini kita memiliki dan akan mencoba dua opsi, yaitu

1. Menggunakan browser viewport sebagai referensi lebar, atau
2. Menggunakan container-query, menggunakan parent element sebagai referensi lebar.

Menggunakan browser viewport

Karena viewport menggunakan 'ukuran' browser sebagai referensinya, unit yang digunakan harus menggunakan referensi yang sama, yaitu, unit vw. Unit berdasarkan referensi disebut sebagai relative length units.

Namun, kita tidak bisa langsung menerapkan unit vw ke properti font-size seperti contoh dibawah

p {
  font-size: 100vw;
}

Alasannya, karena kalau diterapkan seperti contoh diatas, 100vw akan diterapkan pada seluruh teks, menghiraukan bagaimana setiap karakter dialokasikan pada lebar 100vw. Hasilnya jadi seperti di demo berikut

Teks jadi super besar, kan? Sampai enggak keliatan tuh teksnya, tidak sesuai dengan apa yang kita inginkan.

"Kalau dikira-kira dan coba-coba ukuran vw-nya bisa kan?"

Bisa, tapi ukuran vw yang dikira-kira itu spesifik hanya untuk teks dengan komposisi karakter saat itu. Sekalinya teks diubah, ukuran tersebut menjadi tidak akurat.

Oleh karena itu kita perlu membagi lebar yang dialokasikan (dalam kasus ini 100vw) sebanyak karakter dalam teks dengan menggunakan fungsi CSS calc().

Menggunakan fungsi calc() sama seperti menulis operasi matematika pada Javascript, kelebihannya disini kita bisa menggunakan unit CSS seperti px, vw, vh, rem, dkk.

Untuk membagi total lebar pada masing-masing karakter, kita gunakan rumus sebagai berikut:

ukuran teks = alokasi lebar / banyak karakter * skala lebar per karakter

Penjelasannya sebagai berikut:

• alokasi lebar adalah seberapa lebar keseluruhan teks akan menempati area. 100vw untuk selebar layar, 50vw untuk setengah layar, dst.
• banyak karakter adalah banyaknya jumlah karakter dalam teks, atau banyaknya karakter yang ingin dipertahankan rasionya dalam satu baris.
  
  Contoh: untuk teks "TULISAN", jika ingin seluruh teks tercantum dalam satu baris, maka banyak karakternya adalah 7.
• skala lebar per karakter adalah skala ukuran setiap karakter dalam teks. Untuk mencari angka skala per karakter, kita melakukan proses trial-n-error menggunakan browser developer tools.
  
  Skala ini merupakan angka konstan setelah proses trial-n-error selesai. Namun, akan menjadi tidak presisi dan perlu dilakukan proses trial-n-error kembali apabila
• • font-size berubah
  • font-style berubah, atau
  • Properti yang mengubah jarak atau lebar karakter dalam satu baris berubah.

Catatan:

Karena skala lebar per karakter merupakan perhitungan re-rata lebar setiap karakter, skala akan tidak terlalu akurat. Terlebih pada teks dengan gaya non-monospace, dimana setiap karakter dapat memiliki lebar yang bervariasi.

Untuk melakukan uji coba perbedaan ukuran setiap karakter, dapat gunakan demo ini.

Sekarang coba terapkan rumus tersebut pada elemen target <p> seperti contoh dibawah

p {
  font-size: calc(100vw / 7 * 1); /* Kita menggunakan 7 karakter untuk teks "TULISAN" dan skala 1 untuk sementara */
}

Lalu, untuk melakukan proses trial-n-error skala lebar per karakter, ikuti langkah-langkah berikut

tahapan trial-n-error

Inspeksi elemen target

Tambahkan rumus pada properti font-size

Lakukan percobaan pada nilai skala

Kurangi nilai skala

Terapkan rumus pada kode

---

1. Klik kanan pada elemen target.
2. Klik inspeksi/inspect.

---

Sebelumnya

Selanjutnya

Sekarang coba cek demo dibawah, implementasi hasil dari kode sebelumnya dan proses trial-n-error. Coba ubah-ubah ukuran browser atau putar layar ponsel

Selesai! Sekarang rasio teks akan tetap dipertahankan berdasarkan lebar browser viewport. Selanjutnya kita akan membuat efek yang sama, tetapi menggunakan container-query.

Menggunakan container-query

Mengapa menggunakan container-query?

Mungkin ada yang bertanya

"Kan efeknya sudah bisa dibuat pakai browser viewport. Kenapa ada dan perlu opsi menggunakan container-query?"

Alasannya, kalau pakai browser viewport kita terbatas menggunakan lebar dari browser viewport.

Sekarang coba pikirkan kalau kita ingin lebarnya menggunakan lebar dari elemen parent. Mungkin bisa pakai media-query, tapi kita harus mengira-ngira dan kalau elemen parent tersebut berubah ukuran di ukuran viewport tertentu, kita harus mengatur ulang alokasi lebar, dsb.

Dengan menggunakan container-query, kita bisa menghindari hal tersebut, sehingga kode CSS kita lebih singkat dan lebih mudah dibaca.

Tentang container-query

Untuk informasi lebih lanjut mengenai container-query bisa kunjungi halaman ini. Untuk dukungan browser, container-query telah masuk fitur baseline untuk browser evergreen.

Implementasi dengan container-query

Kalau sebelumnya kalian sudah menerapkan dengan metode viewport, implementasi container-query mirip sekali dengan hanya perlu mengubah properti CSS elemen parent dan tipe unit yang digunakan.

Dengan container-query, ekspektasinya elemen teks berada dalam suatu kontainer/parent seperti berikut, dimana pada contoh ini, elemen <p> berada di dalam kontainer/parent yaitu <div>

<div>
  <p>TULISAN</p>
</div>

Karena teks yang digunakan sama, yaitu "TULISAN", kita bisa menggunakan rumus dan nilai yang sama

div {}

div p {
  font-size: calc(100vw / 7 * 1.55);
}

Sekarang kita tambahkan properti container-type: inline-size pada kontainer/parent dan ubah unit alokasi lebar dari vw menjadi cqw

div {
  container-type: inline-size;
}

div p {
  font-size: calc(100cqw / 7 * 1.55);
}

Lalu, berikut adalah demo dari kode diatas. Melainkan mengubah ukuran browser, kita sekarang bisa mengubah ukuran dari kontainer/parent, dan teks akan tetap terjaga rasionya.

Untuk mengubah ukuran kontainer/parent, klik dan tahan sembari menggeser kursor atau jari kamu diatas teks

Mengenai container-type dan unit cqw

Karena referensi container-query adalah elemen parent, kita perlu memberi tanda pada CSS elemen mana yang ditetapkan menjadi parent dengan menggunakan properti container-type. Adapun properti opsional lain seperti container-name: <nama-container> untuk memberi nama pada parent apabila terdapat nested container.

Setelah CSS diberikan tanda mengenai elemen mana yang menjadi parent, kita bisa menggunakan unit container seperti cqw, cqh, dan lainnya untuk menggunakan dimensi parent sebagai referensi.

Catatan:

Penggunaan unit container hanya bisa bekerja apabila elemen yang menggunakan unit tersebut terletak pada elemen parent yang minimal memiliki definisi properti CSS container-type.

melanjutkan implementasi dengan container-query...

Tidak ada! Sudah selesai! 🎊 Mungkin perlu dilakukan kembali proses trial-n-error jika diperlukan. Namun, itulah cara membuat teks statis-responsif hanya menggunakan CSS!

Tapi, kalau teks yang digunakan itu dinamis, akan membutuhkan sedikit bantuan Javascript untuk menghitung banyak karakter yang kemudian nilai tersebut diberikan kepada rumus di CSS melalui CSS Variables.

Implementasinya kurang lebih seperti berikut

import type { CSSProperties } from 'react';

// ...

const teks = 'Tulisan';

// ...

return (
  <div style={{ '--text-count': teks.length } as CSSProperties} className="@container uppercase">
    <p className="font-[calc(100cqw/var(--text-count)*1.55)]">{teks}</p>
  </div>
)

// ...