SVG metnini dikey hizalama: Etiketi doğru ortalayın

Yatay bir SVG etiketinde y, seçilen taban çizgisinin konumunu belirler. Harflerin üst kenarını bu koordinata yerleştirmez. Kısa bir Latin harfli etiketi yatay bir kılavuzun çevresine yerleştirirken dominant-baseline="middle" ile başlayın ve sonucu kullanılacak yazı tipinde inceleyin. Metni x koordinatının çevresinde yatay olarak ortalamak için text-anchor="middle" kullanın.

Etiket, bir amblemin yanında yine de fazla yukarıda veya aşağıda görünebilir. middle ve central farklı yazı tipi taban çizgilerini kullanırken görsel ortalama, sözcükteki harflerin biçimlerine bağlıdır. Bir kaydırma eklemeden önce düzenin ortak bir taban çizgisine mi, ortalanmış bir metin kutusuna mı yoksa optik bir düzeltmeye mi ihtiyaç duyduğunu belirleyin.

Hizalama hedefini seçin

Aynı y="100" değeri, harfleri farklı konumlara yerleştirebilir:

W3C taban çizgisi tanımları, middle ile central arasındaki farkı açıklar. İki tanım da her sözcüğün boyanan konturlarını ortalamayı garanti etmez. MDN dominant-baseline başvuru belgesi belgesinde açıklandığı gibi, yazı tipinin taban çizgisi tabloları ve görüntüleyicinin sezgisel yöntemleri de önemlidir.

Normal yatay metinde text-anchor="middle" diğer ekseni ele alır. Metin parçasını verilen yatay konumun çevresinde hizalar; dikey ortalama sağlamaz. Metin parçalarıyla ilişkisi için text-anchor başvuru belgesi belgesine bakın.

Bir amblemi düzenlenebilir bir etiketle karşılaştırın

Bu eksiksiz örneği baseline-example.svg adıyla kaydedip bir tarayıcıda açın. Halka özgün bir geometridir; Agyp, üst uzantısı ve alt uzantıları olan bir test dizgesidir. Kırmızı çizgi y=100 konumunu gösterir.

<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>

Yalnızca dominant-baseline değerini önce alphabetic, ardından central olarak değiştirin. Koordinatları, yazı boyutunu ve metni sabit tutun. Sonra kullanılabilir ikinci bir yazı tipiyle karşılaştırın. Birkaç ayarı birlikte değiştirmek, etiketi hangisinin hareket ettirdiğini belirlemeyi zorlaştırır.

Üç değeri de Arial ve Times New Roman'ın yüklenmiş kopyalarıyla görüntüledik. Her panelde aynı SVG koordinatları ve özgün halka kullanılıyor. Yeşil dikdörtgenler, tarayıcının düzenlenebilir metin için döndürdüğü getBBox() sonucunu gösteriyor.

Alphabetic örnekleri, halkanın merkez çizgisine göre daha yukarıda duruyor. Middle örnekleri aşağıya kayarken central, bildirilen kutuları kılavuza yakın yerleştiriyor. Her örneğin altında yazılı ölçümler bu yazı tipi dosyalarına ve bu tarayıcı görüntülemesine aittir. Başka bir tasarıma kopyalayacağınız kaydırma değerleri değildir.

Yazı tipi dosyalarımız ölçümden önce yüklendi. Dışa aktardığınız SVG, istenen yazı tipi bulunamadığında bir yedek yazı tipi seçebilir; hizalamayı değerlendirmeden önce bu bağımlılığı çözün. SVG yazı tipi değişikliği rehberi, gerçekten kullanılan yazı tipini kontrol etmeyi ve teslim için bir kopyayı korumayı anlatır.

Ortalanmış bir metin kutusu yine de dengesiz görünebilir

SVG metin sınırları, görünen mürekkebin çevresindeki en küçük dikdörtgen olmak zorunda değildir. SVG sınır kutusu kuralları, metin hesaplamalarında glif hücrelerini ve yazı tipinin üst/alt uzantı metriklerini kullanır. Bu hücreleri çevreleyen bir dikdörtgen, hiçbir harfin boyamadığı boşluklar içerebilir.

