Interlignage inférieur au font-size sur Outlook.

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email
Interlignage inférieur et Outlook

Outlook… Interlignage… Inférieur… Oh my God, mais quel titre mystérieux et bien technique ! Et pourtant, ce n’est pas si compliqué que ça, calme-toi. Mais avant d’entrer dans le vif du sujet, je me dois de vous dire : c’est incroyable. Le monde de l’email marketing est tout de même bien fait. C’est une fascination de chaque instant, un plaisir tous les jours. Rendez-vous compte : Cela fait déjà 12 ans que je code des emails en HTML et CSS quasiment quotidiennement. Et j’en arrive encore à découvrir des hacks et tips, des petits conseils ou astuces bon à prendre. 12 après. C’est dingue non ? Ca ne vous étonne pas vous ? Et ce que j’aime, c’est vous partager ces petites découvertes, pour faciliter la vie des intégrateurs email.

Aujourd’hui, attardons-nous sur la propriété CSS mso-text-raise.

mso pour “Microsoft Office”. Si vous n’êtes pas nouveau dans le petit monde de l’emailing, cela vous parlera sans doute. Si vous êtes novice en revanche, cela peut vous sembler plus obscur. En vérité, les propriétés CSS précédées d’un mso- vont s’appliquer à Outlook. Et, au sein de microcosme des #emailgeeks, il est de bonne coutume de savoir cibler Outlook, n’est-ce pas ?

Si vous avez déjà fait l’expérience sur Outlook de vouloir définir un interlignage inférieur au font-size de votre texte, soit à la taille de la typographie renseignée, vous aurez peut-être constaté que, sur Outlook (et pas seulement Outlook 2007, mais aussi Outlook Office 365 sur Windows par exemple, ou Outlook 2010-2013-2016-2019) votre texte apparaît, à l’affichage, comme “coupé”. Prenons le code suivant pour exemple :

<p style="margin:0px; font-size:64px; line-height:52px; mso-line-height-rule:exactly; font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-align:left;">Premiers mots<br>
  mots suivants</p>

Si nous définissons donc un texte avec une taille de typo de 64px et un line-height de 52px (inférieur donc au font-size défini, puisque 52 est plus petit que 64 jusqu’à preuve du contraire), nous obtenons le résultat suivant sur Outlook 2007-2010-2013-2016-2019 et Outlook Office 365 sur Windows 10 :

Résultat de rendu sur les multiples versions d’Outlook avec un interlignage inférieur au font-size défini.

Vous voyez le souci ? Vous le voyez bien là ? Nous avons le haut des lettres “P” et “t” (ainsi que les points des “i”) coupé. Pour remédier à ce souci sur Outlook, il faut utiliser la propriété CSS mso-text-raise (précédée donc d’un mso- parce que cette propriété est propre à Microsoft Office).

Mais comment calculer la valeur de cette propriété pour obtenir le rendu idéal avec un interlignage inférieur sur Outlook ?

Et bien c’est très simple : il faut soustraire la valeur de l’interlignage à la valeur de la taille de la typo, et diviser le reste par deux. Carré de l’hypoténuse sur Pythagore. Concrètement : Dans mon exemple, la valeur du font-size est de 64. La valeur de l’interlignage est de 52. Je fais donc le calcul 64-52 et j’obtiens 12. Je divise alors 12 par 2, et j’obtiens 6. Il ne me reste donc qu’à ajouter à mon code HTML la propriété mso-text-raise avec, pour valeur, -6px.

<p style="margin:0px; font-size:64px; line-height:52px; mso-line-height-rule:exactly; font-family:Georgia, 'Times New Roman', Times, serif; color:#000000; text-align:left; mso-text-raise:-6px;">Premiers mots<br>
  mots suivants</p>
Microsoft Office interlignage inférieur et hack email
Résultat de rendu sur les mutliples versions d’Outlook avec un interlignage inférieur au font-size défini et le hack mso-text-raise ajouté.

Voilà, c’est tout ! Alors, petite précision : cela fonctionne bien quand le “haut” des lettres est coupé. S’il s’agit du jambage inférieur (considérons qu’il y ai un “g” ou un “p” dans la phrase), cela ne règlerait pas forcément le souci…. Mais bon, c’est toujours mieux que rien, et cela permet déjà d’utiliser des interlignages inférieurs à la taille d’une typo avec, aussi, des mots en majuscules par exemple ! Vous avez donc de moins en moins d’excuses pour ne pas passer vos contenus textuels en HTML brut et non via les images, petits coquinous…

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *