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
  • Quotation marks for italicised text are not themselves italicised, e.g. “the best code is the code you don’t have to write” (compare to “this”)
  • 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.

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, two3, three4.

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.

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

  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. inline maths: \((x^2 + 1)\). this footnote has two pointers to it so two arrows: ↩︎ ↩︎

  4. 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) \\ $$ ↩︎