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

Showcase Tips and Hacks
8

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.

image
image2256×1444 337 KB

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