SVG textLength: Sesuaikan Label Tanpa Mendistorsi Huruf

Gunakan textLength dengan lengthAdjust="spacing" ketika label SVG memerlukan panjang tertentu dan sedikit koreksi spasi dapat diterima. Bentuk glif tetap sama. Jika Anda memilih spacingAndGlyphs, renderer dapat meregangkan atau memampatkan huruf itu sendiri sepanjang baris teks. Inilah dua mode yang didefinisikan spesifikasi teks SVG.

Hal yang perlu diperhatikan adalah targetnya: textLength merupakan panjang yang diminta, bukan lebar maksimum. Atribut ini dapat merenggangkan label pendek semudah memampatkan label panjang. Atribut ini juga tidak membuat baris terbungkus.

Apa yang diubah setiap penyesuaian

spacing adalah default ketika Anda menetapkan textLength tanpa nilai lengthAdjust. Referensi textLength MDN menjelaskan cara panjang yang diminta dan mode penyesuaian bekerja bersama.

Untuk penggunaan merek biasa, lakukan koreksi kecil dan periksa hasilnya. Label yang memerlukan pengurangan besar biasanya lebih sesuai dengan ukuran font lebih kecil, kata-kata lebih singkat, atau ruang lebih lebar dalam tata letak.

Label pendek dan panjang pada target yang sama

Kami menggambar lambang belah ketupat asli dan menguji dua label yang tetap berupa teks memakai Abel Regular pada ukuran font 64 satuan SVG. Setelah memuat font yang dimaksud, browser mengukur PINE sekitar 115.6 satuan dan PINE & FIELD 325.3 satuan. Kedua baris yang disesuaikan meminta 240 satuan.

Target sama, tipografi berbeda

Pada label pendek, spacing menghasilkan celah mencolok. Pada label panjang, atribut ini mendesakkan huruf. Glif mempertahankan bentuknya dalam kedua kasus, tetapi kedua hasil tersebut tidak cocok untuk desain ini. Baris spacingAndGlyphs mencapai rentang yang sama dengan mengubah proporsi jenis huruf secara terlihat.

Pengujian kami memakai Chrome 154 dalam browser aplikasi. Kami mengukur rentang horizontal dari posisi awal karakter pertama ke posisi akhir karakter terakhir; setiap baris yang disesuaikan mencapai sekitar 240 satuan. Contoh memakai satu font Latin dan teks sederhana dari kiri ke kanan. Ini bukan pengujian kompatibilitas lintas renderer atau multibahasa.

Tetapkan koreksi panjang yang kecil

Untuk label panjang di atas, 330 satuan mendekati panjang alaminya sebesar 325.3 satuan. Itu merupakan contoh kalibrasi yang lebih berguna daripada memaksanya turun ke 240.

Unduh Abel-Regular.ttf dan OFL.txt dari direktori Abel Google Fonts. Letakkan keduanya dalam folder fonts di samping file HTML berisi markup ini, lalu sajikan folder tersebut secara lokal:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

330 tanpa satuan merupakan bagian sistem koordinat SVG. Menskalakan seluruh SVG di halaman juga menskalakan jarak itu di layar. Pisahkan lambang dan teks agar perubahan tipografi tidak mengubah gambar.

Font tetap penting. textLength tidak mengubah huruf menjadi outline atau mengemas jenis huruf. Jika bentuk huruf berubah di komputer lain, diagnosiskan substitusi font SVG sebelum menyesuaikan spasinya.

Untuk lebar maksimum, ukur terlebih dahulu

Jika aturannya adalah “biarkan label pendek tanpa perubahan, kecilkan hanya yang panjang,” tambahkan kondisi itu sendiri. Contoh ini mengurangi ukuran font, sehingga huruf mempertahankan proporsinya sambil mengecil pada kedua dimensi.

Letakkan skrip ini setelah SVG di atas. Skrip mengganti penyesuaian tetap 330 satuan dengan maksimum 240 satuan:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready menunggu pemuatan font dan pekerjaan tata letak dokumen selesai. Pemanggilan load() eksplisit meminta font yang dipakai contoh ini terlebih dahulu. Mengukur sebelum font yang dimaksud dimuat dapat membuat keputusan penyesuaian berdasarkan huruf font pengganti.

