SVG textLength: Harfleri bozmadan etiketi sığdırın

Bir SVG etiketinin belirli bir uzunlukta olması gerekiyorsa ve aralıklarda küçük bir düzeltme kabul edilebiliyorsa, textLength özelliğini lengthAdjust="spacing" ile kullanın. Glif biçimleri değişmeden kalır. spacingAndGlyphs seçerseniz görüntü oluşturma motoru, harflerin kendilerini metin satırı boyunca esnetebilir veya sıkıştırabilir. SVG metin belirtiminde tanımlanan iki mod bunlardır.

Dikkat edilmesi gereken nokta hedeftir: textLength, azami genişlik değil, istenen uzunluktur. Uzun bir etiketi sıkıştırabildiği gibi kısa bir etiketin aralıklarını da açabilir. Ayrıca metni yeni satırlara bölmez.

Her ayarlama neleri değiştirir?

textLength ayarlanıp lengthAdjust değeri verilmediğinde varsayılan mod spacing olur. MDN'nin textLength başvuru sayfası, istenen uzunluk ile ayarlama modunun birlikte nasıl çalıştığını açıklar.

Standart marka tasarımlarında küçük bir düzeltme yapın ve sonucu inceleyin. Büyük ölçüde küçültülmesi gereken bir etikette genellikle daha küçük yazı boyutu, daha kısa ifade veya yerleşimde daha geniş alan tercih edilmelidir.

Aynı hedef uzunlukta kısa ve uzun etiket

Özgün bir baklava biçimli amblem çizdik ve Abel Regular yazı tipinde, 64 SVG birimlik yazı boyutunda iki düzenlenebilir metin etiketini test ettik. İstenen yazı tipi yüklendikten sonra tarayıcı, PINE metnini yaklaşık 115.6 birim, PINE & FIELD metnini ise 325.3 birim olarak ölçtü. Ayarlanmış her iki satır da 240 birim istiyor.

Aynı hedef, farklı tipografi

Kısa etikette spacing, göze çarpan boşluklar oluşturur. Uzun etikette ise harfleri birbirine yaklaştırıp sıkıştırır. Her iki durumda da glifler biçimlerini korur, ancak iki sonuç da bu tasarıma uygun değildir. spacingAndGlyphs satırı, yazı tipinin oranlarını görünür biçimde değiştirerek aynı uzunluğa ulaşır.

Testimizde uygulama içi tarayıcıdaki Chrome 154'ü kullandık. Yatay mesafeyi ilk karakterin başlangıç konumundan son karakterin bitiş konumuna kadar ölçtük; ayarlanmış her satır yaklaşık 240 birime ulaştı. Test örneği tek bir Latin yazı tipi ve soldan sağa basit metin kullanıyor. Bu, farklı görüntü oluşturma motorları veya farklı diller arasında bir uyumluluk testi değildir.

Küçük bir uzunluk düzeltmesi ayarlayın

Yukarıdaki uzun etiket için 330 birim, doğal uzunluğu olan 325.3 birime yakındır. Bu, metni zorla 240 birime indirmekten daha yararlı bir kalibrasyon örneğidir.

Google Fonts Abel dizininden Abel-Regular.ttf ve ona ait OFL.txt dosyasını indirin. Bunları, bu işaretlemeyi içeren HTML dosyasının yanındaki fonts klasörüne koyun, ardından o klasörü yerel bir sunucuyla sunun:

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

Birimsiz 330 değeri SVG'nin koordinat sistemine aittir. SVG'nin tamamını sayfada ölçeklendirmek, ekrandaki bu mesafeyi de ölçeklendirir. Tipografideki bir değişiklik çizimi değiştirmesin diye amblemi ve metni ayrı tutun.

Yazı tipi hâlâ önemlidir. textLength, harfleri vektör yollarına dönüştürmez veya yazı tipini dosyaya dahil etmez. Başka bir bilgisayarda harflerin biçimi değişiyorsa, aralıklarını ayarlamadan önce SVG yazı tipi değişiminin nedenini araştırın.

Azami genişlik için önce ölçün

Kuralınız “kısa etiketlere dokunmayın, yalnızca uzun olanları küçültün” ise, bu koşulu kendiniz ekleyin. Bu örnek yazı boyutunu azaltır; böylece harfler her iki boyutta da küçülürken oranlarını korur.

Bu betiği yukarıdaki SVG'nin arkasına yerleştirin. Sabit 330 birimlik ayarın yerine 240 birimlik azami genişlik uygular:

