A New Way of Presenting Recipes and Chicken Abodo

Cooking for Engineers

I bumped into a site called Cooking for Engineers today, and at the bottom of some recipes, they have this succinct table that summarizes the procedure in a refreshingly simple manner:

* Copied from this recipe

The drawback of this method is that it’s not easily written in Markdown, which is sadly the backbone of Hugo. Markdown table is not as flexible as the HTML one, but the HTML one, with a lot of spans, is not readable inside a markdown file. Not to mention the fact that I probably have to further mess with the CSS to hide some cell walls.

Modernist Cuisine

I encountered another website Modernist Cuisine, which, too, offered their own summary card for each recipe. Instead of a hacky HTML table, they chose to upload an image of a better-formatted table, like the one on this page.

It’s not as succinct as the approach taken by Cooking for Engineers. The pro is that the procedure is listed in chronological order. The con is that it’s not immediately obvious what can be made in parallel.

But, it’s actually more readable, and aesthetically more pleasing. In fact, the aesthetics of the table reminds me of LaTeX and the famous booktabs package.

So, I decided to go with the Modernist’s approach.

Chicken Abodo

Chicken Abodo is a famous dish from the Philippines, which I first saw on J. Kenji López-Alt’s YouTube channel. At the time I took some short notes on my phone:

- Sear the chicken, lightly salted
- Prepare a bunch of garlic, bay leaves, sugar, black pepper
- Add ground pepper and pepper corns
- Add garlic, bay leaves, sugar, and sauce,
    - Ratio by weight: 1 vinegar : 2/3 soy sauce : 2/3 sugar
- Simmer for 1 hour

Since then, I’ve nailed down the quantities of the ingredients more precisely. To re-document this recipe, I wrote this Latex document:

\documentclass{article}
\usepackage[dvipsnames]{xcolor}
\usepackage{booktabs}
\usepackage{multirow}
\usepackage{palatino}
\thispagestyle{empty}

\setlength{\tabcolsep}{16pt}
\newcommand{\tabletitle}[1]{\midrule\multicolumn{3}{l}{\textbf{\color{BrickRed} \MakeUppercase{#1}}}}

\begin{document}

\begin{tabular}{lll} \toprule
  \textbf{Ingredients} & \textbf{Quantity} & \textbf{Instruction}                   \\
  \tabletitle{Chicken Preparation}                                                  \\
  Chicken Drumstick    & 6                 & Salt and sear the chicken              \\
  Garlic               & 10 cloves         & Crush the garlic                       \\
  Black Pepper         & A bunch           & Grind half of the pepper corns         \\
                       &                   & Put the garlic and pepper into the pan \\
  \tabletitle{Sauce}                                                                \\
  Vinegar              & 48g               & Pour in the sauce                      \\
  Soy Sauce            & 32g               &                                        \\
  Sugar                & 32g               &                                        \\
  \tabletitle{Simmering}                                                            \\
                       &                   & Add water to cover 2/3 of the chicken  \\
                       &                   & Bring to a boil; simmer for 1 hour     \\
  \bottomrule
\end{tabular}

\end{document}

And to convert this into an image, which tightly bounds the table rather than being a full letter sized white page, I rendered the document into a DVI file and converted it into SVG with dvisvgm. The tool automatically crops the image, so it doesn’t end being a full letter sized page.

This is the final result of a printable, succinct, summary card for my chicken abodo recipe. After reading on the web (and fiddling with HTML and CSS) for so long, there’s something very satisfying about LaTeX. It just looks nice.

I then wrote a Justfile recipe to automate the process:

latex-svg name:
    mkdir -p output
    latex --output-directory=output/ --output-format=dvi static/latex/{{ name }}.tex
    dvisvgm --stdout -O -n output/{{ name }}.dvi > static/images/{{ name }}.svg

The option -n causes the SVG to turn all the glyphs into paths. Using fonts causes the browser to substitute the fonts, which is desirable in some cases, but not in a LaTeX document where the placement of elements are fixed.