So you want to create an email signature based on a fancy design made in Photoshop
by a marketing agency? Good luck!
You might start by re-creating it in HTML, and it looks great in a browser. Then you test
it out and immediately notice that all the images are missing and replaced by an ugly
placeholder until you click the "load external resources" button.
Googling for how to get around that issue, you come across url encoded base64 image src. You try that in the default email client on macOS. It works! Except of course it's one of the very few clients that actually supports it and nothing will show everywhere else.
That's just one of the many, many issues I came across when I tried my hand at exactly the task presented above.
A fun one is that macOS Mail (and some other clients), will invert the colors in the HTML to fit the system design. The original design specified that the background of the signature should always be a dark grey though.
So I looked for ways to keep it that way.
The first try was to make the entire thing into an SVG. That was done pretty fast with the help of an LLM, that gave me the correct structure, but not quite the right size and locations. Good enough for a test. In the browser it looked good, so I manually changed all the pixel offsets to be correct. After that was done, I put in my email signature, only to notice that the colors in the SVG-image still get inverted by my mail client.
Ah, but you can use patterns in SVG to use an image as a background. And if we use an image with just a single color in it, that's pretty much a background color that will definitely not be inverted. And it does work! At least in macOS Mail, because Gmail just doesn't support SVGs at all.
There is however a really cursed way to get HTML to use a background image for text fill color:
in CSS, set
background to the color you wantbackground-clip to content-box-webkit-text-fill-color to transparent-webkit-background-clip to textOf course, we need to use an image for the background property. And if we use an external one, the user will have to click "load external resources", before anything reasonable will happen. So we can use the base64 encoded images, which pretty much only work in macOS, but the hope is that pretty much only macOS will invert the colors, and as such the signature will look good everywhere. Using the regular color attribute, the email clients that don't support base64 encoded images should fall back to using that and everything is fine.
Except of course, nothing is fine, because there are now email clients in which the text is now transparent.
The saving grace is that at least the layout is the same now in all clients that I could test, because of constant pixel height and width attributes on the top level div, and using tables to put everything where it's supposed to be.
The moral of the story is that you just can't have nice things with email and clients will just do what they will do. Or more positively: Just write the things you want to write and it'll be good enough!