satgo1546’s ocean

Any sufficiently primitive magic is indistinguishable from technology.

Sat’s Hypertext Style Guide

This page demonstrates many kinds of typography elements used on my site. Read the source to find out how to typeset them.

I try to follow the HTML standard where practical:

HTML Standard

13 The HTML syntax

13.2 Parsing HTML documents

13.2.6 Tree construction

13.2.6.4 The rules for parsing tokens in HTML content
13.2.6.4.22 The "after after body" insertion mode

When the user agent is to apply the rules for the "after after body" insertion mode, the user agent must handle the token as follows:

↪ A comment token

Insert a comment as the last child of the Document object.

↪ A DOCTYPE token
↪ A character token that is one of U+0009 CHARACTER TABULATION, U+000A LINE FEED (LF), U+000C FORM FEED (FF), U+000D CARRIAGE RETURN (CR), or U+0020 SPACE
↪ A start tag whose tag name is "html"

Process the token using the rules for the "in body" insertion mode.

↪ An end-of-file token

Stop parsing.

↪ Anything else

Parse error. Switch the insertion mode to "in body" and reprocess the token.

§ Parsing HTML documents in HTML Living Standard

As you see, cited quotations are wrapped in <figure> elements.

<figure> elements are also for captioned images, graphics, and other displayed material, as usual.

html head body title meta link table thead tbody tfoot tr tr tr th td td
  • <html>: root
    • <head>: document header
      • <title>: document title
      • <meta>: metadata
      • <link>: external resource
    • <body>: document body
      • <table>: table
        • <thead>: table head
          • <tr>: table row
            • <th>: table header cell
        • <tbody>: table body
          • <tr>: table row
            • <td>: table data cell
        • <tfoot>: table foot
          • <tr>: table row
            • <td>: table data cell
A tree in SVG embedded in HTML and as nested lists. The list representation packs more information in roughly equal space. As a graphical tree has little advantage over a list, I prefer the latter.

<figure> areas are scrollable horizontally.

Right atom
\mathord \mathop \mathbin \mathrel \mathopen \mathclose \mathpunct \mathinner
Left atom \mathord — \, \nonscript\> \nonscript\; — — — \nonscript\,
\mathop \, \, impossible \nonscript\; — — — \nonscript\,
\mathbin \nonscript\> \nonscript\> impossible impossible \nonscript\> impossible impossible \nonscript\>
\mathrel \nonscript\; \nonscript\; impossible — \nonscript\; — — \nonscript\;
\mathopen — — impossible — — — — —
\mathclose — \, \nonscript\> \nonscript\; — — — \nonscript\,
\mathpunct \nonscript\, \nonscript\, impossible \nonscript\, \nonscript\, \nonscript\, \nonscript\, \nonscript\,
\mathinner \nonscript\, \, \nonscript\> \nonscript\; \nonscript\, — \nonscript\, \nonscript\,

I generally refrain from including math formulas, but they are sometimes inevitable. Simple inline equations, like ∏ ai = exp ∑ ln ai, can be typeset with HTML alone, while those more 2D are delegated to MathML now that it is universally supported across browsers, like this one from Concrete Mathematics, exercise 4.19, or The TeX book, exercises 17.13 and 17.14:

π(n) = ∑ 1<k≤n ⌊ ϕ(k) k−1 ⌋ = ∑ 1<m≤n ⌊ ( ∑ 1≤k<m ⌊ m/k ⌈ m/k ⌉ ⌋ ) −1 ⌋

Footnotes are kept to minimum*†. 

#!/usr/bin/env ruby
=begin
multiline comment
=end
class Klass < Superklass
  # :markup: rdoc
  # comment
  def initialize(foo = $bar) = @baz = @@baz = [
    nil, true, false, self, 0b0 + 01 - 2 * 0x3 / 4.0,
    :symbol, ?c, "string\n\t#{'string'}", %q(string),
    /regexp/i, __dir__ and __FILE__, `subshell`,
  ].map { |x| x }
  CONSTANT = <<~END
    heredoc
  END
end
<?xml version="1.0"?>
<!DOCTYPE lol [
	<!ELEMENT lol (#PCDATA)>
	<!ATTLIST lol lol CDATA #IMPLIED>
	<!ENTITY lol "lol">
]>
<lol lol="&lol;">&lol;</lol>
#include <iostream>
#define UNICODE 1
using namespace std;
template <class T> class K {
	T field; // private field
public: /* public members onwards */
	enum F : unsigned short { PP, MM = 1 };
	bool f(T x, void (*fp)(int arg) = nullptr) {
		auto v = reinterpret_cast<K<int>>(114514);
		K<double> *u = (K<double> *) 0x1919810;
		volatile long double *p = new long double;
		cout << "PP = " << F::PP << endl;
		return x <= 0x1.5p8f && x >= 1ULL ||
			static_cast<decltype('C')>(L"Hi");
	}
};
const obj0 = { name: "A0", value: -0, null: null };
type Prop = Awaited<Partial<typeof obj0>> | undefined;
let obj1 = { name: 'B1', value: 114.514 } satisfies Prop;
/**
 * @template T - The generic parameter.
 * @param {T} x - The argument.
 * @returns {boolean} The return value.
 */
function f<T extends {}[] = []>(x?: T): boolean {
	return +(arguments[+false] instanceof Object) === 1;
}/i/i // stray regular expression, hard to parse correctly
<any>console.log(f([0x0n, obj0, obj1]),
	Math.min(...Array(9).fill(new class extends class {} {})
		.map((x, i) => x.toString().length ^ i << i)));
from typing import Any, Never
type NDPoint = tuple[float, ...]
@lambda x: {(x, x): [str(b) for _, b in ((x, x),) if True]}
async def f(x: Any | Never) -> None:
	match int.from_bytes(rb'\114514' + x@x):
		case [_, _] | _ as a if z := -0x19_19 ** 81.e0j:
			f"""{{{await a # comment with symbols, e.g., }"""
			=!r:#8s}}}{z}"""