Thus far we've look at the motivations, a first cut and the options when it comes to copying an HTML element to the clipboard for pasting elsewhere, ideally into an email. Now we take a look at what exactly to copy the clipboard.
Seemed obvious to me, the HTML element in question, well it's outerHTML anyhow. But alas, life is never quite that simple. The element and all its children contain many class attributes referring to classes that have styles defined elsewhere in stylesheets. When pasted into a new context, those stylesheets are not available, and all the styling is lost.
A <style> tag: the easy way 🔥
The easiest way by a good measure is to add also a <style> tag that describes all the styling rules for the referenced classes. They are readily accessible in document.styleSheets after all. And doing that works. The result, pasted into an HTML context is fully styled - generally ... Alas, if the target is an email client and the thus-styled email is sent, then the <style> is not honored by most readers. Either ignored or even filtered out.
So much for that. A half measure, and certainly fine if for example pasting into any other HTML context that doesn't pull such sneaky tricks, be that a document or HTML editor or whatever. It has the attendant advantage that pseudo classes like :hover are carried along and so the result is dynamic still and things like style based Tool Tips work in the pasted copy.
So this is definitely worth keeping as an option!
style attributes, a.k.a. inlining style: the hard way 💦
Styling can also be described using the style attribute on each individual element rather than class attributes. Known as inline styling and in disfavour generally in web design (in no small part because of needless repetition).
But inline styles in HTML emails are honored by most email readers - certainly all clients I tested do honor that styling.
That works wonderfully.
As an aside, the clue that took me there, was the basic Select and Copy experience we started with. That is, when selecting parts of a web page in Chrome-based browsers and pasting into an HTML context, if we examine the source we see all the style information has been in-lined. Namely, all the styles that class attributes described have been moved to style attributes. And no surprise, when we do the same, in Firefox, and paste it, the styling is mostly lost and examining the source reveals Firefox did not in-line the styles! The penny dropped! Now I finally understood by what mechanism Chrome succeeded and Firefox failed to retain styles when copying from a selection.
And so a new mission is born... to in-line the styles. Should be easy ... Chrome does it. But then again.
As it happens, in-lining styles is frustratingly non-trivial, nor a clearly solved problem, even though Chrome clearly does it ... and so it's a topic unto itself (next article)
Latest comments (0)