Datatype - une police variable qui transforme le texte en graphiques

• Avec le concept « data as type », elle permet d’afficher des graphiques uniquement avec du texte, sans JS, image ni bibliothèque de rendu
• Exploite la substitution de ligatures OpenType pour convertir de simples expressions textuelles comme {b:30,70,50,90} en graphiques inline
• Trois types de graphiques pris en charge
  • Histogramme : {b:30,70,50,90,64,27,72,42} valeurs séparées par des virgules (0 à 100 chacune), jusqu’à 20 barres
  • Sparkline : {l:10,50,30,80,20,15,48,72,37} valeurs séparées par des virgules (0 à 100 chacune), jusqu’à 20 points
  • Camembert : {p:69} {p:43} une seule valeur en pourcentage entre 0 et 100
• Ajustement visuel via la taille de police et deux axes variables
  • Width (wdth) : 50–150, ajuste l’espacement, valeur par défaut 100
  • Weight (wght) : 100–900, ajuste l’épaisseur des traits, valeur par défaut 400
• Comme le rendu fonctionne aussi au milieu du texte, cela marche partout où du texte peut être affiché : au fil du contenu, dans des tableaux, des messages de log, etc.
  • Insertion facile aussi dans des tableaux de bord, dashboards et rapports
• Sur le web, l’intégration se fait avec seulement 3 lignes de CSS
  • Charger la police avec @font-face → définir font-family: 'Datatype' → écrire dans le HTML {l:20,40,70}
  • font-variation-settings permet des réglages supplémentaires comme wdth
• Sur desktop : utilisable après installation du TTF dans des applications prenant en charge les ligatures OpenType (Adobe, etc.)
• Également disponible sur Google Fonts, donc utilisable sans hébergement séparé
• 15 instances nommées fournies (9 poids standard + 6 combinaisons de largeur personnalisées)
  • Comprend des préréglages selon l’usage comme Thin UltraCondensed (50/100), SemiBold Condensed (75/600), Medium Expanded (125/500), Black ExtraExpanded (150/900), etc.
• Nombre de glyphes : 10 850 par master, pour un total de 9 masters
• Taille des fichiers : TTF 4.0MB / WOFF2 78KB, couverture Unicode : Google Fonts Latin Core
• Compatibilité navigateurs : Chrome 62+, Firefox 62+, Safari 11+, Edge 17+

• Explication du fonctionnement

  • Utilise la fonctionnalité de substitution de ligatures OpenType (ligature substitution)
  • À l’origine, les ligatures remplacent des combinaisons comme fi ou fl par un seul glyphe
  • Datatype applique ce principe pour remplacer un motif entier comme {b:30,70,50,90} par un unique glyphe de graphique {b:30,70,50,90}
  • Dès lors que le navigateur ou l’application prend en charge les ligatures de police, le rendu se fait immédiatement sans exécution de JavaScript
• SIL Open Font License 1.1
• Le site Specimen permet de voir des exemples d’usage réels

[winterjung]

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

[shakespeares]

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

[xguru]

Une telle utilisation ?!

[crawler]

MDRRRRRRR

[bichi]

MDRRRR

[roxie]

Je pensais que ce n’était pas très différent d’une conversion en SVG, mais voilà qu’un cas d’usage concret est apparu directement sur GeekNews. C’était une bonne idée. {p:100} {b:50,50,50} {p:100}

[xguru]

Comme cela semblait bien correspondre à GeekNews, je l’ai présenté et je l’ai aussi introduit à l’essai comme fonctionnalité bêta. Sa taille est petite, donc même en l’hébergeant soi-même, ce n’est pas trop contraignant.
Si vous saisissez par exemple {b:30,70,90,64,27,42} {b:30,70,90,64,27,42} ou {l:10,50,30,80,20} {l:10,50,30,80,20}, seul ce type de chaîne est détecté puis entouré avec la police.
Il faut saisir uniquement la chaîne, sans backticks (`).

[xguru]

GeekNews utilise déjà les images le moins possible, donc quand ce type de solution légère basée sur le texte apparaît, nous essayons de l’adopter dès que possible.
Google publie la police d’émojis noir et blanc Noto Emoji est également appliquée depuis 4 ans, et nous l’utilisons toujours très bien 😀😃😄😁😆😅😍🥰😘

[humblebee]

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

[crawler]

Waouh, c’est vraiment super fascinant mdr

[onestone]

Graphique en hausse~ {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} C’est trop mignooooooon

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

Les Material Symbols de Google implémentent aussi les icônes avec des ligatures, c’est intéressant.

[holywork]

C’est vraiment très bien.

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

Waouh haha, c'est fascinant.