Datatype - una fuente variable que convierte texto en gráficos

 (github.com/franktisellano)
28 puntos por xguru 4 시간 전 | 10 comentarios | Compartir por WhatsApp
  • Con el concepto de "datos como tipografía (data as type)", permite mostrar gráficos solo con texto sin bibliotecas de JS/imágenes/renderizado
  • Aprovecha la sustitución de ligaduras de OpenType para convertir expresiones de texto simples como {b:30,70,50,90} en gráficos en línea
  • Compatible con 3 tipos de gráficos: barras/líneas/pastel
    • Gráfico de barras: {b:30,70,50,90,64,27,72,42} valores separados por comas (cada uno de 0–100), máximo 20 barras
    • Sparkline: {l:10,50,30,80,20,15,48,72,37} valores separados por comas (cada uno de 0–100), máximo 20 puntos
    • Gráfico de pastel: {p:69} {p:43} un solo valor porcentual entre 0 y 100
  • Ajuste visual mediante el tamaño de fuente y dos ejes variables
    • Width(wdth): 50–150, ajusta el espaciado, valor predeterminado 100
    • Weight(wght): 100–900, ajusta el grosor de la línea, valor predeterminado 400
  • Puede renderizarse incluso entre caracteres, así que funciona tal cual en cualquier lugar donde entre texto, como en medio del contenido, dentro de tablas o en mensajes de log
    • También se puede insertar fácilmente en tablas/dashboards/reportes
  • En la web se puede implementar solo con 3 líneas de CSS
    • Cargar la fuente con @font-face → definir font-family: 'Datatype' → escribir en HTML <span class="chart">{l:20,40,70}</span>
    • También ofrece opciones adicionales de ajuste, como wdth, mediante font-variation-settings
  • Escritorio: tras instalar el TTF, puede usarse en apps compatibles con ligaduras OpenType (Adobe, etc.)
  • También se distribuye en Google Fonts, así que puede usarse sin hosting propio
  • Incluye 15 instancias nombradas (9 pesos estándar + 6 combinaciones de ancho personalizadas)
    • Incluye presets según el caso de uso, como Thin UltraCondensed(50/100), SemiBold Condensed(75/600), Medium Expanded(125/500), Black ExtraExpanded(150/900), etc.
  • Cantidad de glifos: 10,850 por maestro, con un total de 9 maestros
  • Tamaño de archivo: TTF 4.0MB / WOFF2 78KB, cobertura Unicode de Google Fonts Latin Core
  • Compatibilidad de navegadores: Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

  • Cómo funciona

    • Utiliza la función de sustitución de ligaduras OpenType (ligature substitution)
    • Originalmente, las ligaduras sustituyen combinaciones de letras como fi, fl por un solo glifo
    • Datatype aplica esta idea para sustituir un patrón completo como {b:30,70,50,90} por un único glifo de gráfico {b:30,70,50,90}
    • Si el navegador o la app solo admite la función de ligaduras de la fuente, se renderiza al instante sin ejecutar JavaScript
  • SIL Open Font License 1.1
  • En el sitio Specimen se pueden ver casos reales de uso

Lecturas relacionadas

10 comentarios

 
winterjung 4 시간 전

{p:75} {l:40,10,10,40} {p:75}
 
shakespeares 2 시간 전

{p:75} {l:40,10,10,40} {p:75}
Guau..
 
xguru 3 시간 전

¿Así también se puede usar?!
 
crawler 4 시간 전

jajajajaja
 
bichi 1 시간 전

jajajaja
 
sigco 58 분 전

{l:40,10,10,40} {p:75}
 
crawler 4 시간 전

Wow, esto está increíble jajajaja
 
xguru 4 시간 전

GeekNews ya procura no usar imágenes en lo posible, así que cuando aparecen este tipo de soluciones ligeras basadas en texto, intentamos adoptarlas siempre que se puede.
Google publica la fuente de emojis en blanco y negro Noto Emoji ya lleva 4 años aplicada y todavía la seguimos usando bien 😀😃😄😁😆😅😍🥰😘
 
kimjeongwonn 3 시간 전

{b:90,100,100,90,20,10,0,10,20,90,100,100,90}
 
seoseonyu 3 시간 전

Guau jaja, qué curioso.