rand(Ø)

Créer une signature HTML pour Apple Mail

Joris Berthelot -

Tout le monde le sait : Apple Mail n'est pas très à jour concernant ses fonctionnalités (accusé de reception/lecture, création de signatures, notifications, etc.). Si vous êtes utilisateur de ce produit de la pomme, vous devez déjà savoir comment créer des signatures simples.
Les images s'insèrent dans votre signature une fois glissées/déposées dans la fenêtre d'édition mais impossible de les placer comme on voudrait...

Pas terrible pour créer une signature qui a de la gueule, vous ne croyez pas ?

Les signatures d'Apple Mail

Je n'ai aucune idée de comment fonctionne les autres clients email mais je sais qu'Apple Mail conserve ses signatures sous forme d'archives Web (.webarchive) générées par Safari et dans le répertoire /Users/_username_/Library/Mail/Signatures/.

Je ne vous conseil pas d'éditer directement ces fichiers car leur source est très indigeste. De plus le format de leur nom est propre au compte email associé (d'ailleurs si quelqu'un connait la valeur de hashage afin de confirmer) donc la solution consiste à créer une signature bidon et de repérer laquelle est-ce via la date de création du fichier.

Créer la signature HTML

Munissez-vous de votre éditeur HTML habituel et créez une nouvelle page la plus basique possible (pas de doctype, pas de xmlns ou autres insertions relatives aux standards du langage). Nous cherchons simplement à avoir un rendu visuel.

La procédure

Voici un petit exemple de signature toute simple :

<html>
	<body>
		<p style="font-family:Verdana,arial,sans-serif;font-size:0.9em;color:#000;">Cordialement,<br>Joris Berthelot.</p>
		<p style="font-family:Verdana,arial,sans-serif;font-size:0.9em;color:#000;"><a href="http://twitter.com/eexit" style="color:#000;">Me suivre sur Twitter</a></p>
	</body>
</html>

Rendez-le sous Safari :

Rajoutons une petite icône pour illustrer Twitter :

<html>
	<body>
		<p style="font-family:Verdana,arial,sans-serif;font-size:0.9em;color:#000;">Cordialement,<br>Joris Berthelot.</p>
		<p style="font-family:Verdana,arial,sans-serif;font-size:0.9em;color:#000;">
		    <img src="img/tw.gif" width="16" height="16" alt="Twitter" style="vertical-align:top;" />
		    <a href="http://twitter.com/eexit" style="color:#000;">Me suivre sur Twitter</a></p>
	</body>
</html>

Bon ok, c'est tout beau, ça déchire mais notre image est en local là. La solution la plus logique serait de l'héberger sur un serveur distant et hop, le tour serait joué...

Le problème des images

Avoir des images dans sa signature est une bonne chose pour les logos ou des petites icônes comme j'utilise mais la majorité des clients email bloquent par défaut (question de sécurité) les ressources externes. Il faut donc joindre nos images à notre signature sous forme de pièces jointes ou alors directement encoder les images dans la signature.

