Datatype - metni grafiğe dönüştüren değişken yazı tipi

 (github.com/franktisellano)
28 puan yazan xguru 4 시간 전 | 10 yorum | WhatsApp'ta paylaş
  • "veriyi tipografi olarak (data as type)" konseptiyle, JS/görsel/rendering kütüphaneleri olmadan yalnızca metinle grafik gösterimi
  • OpenType ligatür değiştirme özelliğini kullanarak {b:30,70,50,90} gibi basit metin ifadelerini satır içi grafiklere dönüştürür
  • Çubuk/çizgi/pasta olmak üzere 3 grafik türünü destekler
    • Çubuk grafik: {b:30,70,50,90,64,27,72,42} virgülle ayrılmış değerler (her biri 0–100), en fazla 20 çubuk
    • Sparkline: {l:10,50,30,80,20,15,48,72,37} virgülle ayrılmış değerler (her biri 0–100), en fazla 20 nokta
    • Pasta grafik: {p:69} {p:43} 0–100 arasında tek bir yüzde değeri
  • Yazı tipi boyutu ve iki değişken eksen ile görsel ayar
    • Width(wdth): 50–150, aralık ayarı, varsayılan 100
    • Weight(wght): 100–900, çizgi kalınlığı ayarı, varsayılan 400
  • Harflerin arasında da render edilebildiği için metin ortasında, tablo içinde, log mesajlarında yani metnin girebildiği her yerde doğrudan çalışır
    • Tablo/pano/rapor gibi yerlerde de kolayca gömülebilir
  • Web'de yalnızca 3 satır CSS ile kullanılabilir
    • @font-face ile fontu yükle → font-family: 'Datatype' ata → HTML'de <span class="chart">{l:20,40,70}</span> yaz
    • font-variation-settings ile wdth gibi ek ayar seçenekleri sunulur
  • Masaüstünde: TTF kurulduktan sonra OpenType ligatür destekleyen uygulamalarda (Adobe vb.) kullanılabilir
  • Google Fonts üzerinde de dağıtılıyor, bu sayede ayrı barındırma olmadan kullanılabilir
  • 15 adlandırılmış instance sunar (standart 9 Weight + özel genişlik kombinasyonlu 6 adet)
    • Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900) gibi kullanım amacına göre hazır ayarlar içerir
  • Glif sayısı: master başına 10.850, toplam 9 master yapı
  • Dosya boyutu: TTF 4.0MB / WOFF2 78KB, Unicode kapsamı Google Fonts Latin Core
  • Tarayıcı desteği: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

  • Çalışma şekli

    • OpenType ligatür değiştirme (ligature substitution) özelliğini kullanır
    • Normalde ligatür, fi, fl gibi harf birleşimlerini tek bir glifle değiştiren özelliktir
    • Datatype bunu uyarlayarak {b:30,70,50,90} gibi bir kalıbın tamamını tek bir grafik glifi {b:30,70,50,90} ile değiştirir
    • Tarayıcı veya uygulama font ligatür özelliğini destekliyorsa JavaScript çalıştırmadan anında render edilir
  • SIL Open Font License 1.1
  • Specimen sitesinde gerçek kullanım örnekleri görülebilir

İlgili okumalar

10 yorum

 
winterjung 4 시간 전

{p:75} {l:40,10,10,40} {p:75}
 
shakespeares 2 시간 전

{p:75} {l:40,10,10,40} {p:75}
Vay be..
 
xguru 3 시간 전

Böyle bir kullanım şekli de mi var?!
 
crawler 3 시간 전

ahahahahaha
 
bichi 1 시간 전

Hahahahaha
 
sigco 57 분 전

{l:40,10,10,40} {p:75}
 
crawler 4 시간 전

Vay be, acayip ilginçmiş hahahaha
 
xguru 4 시간 전

GeekNews mümkün olduğunda görsel kullanmıyor; bu yüzden böyle metin tabanlı hafif çözümler çıktığında, mümkünse kullanıma almayı deniyoruz.
Google, siyah-beyaz emoji fontu Noto Emoji'yi duyurdu da uygulanalı 4 yıl oldu ve hâlâ gayet iyi kullanıyoruz 😀😃😄😁😆😅😍🥰😘
 
kimjeongwonn 3 시간 전

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}
 
seoseonyu 3 시간 전

Vay be haha çok ilginçmiş.