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

• "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 {l:20,40,70} 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

[roxie]

svg’ye dönüştürmekten çok da farklı değil herhalde diye düşünmüştüm ama GeekNews’te hemen bir kullanım örneği çıkıverdi. Güzel bir fikirmiş. {p:100} {b:50,50,50} {p:100}

[winterjung]

{p:75} {l:40,10,10,40} {p:75}

[shakespeares]

{p:75} {l:40,10,10,40} {p:75}
Vay be..

[xguru]

Böyle bir kullanım şekli de mi var?!

[crawler]

ahahahahaha

[bichi]

Hahahahaha

[xguru]

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 😀😃😄😁😆😅😍🥰😘

[humblebee]

{p:75} {l:40,10,10,40} {p:75} 🙂

[crawler]

Vay be, acayip ilginçmiş hahahaha

[onestone]

Yukarı yönlü grafik~ {b:10,20,40,60,80,100}

[logone72]

{l:10,50,30,80,20}

[jungkeuny]

{l:10,50,30,80,20}

[aer0700]

{p:75} {l:45,30,10,10,30,45} {p:75}

[lazydonkey456]

{p:65} {l:70,0,70,0,70} {p:65}

[duky8n]

{p:5} {l:60,0,50,50,0,60} {p:5}

[aciddust]

{p:75} {l:40,10,10,40} {p:75} Çok tatlıyyyyyyyyy

[filab]

{b:30,70,50,30}

[nvrshowfear]

{p:75} {l:40,10,10,40} {p:75}

[syate]

{p:75} {l:40,10,40} {p:75}

[syate]

{p:75} {l:40,10,10,10,10,10,40} {p:75}

[gilsport]

{b:30,70,90,64,27,42}

[unknowncyder]

{b:30,70,90,64,27,42,42,27,64,90,70,30}

[alstj158]

Google Material Symbols da ikonları ligatürlerle uyguluyor gibi; ilginçmiş.

[holywork]

Çok iyi

[akarin]

{l:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15}

[recast7838]

{b:30,70,50,90}

[sigco]

{l:40,10,10,40} {p:75}

[kimjeongwonn]

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}

[seoseonyu]

Vay be haha çok ilginçmiş.