This¹ is an official Test page with long title that causes wrapping page, rendered with Jinja2 + Djot.² Click on the logo to go back to the Index.

The number 123,456,789 has 0 zeroes in it. NO ZEROES.

Math test $\frac{1}{2}+\frac{2}{3}>1$ and $\backslash \frac{1}{2}$.

$$\underset{n\to \infty }{\lim }\sum _{i=0}^n$$

This is a modest length header

Sometimes you need to break text up into smaller sections, and that’s what a title is for. The text that follows will be categorised nicely under the title head. Unfortunately, for this example page to be meaningful there really should be more text here. The title layout will probably look more obtuse than it really is, merely because there’s not a lot of body text to follow it.

Why not use lipsum? I don’t know. It kinda feels weird to me, wierdly uniform. When I see a layout with lipsum, I just see a bunch of blocks. Design is there to reinforce the text, so without any text it’s hard to say it’s doing that job.

How distinguished are the various heading levels?

I think too many levels of subheadings probably won’t be necessary. There really isn’t any reason to categorise text that deeply. This is a website, not a book. The longest an article will be is maybe 5,000 words. That much text probably doesn’t need to go that deep in subheads.

I think at most I’ll want to allow level 3 headings. Deeper than that is I think beyond the point of meaning. Even level 3 headings are pushing it, really.

Level 3 headers are the deepest permissable

If you look at Wikipedia articles, they’re almost entirely level 1 headings. Articles with anything deeper than level 2 headings are typically obscure articles that haven’t been subject to a more thorough look by experienced editors. It’s just not a particularly useful way to categorise text.

Ideas don’t typically follow a tree structure. If they do, that’s the exception, and a less typical structure than headings could be used to express that.

Lvl 4 header—naughty!

It’s also hard to even come up with heading styles that are properly distinct. Just making the text slightly smaller at every level isn’t even a particularly distinct look. Yeah, if get out your ruler and squint, 1.25em is bigger than 1.17em, but if you just see them in isolation you’re not going to be able to immediately say, yes, this text is 1.25em and therefore a level-3 heading.

Code with no syntax highlighting that hopefully has the same behaviour as the regular code even though it doesn't go in a div

There needs to be multiple visual elements indicating the heading’s level if it’s to be intuitively understood by an ordinary reader. But it’s hard to make something lower in a visual hierarchy than “literally just bold text”, which is what I want my level 3 headings to be.⁴

So the only thing left is to use some literal text. This “works”, for certain definitions of “works”. It’s almost certain to confuse an ordinary reader.

# Code snippets will auto-scroll instead of wrapping, which is very helpful
my $foo = __PACKAGE__;
print qq{We are in $foo\n};
# 1 ≠ 2

In summary:

• Any heading above lv3 looks the same as a lv3 heading, without a link
• Text body is around 100 characters long
• Text body will be shorter on smaller width displays

Sauce

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
   <polygon fill="#000000" points="0 0, 50 66, 100 0, 50 100"/>
   <circle fill="#000000" cx="150" cy="50" r="15"/>
   <circle fill="#000000" cx="250" cy="50" r="15"/>
   <circle fill="#000000" cx="350" cy="50" r="15"/>
   <polygon fill="#000000" points="400 0, 450 66, 500 0, 450 100"/>
</svg>

No such file or directory (os error 2)