Remember SVG in Coda?
Well, @Artem_F (who is my partner for CodaTricks and consulting/building docs for hire, by the way) was studying SVG and discovered a property
<foreignObject> that allowed rendering some HTML within SVG.
The capabilities are of course limited. While displayed in an image (like an SVG would), no scripts can run, no mouse events captured (so no hover effects, no interactivity whatsoever), no external resources (fonts, images etc) loaded. You also have to use XML syntax, e.g. use
<br /> instead of
<br> and overall not leave unclosed tags, not use
and other HTML entities (use XML codes like
instead). The ~70KB limit on row size still applies, so you cannot import the whole Bootstrap.css in it.
Still with these capabilities you can:
- render custom invoices and reports
- preview HTML emails that you’re about to send out
- render more condensed tables
- otherwise make things that are much harder to build with just SVG (e.g. a custom calendar)
Oh, but if you right-click and Open image in a new tab, then you’ll have your interactivity (including scripts) and will be able to take the result and print it or print-to-pdf without loss in quality. Try it with the invoice and hover examples below.
And of course, you can use pieces of data from your doc to compose that HTML and CSS.
Behold, the Codapen
If you like these tricks, please also consider checking out: