Abecedarium

What is this?

  • A slight style-guide
  • A page for verifying the rendering

In typographic contexts an abecedarium is a display or test piece that showcases letters, often demonstrating a typeface’s design or elements of typography. The word derives from the Latin word for “alphabet,” stemming from the first few letters (A, B, C).

Use manual fragment links for sane, predictable links to sections of posts:

## Sane fragment links {#sane-fragment-links}

And then the link with fragment looks like this:

https://hunsley.io/posts/2024/abecedarium#sane-fragment-links.

Style guide

  • The first letter of a footnote isn’t capitalised
  • The last sentence in a footnote doesn’t have a full stop
  • Footnote reference at end of sentence:
    • Correct.1
    • Incorrect1.
  • Use em-dash if something isn’t a hyphen by entering -- (two hyphens)2
  • Quoted text that is all styled should have the style outside the quotes: *"hello"* (“hello”) (the other style doesn’t do smart-quotes: "*hello*" ("hello"))
  • Use more to signal where the preview ends: <!-​-more-​->
  • insert &#8203; (zero-width space) to stop Hugo interpreting things you want to appear literally (see line above)
  • inside math blocks: use \mathrm (math Roman) for operators, and \textrm for actual text (preserves spaces)

Footnote-fu

Example of para break plus indent in a footnote:

[^4]: I remember De Morgan's as "negate the parts, swap the operator, negate the whole". But how about a rhyming couplet?␣␣␣␣
&nbsp;␣␣
<span style="margin-left: 2em;">*"To flip a ‘not’ on AND/OR,</span>␣␣
<span style="margin-left: 2em;">negate each part,</span>␣␣
<span style="margin-left: 2em;">then swap the core."*</span>␣␣

Note the space chars! Shown here as ‘␣’.

The ‘␣␣␣␣’ puts a blank line between the footnote and the para below.

Footnotes inside a centered-table

Footnote references ([^n]) placed inside a {{< centered-table >}} don’t work.3

