Datatype - font variabel yang mengubah teks menjadi grafik

• Dengan konsep "data sebagai tipografi (data as type)", menampilkan grafik hanya dengan teks tanpa library JS/gambar/rendering
• Memanfaatkan substitusi ligatur OpenType untuk mengubah representasi teks sederhana seperti {b:30,70,50,90} menjadi grafik inline
• Mendukung 3 jenis grafik: batang/garis/pai
  • Grafik batang: {b:30,70,50,90,64,27,72,42} nilai dipisahkan koma (masing-masing 0–100), maksimal 20 batang
  • Sparkline: {l:10,50,30,80,20,15,48,72,37} nilai dipisahkan koma (masing-masing 0–100), maksimal 20 titik
  • Grafik pai: {p:69} {p:43} satu nilai persentase tunggal antara 0–100
• Penyesuaian visual melalui ukuran font dan dua sumbu variabel
  • Width(wdth): 50–150, mengatur jarak, default 100
  • Weight(wght): 100–900, mengatur ketebalan garis, default 400
• Bisa dirender di antara karakter, sehingga bekerja apa adanya di semua tempat yang menerima teks seperti di tengah paragraf, di dalam tabel, atau pesan log
  • Juga mudah disisipkan ke tabel/dasbor/laporan
• Di web, bisa diterapkan hanya dengan 3 baris CSS
  • Muat font dengan @font-face → tetapkan font-family: 'Datatype' → tulis {l:20,40,70} di HTML
  • Menyediakan opsi penyesuaian tambahan seperti wdth lewat font-variation-settings
• Desktop: setelah memasang TTF, dapat digunakan di aplikasi yang mendukung ligatur OpenType (Adobe, dll.)
• Didistribusikan juga lewat Google Fonts sehingga bisa dipakai tanpa hosting terpisah
• Menyediakan 15 instance bernama (9 Weight standar + 6 kombinasi lebar kustom)
  • Termasuk preset untuk berbagai kebutuhan seperti Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900)
• Jumlah glif: 10.850 per master, total terdiri dari 9 master
• Ukuran file: TTF 4.0MB / WOFF2 78KB, cakupan Unicode adalah Google Fonts Latin Core
• Dukungan browser: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• Penjelasan cara kerja

  • Memanfaatkan fitur substitusi ligatur OpenType (ligature substitution)
  • Ligatur pada dasarnya adalah fitur yang mengganti kombinasi huruf seperti fi, fl menjadi satu glif
  • Datatype menerapkan konsep ini untuk mengganti seluruh pola seperti {b:30,70,50,90} menjadi satu glif grafik {b:30,70,50,90}
  • Selama browser atau aplikasi mendukung fitur ligatur font, grafik akan langsung dirender tanpa menjalankan JavaScript
• SIL Open Font License 1.1
• Contoh penerapan nyata bisa dilihat di situs Specimen

[winterjung]

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

[shakespeares]

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

[xguru]

Ada juga cara pemanfaatan seperti ini?!

[crawler]

Wkwkwkwkwk

[bichi]

Wkwkwkwk

[roxie]

Saya sempat berpikir tidak jauh berbeda dengan mengubahnya menjadi SVG, tetapi ternyata langsung muncul contoh pemanfaatannya di GeekNews. Ide yang bagus juga. {p:100} {b:50,50,50} {p:100}

[xguru]

GeekNews sebisa mungkin tidak menggunakan gambar, jadi ketika muncul solusi ringan berbasis teks seperti ini, kami berusaha menerapkannya jika memungkinkan.
Google merilis font emoji hitam-putih Noto Emoji juga sudah diterapkan selama 4 tahun dan masih dipakai dengan baik 😀😃😄😁😆😅😍🥰😘

[humblebee]

Datatype - font variabel yang mengubah teks menjadi chart

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

[crawler]

Wah, keren banget wkwkwk

[onestone]

Grafik yang terus naik~ {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]

Datatype - font variabel yang mengubah teks menjadi chart

[aciddust]

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

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

Ikon Material Symbols dari Google juga tampaknya mengimplementasikan ikon dengan ligatur, menarik juga.

[holywork]

Sangat bagus

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

Wah haha, menarik sekali.