It's in the Details

Notes, small ideas and finer details.

It's in the Details

· notes ·

Above all else show the data.

Edward Tufte, The Visual Display of Quantitative Information

This post is a specimen. It exists so that a single hugo build exercises every piece of machinery the journal depends on. If it renders correctly, the site is healthy.

Mathematics, rendered at build time

Equations are typeset by KaTeX while the site builds, so the page you are reading contains no JavaScript for math and makes no network request to render it.This is the whole reason for the setup. A page that renders math on the client flickers, shifts layout, and breaks when a CDN goes down. A page that renders it at build time is just HTML.

Inline math sits in the run of text: Euler’s identity, eiπ+1=0e^{i\pi} + 1 = 0, relates five constants. Display math takes its own block:

∫−∞∞e−x2 dx=π \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}

Alternate block syntax works too:

∇⋅E=ρε0∇⋅B=0 \begin{aligned} \nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \mathbf{B} &= 0 \end{aligned}

Math also survives inside a margin note.Such as this bound, ∣x−μ∣≤kσ\lvert x - \mu \rvert \le k\sigma, which renders through the shortcode’s markdown pass. That is a genuinely fragile interaction, so it is exercised here on purpose.

Currency is not mathematics

There is deliberately no $...$ inline delimiter. So a price of $50, or ₹99, or a range of $10–$20, passes through as ordinary prose rather than being swallowed as an equation.

Notes in the margin

The margin is the point of the format. A numbered sidenote hangs off a superscript.Like this one. On a narrow screen it collapses to a tappable number. An unnumbered margin note sits beside the text without interrupting it.Margin notes carry an ⊕ toggle on mobile instead of a number.

A small line chart of monsoon rainfall totals
Margin figures live in the margin. This image is served from R2, not from this repository.

Figures come in two further sizes. A margin figure rides alongside the text, as above. A full-width figure breaks out across both the text column and the margin:

A wide timeline of releases
Full-width figures span the whole measure. Also served from R2.

Diagrams as code

Diagrams are written as text, so nothing binary enters the repository. The JavaScript that draws them loads only on pages that contain one:

graph LR
  A[Markdown] --> B[hugo --minify]
  B --> C[Static HTML]
  C --> D[Cloudflare Pages]
  E[(R2 bucket)] -.images.-> D
  D --> F((Reader))
How a post reaches a reader.

A fenced code block tagged mermaid renders identically:

graph TD
  X[Draft] --> Y{Done?}
  Y -->|yes| Z[git push]
  Y -->|no| X

Many scripts, one page

ET Book carries no Tamil or Devanagari glyphs, so those scripts fall back to self-hosted Noto serif faces, scoped by unicode-range so that Latin text keeps using ET Book.

Tamil: நுட்பமான விவரங்களில் தான் உண்மை உறைகிறது.

Devanagari: सत्यमेव जयते नानृतम्।

Both lines should render in a serif face that matches the page, not in a system default sans-serif.If either line looks like a UI font, the unicode-range declarations in assets/css/fonts.css are not being applied.

Code

Fenced blocks are highlighted at build time by Chroma:

def sidenote(n: int) -> str:
    """The number is generated by CSS counters, not by this function."""
    return f"sn-{n}"

That is the whole apparatus.