Perataan Vertikal Teks SVG: Tengahkan Label yang Dibuat Ulang

Untuk label SVG horizontal, y menempatkan garis dasar yang dipilih. Atribut ini tidak meletakkan bagian atas huruf pada koordinat itu. Mulai dengan dominant-baseline="middle" saat menempatkan label Latin pendek di sekitar garis panduan horizontal, dan periksa hasil dengan font sebenarnya. Gunakan text-anchor="middle" untuk menengahkan teks secara horizontal di sekitar koordinat x-nya.

Label masih dapat terlihat terlalu tinggi atau rendah di samping lambang. middle dan central memakai garis dasar font yang berbeda, sementara pemusatan visual bergantung pada bentuk dalam kata. Tentukan apakah tata letak memerlukan garis dasar bersama, kotak teks terpusat, atau penyesuaian optis sebelum menambahkan offset.

Pilih target perataan

y="100" yang sama dapat menghasilkan posisi huruf berbeda:

Definisi garis dasar W3C membedakan middle dari central. Kedua definisi tidak menjanjikan pemusatan kontur berwarna setiap kata. Tabel garis dasar font dan heuristik renderer juga berpengaruh, sebagaimana dijelaskan referensi dominant-baseline MDN.

Untuk teks horizontal biasa, text-anchor="middle" menangani sumbu lain. Atribut meratakan satu bagian teks di sekitar posisi horizontal yang diberikan; tidak menyediakan pemusatan vertikal. Lihat referensi text-anchor untuk hubungannya dengan bagian teks.

Bandingkan lambang dan label yang masih berupa teks

Simpan contoh lengkap ini sebagai baseline-example.svg dan buka di browser. Cincin merupakan geometri asli; Agyp adalah string pengujian dengan bagian huruf yang naik dan turun. Garis merah menandai y=100.

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

Ubah hanya dominant-baseline menjadi alphabetic, lalu central. Pertahankan koordinat, ukuran font, dan kata-kata. Berikutnya, bandingkan font kedua yang tersedia. Mengubah beberapa pengaturan bersama mempersulit identifikasi pengaturan yang memindahkan label.

Kami merender ketiga nilai dengan salinan Arial dan Times New Roman yang dimuat. Setiap panel memakai koordinat SVG dan cincin asli yang sama. Persegi panjang hijau menunjukkan hasil getBBox() browser untuk teks yang masih bisa diedit.

Contoh alphabetic berada lebih tinggi relatif terhadap garis tengah cincin. Contoh middle bergerak ke bawah, sedangkan central menempatkan kotak yang dilaporkan dekat garis panduan. Pengukuran yang dicetak di bawah setiap contoh berlaku pada file font dan render browser ini. Angka tersebut bukan offset untuk disalin ke desain lain.

File font kami dimuat sebelum pengukuran. SVG ekspor Anda dapat memilih font pengganti ketika font yang diminta tidak tersedia; selesaikan dependensi itu sebelum menilai perataan. Panduan perubahan font SVG membahas cara memeriksa font sebenarnya dan mempertahankan salinan penyerahan.

Kotak teks terpusat masih dapat tampak tidak seimbang

Batas teks SVG belum tentu merupakan persegi panjang terkecil di sekitar bagian huruf yang terlihat. Aturan bounding box SVG memakai sel glif dan ascent/descent font untuk perhitungan teks. Persegi panjang di sekitar sel itu dapat menyertakan ruang yang tidak diwarnai huruf mana pun.

Perbedaan itu penting untuk label seperti Agyp: g, y, dan p turun di bawah garis dasar alfabetis. Label seluruhnya kapital memiliki distribusi visual berbeda. Font yang dimaksud dan kata-kata sebenarnya harus tersedia saat perataan.

Untuk baris label yang harus terbaca pada satu garis, pertahankan garis dasar alfabetis bersama. Menggeser setiap kata sendiri-sendiri hingga bentuk terlihat terpusat dapat membuat baris tidak rata.

Untuk satu susunan lambang dan tulisan, bandingkan label pada ukuran akhirnya dan sesuaikan secara visual setelah memilih garis dasar. Jika tata letak secara khusus memerlukan perataan berdasarkan kontur huruf, gunakan duplikat outline di editor untuk memeriksa geometri tersebut, sambil mempertahankan teks yang bisa diedit dalam master. Perlakukan batas outline dan penyesuaian optis sebagai keputusan terpisah.

Tengahkan kotak teks SVG terukur ketika itu tujuannya

Untuk elemen <text> sederhana, tanpa transformasi, dan satu baris, hitung offset dari tengah kotak yang dilaporkan ke target. Jalankan ini dalam dokumen yang berisi contoh, setelah font siap:

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

Perhitungan meratakan kotak teks yang dilaporkan dengan targetY. Perhitungan tidak menghitung keseimbangan visual atau membuang ruang sel glif font yang tidak dipakai. Ukur ulang setelah mengubah teks, font, bobot, atau ukuran.

