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:

18 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