Bu ayrım Agyp gibi etiketlerde önemlidir: g, y ve p, alfabetik taban çizgisinin altına uzanır. Tamamı büyük harflerden oluşan bir etiketin görsel dağılımı farklıdır. Hizalama sırasında kullanılacak yazı tipi ve gerçek metin mevcut olmalıdır.

Tek satır halinde okunması gereken bir etiket dizisi için ortak bir alfabetik taban çizgisini koruyun. Her sözcüğü görünen biçimi ortalanmış görününceye kadar ayrı ayrı kaydırmak, satırın düzensiz görünmesine yol açabilir.

Tek bir amblem ve yazı birleşiminde, etiketi son boyutunda karşılaştırın ve taban çizgisini seçtikten sonra görsel olarak ayarlayın. Düzen özellikle harf konturlarına göre hizalama gerektiriyorsa bu geometriyi incelemek için editörünüzde metni vektör yollarına dönüştürülmüş bir kopya kullanın; düzenlenebilir ana dosyada ise metni koruyun. Kontur sınırlarını ve optik düzeltmeyi ayrı kararlar olarak ele alın.

Amaç buysa ölçülen SVG metin kutusunu ortalayın

Basit, dönüşüm uygulanmamış, tek satırlı bir <text> öğesi için bildirilen kutu merkezinden hedefe olan kaydırmayı hesaplayın. Yazı tipi hazır olduktan sonra, örneğin bulunduğu belgede şu kodu çalıştırın:

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));

Bu hesaplama, bildirilen metin kutusunu targetY ile hizalar. Görsel dengeyi hesaplamaz veya yazı tipinin kullanılmayan glif hücresi boşluğunu kaldırmaz. Metni, yazı tipini, kalınlığını veya boyutunu değiştirdikten sonra yeniden ölçün.

document.fonts.ready, yazı tiplerinin yüklenmesini ve ilgili yerleşim işlemlerini bekler. Ama amaçladığınız yazı tipinin başarıyla sağlandığını kanıtlamaz; yazı tipi kaynağını veya tarayıcının görüntülenen yazı tipi bilgilerini de kontrol edin.

Bu kod parçası tek bir y değeri olduğunu; karakter başına konum, dy kaydırması ve dönüşüm uygulanmış bir metin grubu olmadığını varsayar. getBBox(), yerel bir SVG kutusu döndürür. Başka bir koordinat sistemindeki hedef için koordinat eşlemesi gerekir; ekran piksellerini SVG birimleriyle karıştırmadan önce SVG sınırlarını inceleme adımlarını izleyin.

Daha fazla kaydırma eklemeden önce çakışan ayarları çözün

Metni ve üst gruplarını inceleyin. Önceden kalmış bir dy, iç içe bir <tspan> veya bir dönüşüm, teşhis etmeye çalıştığınız yerleşimi değiştirebilir. Bir kopyada şüphelendiğiniz düzeltmeleri birer birer kaldırıp sonucu karşılaştırın.

Sayfa stillerini de kontrol edin. CSS, dominant-baseline sunum özniteliğini geçersiz kılabilir. Özniteliği değiştirmek görünür bir etki yaratmıyorsa ikinci bir düzeltme eklemeden önce hesaplanan değeri inceleyin.

alignment-baseline, bir öğenin taban çizgisinin üst öğesindeki karşılık gelen taban çizgisiyle nasıl hizalandığını belirler. Genel olarak “bu etiketi SVG içinde ortala” anlamına gelmez. MDN alignment-baseline başvuru belgesi, tarayıcı desteğinin sınırlarını da belirtir. Bu bağımsız etiket için testi dominant-baseline üzerinde tutun, ardından gerçek dışa aktarma hedefinde doğrulayın.