document.fonts.ready menunggu pemuatan font dan pekerjaan tata letak terkait. Ini tidak membuktikan font yang Anda maksud berhasil disediakan; periksa juga sumber daya font atau informasi font yang dirender pada browser.

Snippet ini mengasumsikan satu nilai y, tanpa posisi per karakter, tanpa offset dy, dan tanpa grup teks yang ditransformasi. getBBox() mengembalikan kotak SVG lokal. Target dalam sistem koordinat lain membutuhkan pemetaan; gunakan alur batas SVG sebelum mencampur piksel layar dengan satuan SVG.

Selesaikan pengaturan yang bertentangan sebelum menambah offset

Periksa teks dan grup induknya. dy yang tersisa, <tspan> bersarang, atau transformasi dapat mengubah penempatan yang sedang Anda diagnosiskan. Hapus satu penyesuaian yang dicurigai setiap kali dalam salinan dan bandingkan hasilnya.

Periksa juga gaya halaman. CSS dapat menimpa atribut presentasi dominant-baseline. Jika perubahan atribut tidak memberi efek terlihat, periksa nilai computed sebelum menambahkan koreksi kedua.

alignment-baseline menangani cara garis dasar elemen diratakan dengan garis dasar yang bersesuaian milik induknya. Atribut ini bukan sinonim umum untuk “tengahkan label ini dalam SVG.” Referensi alignment-baseline MDN juga mengidentifikasi batas dukungan browser. Untuk label mandiri ini, fokuskan pengujian pada dominant-baseline, lalu verifikasi tujuan ekspor sebenarnya.

Contoh ini membahas teks Latin horizontal dalam satu browser. Label melengkung membutuhkan pemeriksaan penempatan berbeda; panduan teks SVG pada path memisahkan tulisan dari kurva pemandunya. Aksara lain dan penulisan vertikal memerlukan keputusan garis dasar sendiri.

Pisahkan tanda dari tulisan

Jika Anda sudah memiliki lambang vektor bersih, pertahankan dan buat ulang label sebagai teks yang masih bisa diedit. Memindahkan label atau memilih font tidak memerlukan vektorisasi.

Ketika lambang hanya tersedia dalam PNG atau JPG, vektorisasi logo PerfectVector dapat menyiapkan kandidat geometri untuk bagian desain tersebut. Periksa outline dan bukaannya, lalu tempatkan di samping teks yang baru diketik dengan garis dasar pilihan. Vektorisasi tidak mengidentifikasi font asli atau memulihkan tipografi yang bisa diedit dari gambar raster.

Untuk tulisan merek yang persis, gunakan font asli dan aset vektor jika tersedia, atau rekonstruksikan tulisan secara sengaja. Panduan vektorisasi logo membantu memilih antara mempertahankan, men-trace, dan menggambar ulang sumber.

Sebelum penyerahan, periksa kata-kata dan font sebenarnya, tinjau susunan pada ukuran akhir, dan buka kembali SVG ekspor dalam aplikasi tujuan. Simpan master yang bisa diedit jika salinan penyerahan memakai teks outline.

FAQ

Apakah dominant-baseline="middle" sama dengan central? Tidak. Middle memakai garis dasar terkait x-height, sementara central memakai garis dasar tengah font yang terkait dengan kotak em. Posisinya dapat berbeda, dan keduanya tidak menjamin pemusatan optis setiap kata.

Apakah text-anchor="middle" menengahkan teks SVG secara vertikal? Untuk teks horizontal biasa, text-anchor mengendalikan penempatan horizontal di sekitar koordinat x. Pilih garis dasar vertikal secara terpisah dengan dominant-baseline, lalu periksa hasil dengan font yang dimaksud.

Bisakah getBBox menengahkan huruf terlihat secara persis? Metode dapat menengahkan kotak teks SVG yang dilaporkan browser. Batas teks dapat menyertakan ruang sel glif di luar huruf yang berwarna, sehingga perhitungan ini tidak menjamin pemusatan optis atau perataan kontur rapat.

Sources

1. W3C — Perataan garis dasar SVG — Mendefinisikan garis dasar alphabetic, middle, dan central.
2. MDN — dominant-baseline — Menjelaskan tabel garis dasar, heuristik font, dan prioritas CSS.
3. MDN — text-anchor — Mendokumentasikan penjangkaran bagian teks di sekitar posisi yang diberikan.
4. W3C — Bounding box SVG — Menjelaskan model sel glif untuk batas teks.
5. MDN — FontFaceSet.ready — Mendefinisikan kapan pemuatan font dan tata letak selesai.
6. MDN — getBBox — Mendokumentasikan batas SVG lokal dan pengecualian transformasi.
7. MDN — alignment-baseline — Menjelaskan perataan garis dasar induk dan batas dukungan browser.

Jika logo yang dibuat ulang masih membutuhkan lambang yang bisa diedit, siapkan kandidat SVG dengan PerfectVector, periksa outline hasil rekonstruksi, lalu pasangkan dengan tulisan yang masih berupa teks dan periksa perataan dalam aplikasi tujuan akhir.