La micro typographie appliquée sur le Web

Depuis Gutenberg et l’invention de l’imprimerie, la typographie a été dotée de nombreux outils améliorant la lisibilité. Le Web, bien que souvent comparé à l’imprimerie, en détruit de nombreuses spécificités, à la fois par ses limitations techniques et par un manque de connaissance des contributeurs à l’ère de l’informatique.

Les règles de la typographie fine (parfois qualifiée de micro typographie) sont parfaitement applicables à notre média de prédilection—et sans effort.

Section intitulée les-regles-a-appliquerLes règles à appliquer

Connaissez vous l’apostrophe ? Ce signe n’est pas sur votre clavier, mais il est présent deux fois dans cette phrase.

La vraie apostrophe typographique française a disparu de nos publications (’, et non '). Même la presse en ligne ne fait pas toujours l’effort. Elle est facile à reconnaître, car elle ressemble à une virgule en position haute, tandis que l’apostrophe droite, plus répandue, est aussi moche qu’elle est facile à saisir.

Que dire alors des guillemets ? En français, ils sont dits typographiques : « », mais il est très rare de les voir utilisés à bon escient sur le Web, le signe " étant beaucoup plus simple à saisir, même s’il est moins clair et lisible ! La règle (telle que définie dans le Lexique des règles typographiques en usage à l’Imprimerie nationale) consiste à placer les citations entre ces guillemets, entouré d’un espace insécable.

Enchaînons avec les espaces (dont j’ai parlé en détail à SudWeb 2013¹). Le double point (:) nécessite d’être précédé par une espace insécable normale. C’est un caractère que vous connaissez bien :   ! Les autres signes bipoints (; ? !) eux nécessitent une espace fine insécable avant et une espace normale après. La grande blague de cette histoire, c’est que vous ne pouvez pas saisir l’espace fine insécable avec votre clavier si vous êtes sous Mac ou Linux (et vous devrez taper la simplissime commande Alt +202F sous Windows).

Toutes ces règles, et bien d’autres encore, varient en fonction des pays et des langues. De plus, il n’existe aucun standard : chacun est libre de choisir son code typographique², certains étant plus influents que d’autres. La seule obligation d’un rédacteur reste la consistance.

Section intitulée les-solutions-techniquesLes solutions techniques

Dans l’écosystème PHP, la principale solution se nomme PHP SmartyPants (portage de Smartypants), mais cette solution ne concerne que certaines règles de typographie (les quotes anglaises et les ellipses).

Michel Fortin a donc amélioré SmartyPants pour créer SmartyPants Typographer, une version objet et configurable (donc utilisable avec plusieurs codes typographiques) de PHP SmartyPants. Il n’y a aucun test unitaire, ni de référence de configuration pour le support des différentes langues, et l’utilisation de constantes pour définir les styles de guillemets à utiliser empêche de corriger du texte dans deux langues au sein du même script.

Une autre solution plus récente (2010), elle aussi basée sur SmartyPants, se nomme PHP Typography. Problème : la documentation manque, le projet n’est pas maintenu, n’a ni licence ni tests et, comme les autres, se base uniquement sur des expressions régulières pour parser le code HTML.

Section intitulée introducing-jolitypoIntroducing JoliTypo

Comme vous pouvez le constater, aucune des solutions connues à ce jour ne me convenait, j’ai donc développé JoliTypo.

JoliTypo est une librairie toute simple, qui prend votre code HTML et le modifie via des règles appelées Fixers, dont la liste est configurable. Cette librairie est :

• multi-langue / pays / code typographique : vous avez la main sur la liste des Fixers à appliquer ;
• intégralement testée : modifier du code HTML à la volée est un exercice périlleux, pas question de développer en aveugle ;
• facile à intégrer dans un projet PHP moderne (compatible avec Composer, PSR-0) ;
• robuste (elle utilise \DomDocument pour parcourir et modifier le code HTML) ;
• sélective, certains éléments HTML comme pre, script, style… sont protégés contre l’édition ;
• capable de corriger les guillemets, les apostrophes, les espaces, les ellipses, les signes mathématiques, les tirets ainsi que l’hyphénation ;
• entièrement libre et ouverte, publiée sous licence MIT.

Le fonctionnement est très simple :

<?php
use JoliTypo\Fixer;

$fixer = new Fixer(array("FrenchQuotes", "FrenchNoBreakSpace"));
$fixed_content = $fixer->fix('<p>Nous avons "caché" une page Goodies sur <a href="http://jolicode.com/">Jolicode.com</a> !</p>');

// Result: <p>Nous avons &laquo;&nbsp;cach&eacute;&nbsp;&raquo; une page Goodies sur <a href="http://jolicode.com/">Jolicode.com</a>&#8239;!</p>

Ici, nous appliquons les Fixers FrenchQuotes et FrenchNoBreakSpace, nos guillemets sont donc corrigés et un demi-espace insécable sera placé devant le point d’exclamation.

La librairie est utilisée entre autres sur notre site, et dispose déjà d’un Bundle Symfony2 pour une intégration aisée dans Twig et dans vos templates PHP. Appliquer JoliTypo à vos contenus sous SF2 est donc transparent et facile :

{{ '<p>Hi folk!</p>' | jolitypo('en') }}

À l’avenir, j’aimerais compléter la liste des recommandations par locale, et intégrer via plugin ou module la librairie dans tout CMS ne corrigeant pas correctement la typographie. Les contributions sont évidemment plus que bienvenues !

Section intitulée ne-soyez-pas-timideNe soyez pas timide

L’importance que vous accordez au respect de la typographie française ne change pas foncièrement la qualité de vos contenus. En revanche, cela rend leur lecture plus agréable et soignée.

Il est aujourd’hui encore compliqué d’utiliser correctement tous ces signes, à moins d’employer un clavier spécial comme les Bépo ou un logiciel de traitement de texte. La facilité avec laquelle nous pouvons maintenant appliquer un filtre automatique sur nos contenus HTML rend cette excuse bien moins fondée. Les contenus saisis via notre navigateur Web méritent la même attention que ceux saisis dans Word !