Metin genişliği nasıl ölçülür?

Metin genişliği, belirli bir yazı tipi, boyut ve kalınlıkla işlendiğinde bir karakter dizisinin kapladığı yatay piksel alanını ifade eder. Karakter sayısından farklı olarak, piksel genişliği her glifin orantılı aralığına bağlıdır — "W" harfi çoğu yazı tipinde "i"den çok daha geniştir. Metin genişliğini doğru ölçmek, kullanıcı arayüzü düzeni, etiket kesme, dinamik tuval işleme ve dizeleri sabit genişlikli kaplara sığdırma için önemlidir.

Tarayıcılar, HTML5 Canvas API'sinin measureText() yöntemini ortaya çıkarır ve bu yöntem işlenmiş metin genişliğini ekranda görüntülemeden hesaplar. Ekran dışı bir tuval bağlamına çizerek, herhangi bir yazı tipi ailesi, boyut ve kalınlık kombinasyonu için hassas alt piksel ölçümü elde edilebilir.

Araç açıklaması

Bu araç, Canvas API'sini kullanarak bir veya iki metin dizisinin piksel genişliğini hesaplar. Bir yazı tipi ailesi seçin, yazı tipi boyutunu ve kalınlığını ayarlayın ve işlenmiş piksel genişliğini anında görün. İki dize girildiğinde, karşılaştırma görünümü mutlak farkı ve aralarındaki genişlik oranını gösterir.

Özellikler

  • Tüm web güvenli sistem yazı tiplerini ve özel yüklenen yazı tipi dosyalarını destekler (TTF, OTF, WOFF, WOFF2)
  • Fark ve oran istatistikleriyle aynı anda iki dizeyi karşılaştırın
  • 1 ile 256 px arasında ayarlanabilir yazı tipi boyutu ve dokuz standart yazı tipi kalınlığı değerinin tümü

Nasıl çalışır?

Genişlik, tarayıcının CanvasRenderingContext2D.measureText() API'si kullanılarak ölçülür. Ekran dışı bir <canvas> öğesi oluşturulur, 2D bağlamının yazı tipi özelliği seçilen aile, boyut ve kalınlıkla eşleşecek şekilde ayarlanır ve measureText() sınırlayıcı kutu genişliğini piksel cinsinden döndürür. Özel yazı tipleri, ölçümden önce tarayıcının FontFace kayıt defterine yüklenir, böylece sonuçlar gerçek yazı tipini yansıtır.