Datatype - uma fonte variável que transforma texto em gráficos

• Com o conceito de "dados como tipografia (data as type)", exibe gráficos apenas com texto, sem JS/imagens/bibliotecas de renderização
• Usa substituição de ligaduras OpenType para converter expressões de texto simples como {b:30,70,50,90} em gráficos inline
• Suporta 3 tipos de gráfico: barras/linha/pizza
  • Gráfico de barras: {b:30,70,50,90,64,27,72,42} valores separados por vírgula (cada um de 0–100), até 20 barras
  • Sparkline: {l:10,50,30,80,20,15,48,72,37} valores separados por vírgula (cada um de 0–100), até 20 pontos
  • Gráfico de pizza: {p:69} {p:43} um único valor percentual entre 0–100
• Ajuste visual com tamanho da fonte e dois eixos variáveis
  • Width (wdth): 50–150, ajusta o espaçamento, padrão 100
  • Weight (wght): 100–900, ajusta a espessura da linha, padrão 400
• Como pode ser renderizado até mesmo entre caracteres, funciona como está em qualquer lugar onde caiba texto, como no meio do corpo do texto, dentro de tabelas e em mensagens de log
  • Também pode ser inserido facilmente em tabelas/dashboards/relatórios
• Na web, pode ser adotado com apenas 3 linhas de CSS
  • Carregue a fonte com @font-face → defina font-family: 'Datatype' → escreva no HTML {l:20,40,70}
  • font-variation-settings oferece opções adicionais de ajuste, como wdth
• Desktop: após instalar o TTF, pode ser usado em apps com suporte a ligaduras OpenType (Adobe etc.)
• Também é distribuída no Google Fonts, então pode ser usada sem hospedagem separada
• Oferece 15 instâncias nomeadas (9 Weights padrão + 6 combinações personalizadas de largura)
  • Inclui presets por uso, como Thin UltraCondensed (50/100), SemiBold Condensed (75/600), Medium Expanded (125/500) e Black ExtraExpanded (150/900)
• Quantidade de glifos: 10.850 por master, total de 9 masters
• Tamanho do arquivo: TTF 4.0MB / WOFF2 78KB, cobertura Unicode é Google Fonts Latin Core
• Suporte de navegador: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• Explicação de funcionamento

  • Usa o recurso de substituição de ligaduras OpenType (ligature substitution)
  • Originalmente, ligaduras são um recurso que substitui combinações como fi, fl por um único glifo
  • O Datatype aplica isso para substituir um padrão inteiro como {b:30,70,50,90} por um único glifo de gráfico {b:30,70,50,90}
  • Se o navegador ou app der suporte ao recurso de ligaduras da fonte, ele é renderizado imediatamente sem executar JavaScript
• SIL Open Font License 1.1
• No site Specimen, é possível ver casos reais de uso

[roxie]

Eu achei que não fosse tão diferente de converter para SVG, mas no GeekNews já apareceu um caso de uso na hora. Foi uma boa ideia mesmo. {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}
Uau..

[xguru]

Que jeito de usar é esse?!

[crawler]

kkkkkkkkkk

[bichi]

kkkkkkk

[xguru]

No GeekNews, evitamos usar imagens sempre que possível, então, quando surge uma solução leve baseada em texto como essa, tentamos adotá-la sempre que dá.
Google revela a fonte de emoji em preto e branco Noto Emoji também já está aplicada há 4 anos, e ainda está funcionando muito bem 😀😃😄😁😆😅😍🥰😘

[humblebee]

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

[crawler]

Nossa, isso é muito incrível kkkkk

[onestone]

Gráfico em alta~ {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} Que coisinha maaaais fofa

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

Os Material Symbols do Google também implementam ícones com ligaduras, interessante.

[holywork]

Muito bom

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

Uau kkk, que curioso.