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).

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.¹
  • Incorrect¹.
• Use em-dash if something isn’t a hyphen by entering -- (two hyphens)
• 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 ​ (zero-width space) to stop Hugo interpreting things you want to appear literally (see line above)

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?␣␣␣␣
 ␣␣
<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.

Footnote¹, two², three³.

• Meta