TCPDF et caractères plus que spéciaux : la police "zapfdingbats"

01/10/2019

Ça y est, je me lance, mon premier "billet", et quoi de mieux qu'une vraie demande provenant du terrain permettant aux utilisateurs d'optimiser le temps qu'il accorde à certaines tâches quotidiennes.
L'objectif est simple, rajouter sur des PDF des cases à cocher comme les inputs de type checkbox qui seront "cochés" après impression par un stylo ou sur une tablette via un stylet.

Les PDF sont produits par TCPDF dans le contexte d'une boutique Prestashop (PHP). Pour être précis, Prestashop utilise une classe étendu de TCPDF couplé à son système de templating HTML (basé sur lui même sur Smarty) et permet ainsi de générer des PDF pour tous les besoins : factures, tickets, bons de livraison...

J'ai d'abord pensé à utiliser un caracère spécial HTML, mais j'ai pas trouvé mon bonheur et TCPDF ne supporte pas la plus part d'entre eux.

Je veux éviter d'utiliser une image, c'est pas terrible comme solution :

Faire ça en CSS, comme le support du CSS dans TCPDF se limite au niveau 1 et quelque trucs en plus ; je suis pas certain d'arriver à faire ça bien sans faire des millions de tests ou que ce soit galère à utiliser.

Ou alors utiliser une font! certes, c'est toujours une bonne pratique Web d'encapsuler ses logos (ou d'utiliser un kit qui le fait), mais là dans le cadre de TCPDF j'y crois moyen.

Je cherche quand même dans la doc de TCPDF et je trouve un exemple d'utilisation des fonts.
Je vais jusqu'au bout du pdf (page 14) et je trouve des caractères plus que spéciaux présent dans la font zapfdingbats. Il y 4 carrés blanc (c'est juste l'ombre portée qui change) qui feraient parfaitement l'affaire.

Je tente simplement d'ajouter le chargement de la police dans la classe de mon template Prestashop (en gardant helvetica en dernière position car c'est la police par défaut).

$this->pdf_renderer->SetFont('zapfdingbats', '', 11, '', true);
$this->pdf_renderer->SetFont('helvetica', '', 11, '', true);

Ensuite dans le Template HTML, j'ai ajouté une règle CSS en haut du template.

span.zap { font-family:'zapfdingbats'; }

Lorsque je veux afficher un carré j'écris simplement une balise span.zap avec le caractère "o" dedans, pourquoi "o", simplement parce que c'est celui qui permet d'afficher un des 4 carrés (voir le document pdf de l'exemple qui sert de table de correspondance).

<label><span class="zap">o</span> Absent / <span class="zap">o</span> Présent</label>

Bon, ça marche pas du premier coup, j'ai pas la police installée par défaut dans TCPDF, la version semble très ancienne. Un petit tour sur internet pour récupérer la police au format PHP : zapfdingbats.php que j'ai mis dans le répertoire des fonts de mon installation TCPDF.

Et là, j'ai eu un merveilleux carré avec ombre parfaitement dimensionné à la taille du texte.

Une piste d'amélioration serait de faire des classes CSS et de jouer avec le pseudo élement after et la propriété content, un peu comme à la font-awesome, pas certains que ça marche avec TCPDF.

Retour aux billets