Créer des graphes et des charts sans JS, juste avec une web font

Aujourd'hui le BlogDuWebdesign vous présente la font AtF Spark, une police d'écriture permettant d'insérer de manière extrêmement simple des graphes dans vos textes et webdesigns.

Pour créer des graphes, vous avez de nombreux choix à votre disposition.

Vous pourriez par exemple tout à fait créer entièrement vos graphes en SVG, où utiliser un outil Javascript qui le fera pour vous. Cette solution est parfaite si vous avez besoin de gros graphes dynamiques, mais sa mise en place ne sera pas des plus simples, et l'information transmise par vos graphes sera perdue lors d'un copié-collé.

Vous pourriez aussi utiliser une technique de manipulation d'images comme Imagemagick pour générer vos graphes cote serveur sous la forme d'une image. Ici, il serait effectivement possible de copier-coller le résultat (qui après génération n'est qu'une image finalement), mais la mise en place d'une solution de ce genre serait complexe.

Je vous propose aujourd'hui une troisieme solution : une simple police d'ecriture !

AtF Spark, une font pour créer des graphes

Comme le titre de ce paragraphe l'indique si bien, AtF Spark est une police d'écriture permettant de créer extrêmement simplement de plusieurs types de graphes.

Pour créer ce genre de graphes, téléchargez et installez la ou les fonts qui vous intéressent dans le CSS de votre page, puis définissez une classe avec la font de votre choix. Les développeurs de la ressource vous conseillent d'activer la propriété "calt" pour les navigateurs les plus anciens, qui permet le fonctionnement des ligatures.

.class {
  font-variant-ligatures: contextual;
  -moz-font-feature-settings: "calt";
  -webkit-font-feature-settings: "calt";
  font-feature-settings: "calt";
}

Une fois que tout cela est fait, vous n'avez plus qu'a créer un graphe avec la syntaxe suivante ! 123{30,60,90}456.

Comme vous pouvez le remarquer, les graphes sont tout à fait dynamiques et changent en même temps que changent les données. De plus, étant une simple font, il est tout à fait possible de copier-coller un des graphs, ce qui nous permet d'obtenir les chiffres nécessaires à sa construction. Pas forcément aussi lisible, mais l'information est totalement conservée.