Si on regarde la source de la signature Be-Zend (première capture), on constate que l'image n'est pas encodée mais attachée à la signature (on peut trouver un application/x-apple-msg-attachment dans la source de l'archive).

Or nous ne savons pas comment est généré cet attachement donc nous allons encoder l'image car nous savons faire cela.

Encoder vos images grâce à PHP

Les moteurs de navigateurs récents savent lire les flux data:image et afficher un rendu si les données jusqu'aux caractères de fin ne sont pas erronées.

Pour générer la base64 d'une image, pas besoin de créer un script PHP complex, juste une ligne de commande suffit :

$ php -a
$ echo __DIR__;
/Users/username/Desktop/img%
$ echo chunk_split(base64_encode(file_get_contents('tw.gif')));

R0lGODlhEAAQAPcAAAAAAP////r8/fn7/Pj6+/r9/vn8/fH6/PX6+/D7/cL0++f6/e37/fT7/Hbp
9Xzq9oDq9YTr9ozs9pru96Xw+LHx+Mf2+8j2+8r2+833/NT4/NT2+tj3+9z4+975/N/4++H5/On6
/Or6/PP7/ADd7gDb7QDc7QDa7ADb7Bne7ini8Dji8Dni8Drj8Ebk8U7k8VDl8Vjm8l7n82Dn82Pm
82bn82fn82jn82jo83Hp9XXq9XXp9Hbp9Hfq9Xzq9X7q9X/q9YXr9YXs9Ybt9oru9ovs9pDt9pPu
95Tu95bu957x+KDx+KLx+KTx+Kbx+Knx+LTz+bz0+b71+sb2+s/2+tf5/NX3+tj4+9n4+9r4++L6
/OH5++P5+/L8/QDf7wDg7wDe7gDc7Afd7Qjd7RTg7xjg7yPh7+b6+/H7+/X8/Pj+/vf8/Pb7+/j8
/Pn8/Pj7+/z+/vv9/f7///3+/vz9/fv8/P7//vr7+v///vr6+f/9/P/+/v79/f7+/v39/fz8/P//
/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAIAALAAAAAAQABAA
AAjUAAMIjIOgAZs2AhMqDCBnjQYFGdLMWaiwT4gnFSiAcEMxYR8uSSYc8XDnzRsCA+hU3FLEiAQo
GC5YsHBBiwCFH4BECPLDh48HPiEwUNghRw8ePHbocMCjR40qHjnMuIHjhg2rNmgIUZNwjxUYMV5E
SRBCRIgzBRTiodLCBYspdeT06QNnYZ8NZlSUUaLHDx8+f+xURKPCyxcyRJwwWdLEw0I9Q1CAAWOi
cpgSKRYonGNAxgkSk0OfkLKQjh8kZsSIGTPGxIouFOfkOZDlChYsV0ZwDAgAOw==

La fonction chunk_split() permet de rendre le résultat de la fonction base64_encode() compatible avec la RFC 2045 qui spécifie entre autres de restreindre la longueur des lignes à 76 caractères.

Ensuite, copiez la base64 dans l'attribut src de votre image en ajoutant avant data:image/gif;base64, :

<img src="data:image/gif;base64,
R0lGODlhEAAQAPcAAAAAAP////r8/fn7/Pj6+/r9/vn8/fH6/PX6+/D7/cL0++f6/e37/fT7/Hbp
9Xzq9oDq9YTr9ozs9pru96Xw+LHx+Mf2+8j2+8r2+833/NT4/NT2+tj3+9z4+975/N/4++H5/On6
/Or6/PP7/ADd7gDb7QDc7QDa7ADb7Bne7ini8Dji8Dni8Drj8Ebk8U7k8VDl8Vjm8l7n82Dn82Pm
82bn82fn82jn82jo83Hp9XXq9XXp9Hbp9Hfq9Xzq9X7q9X/q9YXr9YXs9Ybt9oru9ovs9pDt9pPu
95Tu95bu957x+KDx+KLx+KTx+Kbx+Knx+LTz+bz0+b71+sb2+s/2+tf5/NX3+tj4+9n4+9r4++L6
/OH5++P5+/L8/QDf7wDg7wDe7gDc7Afd7Qjd7RTg7xjg7yPh7+b6+/H7+/X8/Pj+/vf8/Pb7+/j8
/Pn8/Pj7+/z+/vv9/f7///3+/vz9/fv8/P7//vr7+v///vr6+f/9/P/+/v79/f7+/v39/fz8/P//
/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAIAALAAAAAAQABAA
AAjUAAMIjIOgAZs2AhMqDCBnjQYFGdLMWaiwT4gnFSiAcEMxYR8uSSYc8XDnzRsCA+hU3FLEiAQo
GC5YsHBBiwCFH4BECPLDh48HPiEwUNghRw8ePHbocMCjR40qHjnMuIHjhg2rNmgIUZNwjxUYMV5E
SRBCRIgzBRTiodLCBYspdeT06QNnYZ8NZlSUUaLHDx8+f+xURKPCyxcyRJwwWdLEw0I9Q1CAAWOi
cpgSKRYonGNAxgkSk0OfkLKQjh8kZsSIGTPGxIouFOfkOZDlChYsV0ZwDAgAOw==" width="16" height="16" alt="Twitter" style="vertical-align:top;" />

Vous pouvez essayez, cela aura exactement le même rendu de votre page HTML et preuve que cela fonctionne : copiez le contenu de l'attribut src dans la barre d'adresse de votre navigateur.

Exportation de votre signature

Une fois votre signature terminée, allez dans Fichier > Enregistrer sous..., sélectionnez Archive Web dans la liste de formats et écrasez l'archive de la signature bidon que vous avez créé préalablement.

Relancez Apple Mail et admirez le résultat. Théoriquement, vos images devraient s'afficher dans les clients email configurés pour lire les emails au format HTML ou RTF.

Conclusion

Vous savez désormais créer des signatures HTML plus riches avec l'encapsulation des images directement dans le code HTML. Cette technique fonctionne aussi avec CSS :

<a href="/" style="background-image(data:image/gif;base64,R0lGD...ou0ZwOw==);">mon lien</<a>

Bon, il est clair que cela alourdi considérablement le code de vos emails donc cette technique est à utiliser seulement pour des images de poids faible ou des petites icônes. Préférez les formats .gif, je pense que leur poids est plus faible que les .png car la palette de couleurs et plus réduite.

Enfin, pour les lecteurs qui recevront mes prochains emails, pouvez-vous me signaler si un changement est effectif ? Je suis curieux de savoir si j'ai bossé pour rien.
Merci !