The fix: put the real [^n] reference in ordinary body prose (so Goldmark emits the definition, the footnotes-list entry, and the #fn:n anchor), then link to it from inside the table with a manual superscript:

Some intro sentence about the data[^4]:

{{< centered-table border="1px" >}}

| Column | Readout max fps<sup><a href="#fn:4">4</a></sup> |
| ------ | ----------------------------------------------- |
| ...    | ...                                             |

{{< /centered-table >}}

Goldmark uses default IDs fn:n (definition) and fnref:n (back-reference), so href="#fn:4" jumps to footnote 4.

Variant: a note just under the table

If the note is can just go under the table itself:

Use <sup>n</sup> in the table cell, and add corresponding note underneath the table:

| LH | Example<sup>1</sup> | Perm<sup>2</sup> |
| -- | ------------------- | ---------------- |
| ...| ...                 | ...              |

<p style="font-size:0.85em;"><sup>1</sup>&nbsp;the bold call is the one just before the target leadhead</p>
<p style="font-size:0.85em;"><sup>2</sup>&nbsp;permutation from rounds to the target leadhead</p>

Note that there’s no hyperlink made here.

Techniques & shortcodes

Highlight a whole table row

Use this span in any cell of a row and the whole row gets a light-green background:

| BP | 3 <span class=hl-row></span> | (254) | K Bh |

Side-by-side images

Multiple images in a row using a bare table with border-spacing for the gap:

<table style="border-collapse:separate;border-spacing:24px;table-layout:fixed;">
  <tr>
    <td style="padding:0;vertical-align:top;text-align:center;">
      <img src="/my-post/left.png" alt=""
           style="max-width:200px;width:100%;height:auto;display:block;">
    </td>
    <td style="padding:0;vertical-align:top;text-align:center;">
      <img src="/my-post/right.png" alt=""
           style="max-width:200px;width:100%;height:auto;display:block;">
    </td>
  </tr>
</table>

Increase table cell spacing

Use spaced-columns-table around table:

<div class="spaced-columns-table">

| ... | ... |
| --- | --- |

</div>

Note: the touch-table shortcode already includes this wrapper; centered-table does not, so wrap it manually when you want the extra spacing.

Commenting-out content

Markdown has no comment syntax, but a link-label works as a comment:

[//]: # (this line won't appear in the output)

Note that traditional <!-- html comments --> do get rendered in published pages.

Unlisted pages

To publish a page on site but exclude from index use [build] in the front matter:

[build]
list = false
render = true

Utility shortcodes

  • {{< toc >}} — insert a table of contents ({{< contents >}} on the contents page).
  • {{< redirect "/pages/contents/" >}} — client-side meta-refresh redirect to another path (used for stub/redirect pages).
  • {{< server-only >}} … {{< /server-only >}} — inner content renders only under hugo server (local dev), never in the built site. Good for draft-only notes.

Rendering checks

Header 1

Text.

Header 2

Text.

Header 3

Text.

Header 4

Here’s a swift code block (with 4 space indent in actual code):

	if userList.isEmptyNil {
		print("userList is nil or userList.isEmpty = true")

	// and perhaps we could have an opposite to .isEmptyNil:
	if userList.hasData { 
		print("userList is non-nil and .isEmpty = false")

Code block with long line, no indent (verify right margin not bonched):

extension Emptyness {
    @available(*, deprecated, message: "calling isEmptyNil on a non-optional is safe, but it is recommended you call isEmpty instead")

Code block for console:

Optional(User(name: "", age: 30))

Code block without lang marker:

if userList.isEmptyNil {
	print("userList is nil or userList.isEmpty = true")

// and perhaps we could have an opposite to .isEmptyNil:
if userList.hasData { 
	print("userList is non-nil and .isEmpty = false")

Clock js

Note that {{< clock-import >}} is required in page for clocks.

Static hour hand:

Double clock (Hades demo):

Standalone at /clock (no start button, realtime, should be correct time):

Standalone at /clock2 (already started, double hands, fast):

There’s a spacer below this:

Horizontal rule below this:

Text with inline code someCode += 1.

Header 1 with someCode += 1

Text.

Header 2 with someCode += 1

Text.

Header 3 with someCode += 1

Text.

Header 4 with someCode += 1

Text.

Footnote1, two4, three5.

Caching issues

If updated images don’t appear due to local web cache, can force update to appear by appending ?v=2 or similar to end of the image URL.

Auto-link suppression test

The plain-text items below must not become clickable links — browsers should not auto-detect them as phone numbers, emails, addresses etc. Only the explicit control link at the very end should be a link.

  • Phone (UK local): 07700 900123
  • Phone (UK international): +44 20 7946 0958
  • Phone (US): (555) 123-4567
  • Email: [email protected]
  • Date: 9 August 2026
  • Address: 221B Baker Street, London NW1 6XE

Control — this one should be a link: explicit link.

  1. A footnote referencing another footnote4 ↩︎ ↩︎ ↩︎

  2. Goldmark markdown renderer should handle this – but doesn’t always. Same for directional single quotes use in quotations – sometimes it’s handled automatically if you put standard apostrophes ', sometimes not. Am I wrong to use single quotes for quotations? ↩︎

  3. the shortcode renders its inner markdown via .inner | markdownify, which is a separate Goldmark render pass from the page body. Goldmark only links a [^n] reference to its [^n]: definition when both live in the same pass – and it won’t even emit a definition that has no reference in its own pass. So a footnote referenced only from inside the table ends up orphaned (no link, no entry in the footnotes list) ↩︎

  4. inline maths: \((x^2 + 1)\). this footnote has two pointers to it so two arrows: ↩︎ ↩︎

  5. Footnote with full maths (note the whitespace and indent in source):

    $$ p(n) \sim \frac {1} {4n\sqrt3} \exp\left({\pi \sqrt {\frac{2n}{3}}}\right) \\ $$ ↩︎