Si vous travaillez dans le monde de l’email marketing, vous savez certainement qu’Outlook est LE client email honni de tous les intégrateurs. Aujourd’hui, je vais vous parler d’une bizarrerie que nous n’avons pas encore abordée jusqu’ici, et sur laquelle je n’ai pas trouvé beaucoup de documentation sur le net.
Le VML
Pour rappel, si Outlook est si mal fichu en terme de rendu HTML cela vient du fait qu’il utilise comme moteur de rendu HTML celui de Word ; qui n’est absolument pas fait pour ça. Ce serait comme utiliser un radiateur pour faire des toasts. Vous pourriez y arriver aussi, c’est vrai, mais ce n’est pas vraiment l’idée de départ…
Du coup, la plupart des « fix » que les intégrateurs ont mis en place pour pallier à ça se fait via le language VML, un language propre à Word. Ce language permet de faire certaines choses, mais malheureusement pas tout, et cela apporte également son lot de bug…
Un problème de padding
J’ai constaté récemment un souci d’alignement dans certains cas sur Outlook.
Vous trouverez un exemple en cliquant ici
On peut voir ici que les tables imbriquées sont décalées dans les messageries Outlook sur Windows.
Pourquoi ? Parce que dans certains cas, le padding-left, mis sur la balise td d’une table dans Outlook sera placé sur la droite, en s’ajoutant donc au padding-right, au lieu de s’appliquer à gauche comme ce serait attendu.
J’ai constaté ce bug de padding sur Outlook dans le cas suivants:
- Lorsqu’une
tableest imbriquée dans du code VML, que cettetablepossède elle-même destablesimbriquées, et que lestdde cette table ont unpadding-left. Et ce quel qu’en soit l’écriture:padding-left: 10pxoupadding: 10pxauront le même souci.
Ça fait beaucoup de choses, et c’est ce qui rend ce bug d’autant plus difficile à cerner. Il existe sans doute d’autres conditions obscures pour rencontrer ce bug.
Il existe une solution docteur pour ce bug de padding sur Outlook ?
Oui, comme souvent en email, on peut contourner le problème d’Outlook, en jouant avec des tables de largeur variables centrées dans d’autres tables. Cela complexifiera le code, en fonction du résultat souhaité, mais il sera possible de trouver une manière d’arriver à ses fins.