Kami menghapus textLength sebelum memanggil getComputedTextLength(), karena cabang ini membutuhkan panjang alami. Dalam pengujian browser kami, metode tersebut masih melaporkan panjang alami pada baris spacing meskipun rentang tampilan dari awal ke akhir sudah berubah. Jangan menganggapnya sebagai pengukuran universal untuk lebar visual yang disesuaikan.

Dengan skrip ini, label pendek PINE mempertahankan ukuran 64 satuan. Label panjang turun menjadi sekitar 47.2 satuan. Tinjau hasil pada ukuran tampilan atau cetak sebenarnya. Jika kata-kata yang dikecilkan terlalu kecil, ubah tata letak atau kata-katanya alih-alih terus menurunkan ukuran. Jalankan tahap penyesuaian kembali ketika kata-kata atau pengaturan font berubah.

Periksa label akhir dalam aplikasi tujuannya

Kecocokan numerik hanya satu pemeriksaan. Lihat pasangan huruf dan celah antara lambang serta teks pada ukuran akhir. Pertahankan spasi alami pada label biasa kecuali desain memerlukan kalibrasi.

Untuk beberapa baris, buat dan posisikan baris secara sengaja; textLength sendiri tidak menyediakan kebijakan pembungkusan. Untuk lencana melengkung, gunakan alur teks SVG pada path yang terpisah. Panduan itu mengendalikan garis dasar yang diikuti huruf.

Simpan sumber dengan teks yang masih bisa diedit, lalu buka file penyerahan dalam editor, browser, atau renderer sebenarnya yang akan memakainya. Panduan file SVG menjelaskan mengapa SVG dapat berisi teks yang bisa diedit, path vektor, atau gambar tertanam meskipun ekstensi sama.

Jika logo awal Anda hanya tersedia sebagai gambar raster, vektorisasi logo PerfectVector dapat merekonstruksi karya untuk lambangnya. Periksa dan bersihkan path tersebut, lalu ketik ulang kata-kata sebagai teks sebelum menyesuaikan label. Kata hasil tracing adalah geometri path; textLength tidak dapat mengubah spasi karakternya. Panduan langkah vektorisasi logo kami membahas tahap rekonstruksi sumber tersebut.

FAQ

Apakah textLength hanya mengecilkan teks yang terlalu panjang? Tidak. Atribut ini meminta panjang, sehingga juga dapat memperluas teks yang secara alami lebih pendek. Ukur label alami dan terapkan kondisi sendiri ketika Anda memerlukan aturan lebar maksimum.

Nilai lengthAdjust mana yang mempertahankan bentuk huruf? Gunakan spacing untuk menyesuaikan spasi karakter tanpa meregangkan glif. Penyesuaian besar tetap dapat menghasilkan celah atau tabrakan yang tidak nyaman, jadi periksa tulisan pada ukuran akhirnya.

Bisakah textLength menyesuaikan tulisan hasil tracing dari PNG? Atribut ini bekerja pada teks SVG, bukan path berbentuk huruf. Ketik ulang kata-kata sebagai teks jika Anda membutuhkan textLength atau spasi karakter yang bisa diedit, sambil mempertahankan lambang sebagai karya vektor terpisah.

Sources

1. W3C — Penyesuaian teks SVG 2 — Dua mode dan efeknya pada bentuk glif serta jarak maju karakter.
2. MDN — textLength — Panjang yang diminta dan mode spacing default.
3. MDN — FontFaceSet.ready — Menunggu pemuatan font dan tata letak.
4. MDN — getComputedTextLength — Mengukur elemen teks SVG.
5. Google Fonts — Abel — Font dan lisensi yang digunakan dalam perbandingan asli.

Rekonstruksikan lambang raster dengan vektorisasi logo jika diperlukan, lalu pertahankan tulisan sebagai elemen teks terpisah. Bandingkan label akhir pada ukuran normal sebelum membuat salinan penyerahan ber-outline atau ekspor raster.