Datatype - font variabel yang mengubah teks menjadi grafik

 (github.com/franktisellano)
28 poin oleh xguru 4 jam lalu | 10 komentar | Bagikan ke WhatsApp
  • 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 <span class="chart">{l:20,40,70}</span> 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

Bacaan terkait

10 komentar

 
winterjung 4 jam lalu

{p:75} {l:40,10,10,40} {p:75}
 
shakespeares 2 jam lalu

{p:75} {l:40,10,10,40} {p:75}
Wow..
 
xguru 3 jam lalu

Ada juga cara pemanfaatan seperti ini?!
 
crawler 4 jam lalu

Wkwkwkwkwk
 
bichi 1 jam lalu

Wkwkwkwk
 
sigco 1 jam lalu

{l:40,10,10,40} {p:75}
 
crawler 4 jam lalu

Wah, keren banget wkwkwk
 
xguru 4 jam lalu

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

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}
 
seoseonyu 4 jam lalu

Wah haha, menarik sekali.