<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, belgenin yazı tipi yükleme ve yerleşim işlemlerinin tamamlanmasını bekler. Açıkça yapılan load() çağrısı, önce bu örnekte kullanılan yazı tipini ister. İstenen yazı tipi yüklenmeden ölçüm yapmak, sığdırma kararının yedek yazı tipindeki harflere göre verilmesine yol açabilir.

Bu koşul dalında doğal uzunluk gerektiği için getComputedTextLength() çağrısından önce textLength özelliğini kaldırıyoruz. Tarayıcı testimizde, görüntülenen başlangıç ile bitiş arasındaki mesafe değişmiş olsa da bu yöntem spacing satırları için hâlâ doğal uzunluğu bildirdi. Bunun ayarlanmış görsel genişliğin her durumda geçerli bir ölçümü olduğunu varsaymayın.

Bu betikle kısa PINE etiketi 64 birimlik boyutunu korur. Uzun etiket yaklaşık 47.2 birime düşer. Sonucu gerçek görüntüleme veya baskı boyutunda inceleyin. Küçültülen sözcükler fazla küçükse boyutu durmadan azaltmak yerine yerleşimi veya ifadeyi değiştirin. Metin ya da yazı tipi ayarları değiştiğinde sığdırma adımını yeniden çalıştırın.

Son etiketi kullanılacağı ortamda kontrol edin

Sayısal olarak sığması yalnızca bir kontroldür. Son boyutta harf çiftlerine ve amblem ile metin arasındaki boşluğa bakın. Tasarım bir kalibrasyon gerektirmiyorsa sıradan etiketleri doğal aralıklarında tutun.

Birden fazla satır için satırları bilinçli biçimde oluşturup konumlandırın; textLength tek başına satır kaydırma kuralı sağlamaz. Kavisli bir rozet için ayrı SVG'de yol üzerinde metin iş akışını kullanın. Bu rehber, harflerin izlediği taban çizgisini kontrol eder.

Kaynağı düzenlenebilir metinle saklayın, ardından teslim dosyasını onu kullanacak gerçek düzenleyici, tarayıcı veya görüntü oluşturma motorunda açın. SVG dosyası rehberi, aynı uzantıya sahip olmasına rağmen bir SVG'nin neden düzenlenebilir metin, vektör yolları veya gömülü bir görsel içerebildiğini açıklar.

Başlangıç logonuz yalnızca raster görsel olarak mevcutsa, PerfectVector logo vektörleştirme aracı amblem için grafiği geri kazanabilir. Bu yolları inceleyip temizleyin, ardından etiketi sığdırmadan önce sözcükleri düzenlenebilir metin olarak yeniden yazın. Vektörleştirilmiş bir sözcük, yollardan oluşan bir geometridir; textLength onun karakter aralıklarını değiştiremez. Logo vektörleştirme adımlarımız, bu kaynak geri kazanma aşamasını ele alır.

Sık sorulan sorular

textLength yalnızca fazla uzun metni mi küçültür? Hayır. Bir uzunluk ister; dolayısıyla doğal hâli daha kısa olan metni de genişletebilir. Azami genişlik kuralına ihtiyacınız olduğunda etiketin doğal uzunluğunu ölçün ve kendi koşulunuzu uygulayın.

Harf biçimlerini hangi lengthAdjust değeri korur? Glifleri esnetmeden karakter aralıklarını ayarlamak için spacing kullanın. Büyük bir ayarlama yine de göze hoş gelmeyen boşluklar veya çakışmalar oluşturabilir; bu nedenle metni son boyutunda inceleyin.

textLength, bir PNG'den vektörleştirilmiş yazıyı sığdırabilir mi? Harf biçimli yollar üzerinde değil, SVG metni üzerinde çalışır. textLength veya düzenlenebilir karakter aralıkları gerekiyorsa, amblemi ayrı bir vektör grafik olarak tutarken ifadeyi düzenlenebilir metin olarak yeniden yazın.

Kaynaklar

1. W3C — SVG 2 text adjustment — İki modu ve bunların glif biçimleri ile ilerleme mesafeleri üzerindeki etkisini açıklar.
2. MDN — textLength — İstenen uzunluk ve varsayılan spacing modu.
3. MDN — FontFaceSet.ready — Yazı tipi yükleme ve yerleşim işlemlerini beklemek.
4. MDN — getComputedTextLength — SVG metin öğesini ölçmek.
5. Google Fonts — Abel — Özgün karşılaştırmada kullanılan yazı tipi ve lisansı.

Gerekiyorsa raster bir amblemi logo vektörleştirme aracıyla geri kazanın, ardından yazıyı ayrı bir metin öğesi olarak tutun. Metni vektör yollarına dönüştürülmüş bir teslim kopyası veya raster dışa aktarım oluşturmadan önce son etiketi normal boyutta karşılaştırın.