MEGA TRICK: HTML & CSS in Coda! (think custom invoices and reports)

[Paul_Danyliuk]

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:

• my YouTube
• my never-published blog
• and lastly, my Patreon — it’s start of a month, hint hint, a perfect day to become a patron

[TSStrickand1]

You’re a legend, mate

[Daniel_Stieber]

That is genius! Super nice @Artem_F and @Paul_Danyliuk

Also love the Codapen logo

[Artem_F]

Leave Paul for 1 day with the new hack, and he will blow everyone’s mind with a new doc. Keep up the good work, buddy.

(BTW thanks for mentioning my minor input into this ).

[Pch]

This is really an awesome find @Artem_F !!! Congrats !!!

And of course, thank you very @Paul_Danyliuk for sharing it !!!

[Ian_Nicholson]

This just reminds me that Coda could really use a purpose-built rendering function. Nice find!

[Ian_Nicholson]

Just wanted to chime in and share that I’m now using this trick to preview HTML emails going out from my Doc, and it’s awesome! Now I don’t have to send an email every time I tweak my email template to see if I got it right!

Note that I did have to substitute some XML code for things as follows (XML doesn’t quite like lone ampersands it seems):

...
thisRow.[Email Update Body]
  .Substitute(" ", " ")
  .Substitute("&","&")
...

[Paul_Danyliuk]

Revisiting this trick in 2022, co-owning a prefab food production

I need to generate invoices that look exactly like Microsoft Word docs with its default Times New Roman font. Don’t ask me why — in Ukraine, MS Word docs in Times New Roman are automatically perceived as more official and reputable than any other, no matter how professionally designed.

This one isn’t prefilled with data yet but rest assured, there will be dumplings with different fillings in there

The algorithm:

1. Word → Save as HTML
2. Clean up the messy code it generates or at least try to get it under 40,000 characters
3. Split into blocks with {1} {2} templates for Format()
4. Generate the resulting SVG+HTML, render into an image on a page, resize as much as possible
5. Print and enjoy.

[Josh_Glazer]

This is fantastic–big thanks to CodaTricks for revealing it. I used this HTML+SVG technique to build a custom invoice, and it looks great; however, the output is limited to a single image, thus a single page. Content that would normally extend onto subsequent pages simply disappears. So basically it works with 10 lines of invoiced items but not with 15, 20, etc.

Does anyone know a way to produce multi-page SVG output or otherwise tackle this problem? thanks, Josh

[Tamerlan_Kagarmanov]

@Paul_Danyliuk

SVG in Coda

I just admire how much you can unlock the potential of Coda! Bravo!