Datatype - phông chữ biến đổi chuyển văn bản thành biểu đồ

• Với concept "data as type", hiển thị biểu đồ chỉ bằng văn bản mà không cần JS/thư viện hình ảnh/thư viện dựng hình
• Tận dụng thay thế ligature của OpenType để biến các biểu diễn văn bản đơn giản như {b:30,70,50,90} thành biểu đồ nội tuyến
• Hỗ trợ 3 loại biểu đồ: cột/đường/tròn
  • Biểu đồ cột: {b:30,70,50,90,64,27,72,42} các giá trị phân tách bằng dấu phẩy (mỗi giá trị 0–100), tối đa 20 cột
  • Sparkline: {l:10,50,30,80,20,15,48,72,37} các giá trị phân tách bằng dấu phẩy (mỗi giá trị 0–100), tối đa 20 điểm
  • Biểu đồ tròn: {p:69} {p:43} một giá trị phần trăm đơn trong khoảng 0–100
• Điều chỉnh trực quan bằng cỡ chữ và hai trục biến đổi
  • Width(wdth): 50–150, điều chỉnh khoảng cách, mặc định 100
  • Weight(wght): 100–900, điều chỉnh độ dày nét, mặc định 400
• Có thể dựng ngay giữa các ký tự nên hoạt động nguyên trạng ở mọi nơi có văn bản, như trong thân bài, trong bảng, trong thông điệp log, v.v.
  • Cũng dễ chèn vào bảng/dashboard/báo cáo
• Trên web, có thể áp dụng chỉ với 3 dòng CSS
  • Tải phông bằng @font-face → chỉ định font-family: 'Datatype' → viết <span class="chart">{l:20,40,70}</span> trong HTML
  • Cung cấp thêm tùy chọn điều chỉnh như wdth bằng font-variation-settings
• Desktop: sau khi cài TTF, có thể dùng trong các ứng dụng hỗ trợ ligature OpenType (Adobe, v.v.)
• Hiện cũng được phân phối trên Google Fonts nên có thể dùng mà không cần tự host
• Cung cấp 15 instance có tên (9 weight tiêu chuẩn + 6 tổ hợp độ rộng tùy chỉnh)
  • Bao gồm các preset theo mục đích sử dụng như Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900)
• Số lượng glyph: 10.850 cho mỗi master, tổng cộng 9 master
• Kích thước tệp: TTF 4.0MB / WOFF2 78KB, độ bao phủ Unicode là Google Fonts Latin Core
• Hỗ trợ trình duyệt: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• Giải thích cách hoạt động

  • Tận dụng tính năng thay thế ligature của OpenType (ligature substitution)
  • Ligature gốc là tính năng thay các tổ hợp chữ như fi, fl bằng một glyph duy nhất
  • Datatype ứng dụng cơ chế này để thay toàn bộ mẫu như {b:30,70,50,90} bằng một glyph biểu đồ duy nhất {b:30,70,50,90}
  • Chỉ cần trình duyệt hoặc ứng dụng hỗ trợ tính năng ligature của phông là có thể dựng ngay mà không cần chạy JavaScript
• SIL Open Font License 1.1
• Có thể xem các ví dụ áp dụng thực tế tại trang Specimen

[winterjung]

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

[shakespeares]

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

[xguru]

Có cả cách ứng dụng như thế này nữa sao?!

[crawler]

kkkkkkkkkk

[bichi]

hahaha

[sigco]

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

[crawler]

Wow, siêu thần kỳ luôn hahaha

[xguru]

GeekNews vốn cố gắng hạn chế dùng hình ảnh khi có thể, nên khi xuất hiện những giải pháp nhẹ dựa trên văn bản như thế này thì chúng tôi cũng cố gắng áp dụng nếu có thể.
Google công bố phông chữ emoji đơn sắc Noto Emoji cũng đã được áp dụng 4 năm rồi mà đến giờ vẫn đang dùng rất tốt 😀😃😄😁😆😅😍🥰😘

[kimjeongwonn]

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

[seoseonyu]

Wow haha, thú vị thật.