Bu örnek, tek bir tarayıcıdaki yatay Latin metnini ele alır. Kavisli etiketler farklı bir yerleşim kontrolü gerektirir; SVG'de yol üzerinde metin rehberi, yazıyı kılavuz eğrisinden ayırır. Diğer yazı sistemleri ve dikey yazım için ayrıca taban çizgisi kararları gerekir.

Amblemi yazıdan ayrı tutun

Zaten temiz bir vektör ambleminiz varsa onu koruyun ve etiketi düzenlenebilir metin olarak yeniden oluşturun. Etiketi taşımak veya bir yazı tipi seçmek vektörleştirme gerektirmez.

Amblem yalnızca PNG veya JPG olarak mevcutsa PerfectVector'ın logo vektörleştirme aracı, tasarımın bu kısmı için aday bir geometri hazırlayabilir. Dış konturunu ve boşluklarını kontrol edin, ardından seçtiğiniz taban çizgisini kullanarak onu yeniden yazılmış metnin yanına yerleştirin. Vektörleştirme, özgün yazı tipini belirlemez veya raster görüntüden düzenlenebilir tipografiyi geri getirmez.

Markanın yazısını birebir elde etmek için varsa özgün yazı tipini ve vektör varlıklarını kullanın ya da yazıyı bilinçli biçimde yeniden oluşturun. Logo vektörleştirme rehberi, kaynağı koruma, vektörleştirme ve yeniden çizme seçenekleri arasında karar vermenize yardımcı olur.

Teslimden önce gerçek metni ve yazı tipini kontrol edin, amblem ve yazı birleşimini son boyutunda inceleyin ve dışa aktarılan SVG'yi kullanılacağı yerde yeniden açın. Teslim kopyasında metin vektör yollarına dönüştürülmüşse düzenlenebilir ana dosyayı saklayın.

Sık sorulan sorular

dominant-baseline="middle" ile central aynı şey mi? Hayır. Middle, x yüksekliğiyle ilişkili bir taban çizgisi kullanırken central, em kutusuyla ilişkili merkezi yazı tipi taban çizgisini kullanır. Konumları farklı olabilir ve ikisi de her sözcüğün optik olarak ortalanmasını garanti etmez.

text-anchor="middle", SVG metnini dikey olarak ortalar mı? Normal yatay metinde text-anchor, x koordinatının çevresindeki yatay yerleşimi kontrol eder. Dikey taban çizgisini dominant-baseline ile ayrıca seçin, ardından sonucu kullanılacak yazı tipinde inceleyin.

getBBox, görünen harfleri tam olarak ortalayabilir mi? Tarayıcının bildirdiği SVG metin kutusunu ortalayabilir. Metin sınırları, boyanan harflerin ötesinde glif hücresi boşluğu içerebildiğinden bu hesaplama optik ortalamayı veya konturlara tam hizalamayı garanti etmez.

Kaynaklar

1. W3C — SVG baseline alignment — Alphabetic, middle ve central taban çizgilerini tanımlar.
2. MDN — dominant-baseline — Taban çizgisi tablolarını, yazı tipi sezgisel yöntemlerini ve CSS önceliğini açıklar.
3. MDN — text-anchor — Metin parçalarının verilen bir konumun çevresine nasıl sabitlendiğini belgeler.
4. W3C — SVG bounding boxes — Metin sınırlarında kullanılan glif hücresi modelini açıklar.
5. MDN — FontFaceSet.ready — Yazı tiplerinin yüklenmesinin ve yerleşimin ne zaman tamamlandığını tanımlar.
6. MDN — getBBox — Yerel SVG sınırlarını ve hesaba katılmayan dönüşümleri belgeler.
7. MDN — alignment-baseline — Üst öğenin taban çizgisine hizalamayı ve tarayıcı desteğinin sınırlarını açıklar.

Yeniden oluşturduğunuz logonun hâlâ düzenlenebilir bir ambleme ihtiyacı varsa PerfectVector ile bir SVG adayı hazırlayın, elde edilen dış konturu inceleyin, ardından düzenlenebilir yazıyla birleştirip kullanılacağı son ortamda hizalamayı kontrol edin.