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

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 &nbsp; and other HTML entities (use XML codes like &#160; 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 :slight_smile:


If you like these tricks, please also consider checking out:

29 Likes

You’re a legend, mate :raised_hands:

1 Like

That is genius! Super nice @Artem_F and @Paul_Danyliuk :ok_hand:t4: :ok_hand:t4:

Also love the Codapen logo :smiley:

1 Like

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 :blush:).

8 Likes

This is really an awesome find @Artem_F :+1: :grin: !!! Congrats :clap: :partying_face: !!!

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

1 Like

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

3 Likes

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("&nbsp;", "&#160;")
  .Substitute("&","&#038;")
...
2 Likes

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

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 :dumpling:

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.
3 Likes

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

2 Likes