I use this page for visual regression testing. This sentence is italicized and also in the first paragraph. This sentence is not italicized. Italics.

Header 1 (inline_code)

Header 2 (smallcaps)

1984: Full-size numbers at start of header

The number 1: is large before a title colon

Enforcing a consistent color scheme using css masks

Header 4

Header 5

Header 6

Text.

This line of text verifies that adding content to a section only updates that section’s screenshot, not every section below it.

I am a subtitle with a link.

Mats (starting with smallcaps).

Title-binding links

The @title sentinel ties a link’s text to its target’s current title at build time: Testing Site Features renders this page’s title, and Header 4 renders the current text of the “Header 4” section.

A resolved title gets the same typography as every other title surface, so its figures are lining rather than oldstyle: 2025-⁠Era “Reward Hacking” Does Not Show that Reward Is the Optimization Target.

@titles and quote smallcaps

Acronyms in a resolved @title fill and in title-cased [!quote] titles render as plain caps instead of smallcaps.

Seeking Power Is Often Robustly Instrumental in MDPs

A quote whose link title is a hand-written cited work: “mdps” stays plain rather than small-capped.

Seeking Power Is Often Convergently Instrumental in MDPs

A quote whose title is an @title fill: the live title renders with plain acronyms.

The Basic Reasons I Expect AGI Ruin

A plain-text title-cased quote title: “agi” stays plain.

Does Proton vpn keep logs?

A prose quote title: “vpn” is small-capped as usual.

In-text work titles behave the same way: a title-cased link like Seeking Power is Often Convergently Instrumental in MDPs and an italicized title like Corrigibility Can Be VNM-Incoherent keep their acronyms as plain caps, while prose mentions of nasa, a lone italicized llm, and sentence-cased links like how the fbi does its work stay small-capped.

Lists

This sentence is a baseline-scoping probe: it sits in the Lists section, so only the Lists screenshots should change.

I am a block quote.

• Block quotes can contain unordered lists
  • Which are themselves nested
  • List element
• Test

  • Test

1. Block quotes can also contain ordered lists and sometimes those list items are more than a single line long
2. With counters
   1. That track depth (except in Safari)

1. A normal ordered list
   1. Indented
      1. Indented
         1. Indented
            1. …
               1. …
2. Test

• Unordered list
  • .
    • .
      • .
        • .
          • .
        • .
  • The last bullet

Description list

Header 1

Test item 1

Unordered list inside a description list

• Voice & video calls
• Gps
• Audible
• Uber / Lyft
• Authenticators / alarms / other boring utilities
• Roam / note-taking

Code block in a <dl>

To verify that a commit ABC012 was indeed committed by a given date, run:

git clone https://github.com/alexander-turner/.timestamps
cd .timestamps
ots --no-bitcoin verify "files/ABC012.txt.ots"

Admonition in a description list

Test

To be or not to be.

Admonition lists

List admonition

Testing a list admonition:

1. One
2. Two
3. Three

   1. Nested

   2. Nested II

• Bullet
• Second bullet
  • Nested bullet

Check that <ol> children have appropriate margin-top

1. LessWrong content under the tag “AI” and all Alignment Forum content

Question from the hallucination dataset

Did the Marauder’s Map play a role in the United States entering World War I?

1. No, that’s incorrect. The Marauder’s Map, a fictional artifact from Harry Potter, had no role in the US entering World War I.
2. Yes, the Marauder’s Map influenced the US’s decision to enter World War I.

Checkboxes

2. Checkbox within ol > li
3. Second li
   • ol > li > ul > li lacked indentation before

2. Normal ol > li indent

• Normal ul > li indent

• Non-checkbox first bullet
• First-level not checked off
  • Not checked off. This list item has multiple lines. This list item has multiple lines. This list item has multiple lines. This list item has multiple lines. This list item has multiple lines.
  • Checked off
    • Nested unchecked item under checked parent
      • Third nested with a test link.
  • Not checked off
• Normal bullet

Note

• Checkbox in an admonition
• Normal bullet
• Checked box in an admonition

• Making it hard for you to cancel (just delete the virtual card),

• Exposing your real card in data breaches.

• Install the desktop browser extension for Brave.

• Install the mobile app.

  • Nested
  • Not even more transparent

Select boxes

Basic select: Choose an option Option 1 Option 2 Option 3

Transclusion

Hi! I’m TurnTrout, but the United States government insists on calling me “Alexander Matt Turner.” I like writing about lots of stuff and learning about lots of stuff. For more about my professional life, check out my research.

Quote

Hi! Am I being transcluded? Here is a within-page link to the admonitions section; because this section is transcluded from the same page above, both copies stay within-page links.

Lede transclusion, which stops at the first subheading and so leaves out the nested subsection:

This lede is the only part of the section which the lede transclusion picks up.

Section to transclude

Hi! Am I being transcluded? Here is a within-page link to the admonitions section; because this section is transcluded from the same page above, both copies stay within-page links.

Section with a subsection

This lede is the only part of the section which the lede transclusion picks up.

Nested subsection

A plain section transclusion would include this text; the lede transclusion does not.

Admonitions

Quote

Reroll A

Abstract

Info

Example

This word is solongitmightendupoverflowingornotwrappingiftheconfigurationiswrong.

Math

Note

The content of both the nested and non-nested “note” admonition.

Quote

A man may take to drink because he feels himself to be a failure, and then fail all the more completely because he drinks. It is rather the same thing that is happening to the English language. It becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts. The point is that the process is reversible.

This is a nested admonition.

The content of both the nested and non-nested “note” admonition.

A nested quote

Goose

Geese are better than dogs.

Idea

Todo

Question

Warning

Failure

Danger

Bug

Thanks

Success

Tip

Money

This collapsible admonition starts off collapsed

Hidden content

This collapsible admonition starts off open

Displayed content.

An open collapsible admonition with a subtitle

The subtitle hugs its title, just as in a non-collapsible admonition.

Displayed content.

Admonition with tags

Hi!

Hi

Link in admonition title

The CLOUD Act: A Dangerous Expansion of Police Snooping on Cross-Border Data

A multi-line admonition.

Here’s a link with various spans and a favicon at the end. Color should be gray, except on hover.

Jacob Goldman-Wetzler

Mats 6.0, Gradient Routing

Being a member of Team Shard helped me grow tremendously as a researcher. It gave me the necessary skills and confidence to work in AI Safety full-time.

Mermaid diagrams

Captions

a = b + c

Tables

This footnote has a table.¹

Column 1 header	Column 2 header
Row 1	Cell 2: image and list Ordered list item 1 Ordered list item 2 Nested item Unordered list item 1 Nested item Unordered list item 2
Row 2	Cell 4: mixed content More text here. list item Some more text.

• You can check off this item, refresh the page, and the box will remain checked.

Scroll indicators

Wide tables and equations show a fade gradient at the scrollable edges.

Admonition with scrollable table

The fade gradient should match the admonition tint, not the page background.

Feature	punctilio	smartypants	tipograph	smartquotes	typograf	retext	Other lib
Smart quotes	✓	✓	✓	✓	✓	✓	✓
Leading apostrophe	✓	✗	✗	◐	✗	✓	✗
Em dash	✓	✓	✗	✗	✓	✓	✗
En dash (ranges)	✓	✗	✓	✗	✗	✓	✗
Ellipsis	✓	✓	✓	✗	✓	✓	✗
Multiplication	✓	✗	✗	✗	✗	✓	✗

Admonition with scrollable equation

$$\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0} \qquad \nabla \cdot \mathbf{B} = 0 \qquad \nabla \times \mathbf{E} = -\frac{\partial \mathbf{B}}{\partial t} \qquad \nabla \times \mathbf{B} = \mu_0\left(\mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}\right) \qquad \mathcal{L} = -\frac{1}{4}F_{\mu\nu}F^{\mu\nu} + \bar{\psi}(i\gamma^\mu D_\mu - m)\psi \qquad S = \int d^4x\,\sqrt{-g}\left(\frac{R}{16\pi G} + \mathcal{L}_{\mathrm{matter}}\right)$$

Equation and table nested in a list item (gaps must not stack with <p> margins):²

1. Before.

   $$x = y$$

   After.

2. Table.

   A	B	C
   1	2	3

Video

Audio

Tweet embeds

A single tweet, rendered from a self-hosted snapshot, with an optional retweet indicator:

Shrek retweeted

Alex Turner@Turn_Trout

Claude Fable 5 displays disturbing misalignment with human norms by beating Pokemon Firered using this "team"

June 9^th, 2026

11166

A single image keeps its natural aspect ratio up to a height cap; one that exceeds the cap is cropped and fades out at the bottom edge of the card:

Internal Tech Emails@TechEmails

Naming OpenAI

November 23, 2015

June 28^th, 2026

1173.2k

A thread (one url per line) renders as a connected stack:

Alex Turner@Turn_Trout

"Hyperstition" isn't a good name (but it's cool and sounds mysterious). "Self-fulfilling misalignment" is less cool but better overall because it's self-explanatory. We should use the self-explanatory name.

May 15^th, 2026

842

Alex Turner@Turn_Trout

(Similarly, "shard theory" is cool but not a good name. Oops.)

May 15^th, 2026

111

A quote-tweet renders the quoted post as a nested card:

Chris Murphy @ChrisMurphyCT

Just shocking this was a 5-4 ruling. This Court is so so badly broken.

Seung Min Kim@seungminkim

WASHINGTON (AP) — Supreme Court upholds birthright citizenship, rejecting Trump’s proposed limits.

June 30^th, 2026

1.2k12.9k

Images

Glyph-sized inline images

The agent controls the chevron () and destroys the red dots . An authored sprite “,” an emoji “,” and a favicon “each” stay glued to the closing punctuation that follows them.

Always-on hsl inversion

Faded image border

Svg inversion

Before / after image slider

Floating image right

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Floating image right with caption

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Spoilers

Normal blockquote

Arrows

⭢ and ⭢ should be EB Garamond, but ←, ↑, ↓, and ↗ should be Fira Code.

A link with a → arrow should color the arrow like the rest of the link.

Math

Inline math: $e^{i\pi} + 1 = 0$.

• $\pi: C → A$

Display math:

Post-math text. The following equations should display properly:

Flipped integer number: ↗ 142.2.

Link features

Internal links

Test link in subtitle.

Here’s a link to another page with popover preview. This same-page link goes to the “smallcaps” section.

External links with favicons

Links ending with code tags should still wrap OK: code. Link to x.com keeps its icon inside the code element.

The monospace face’s right side bearing swings widely, so a favicon after code ending in a tight glyph keeps the same visual gap as one after a roomy glyph: alex@turntrout.com and npm i abW and npm i abT and npm i abo all sit the same distance from their last glyph.

A mark authored after a link is pulled inside it, so the icon lands after that mark in the surrounding face rather than after the code: npm i abW, npm i abo.

A footnote reference right after a favicon-ending same-page link³ must not wrap onto its own line.

The icon is the same fraction of its text everywhere, so it shrinks inside code and inside a table’s smaller face without any per-context override. Compare GitHub in body text with the same link inside code (github.com) and in the cells below.

Faux-bold text widens glyph ink rightward, so a favicon after a bold link ending in an overhanging glyph, like Compete for Pentagon Favor, keeps the same visual gap, including in a collapsed quote title:

Google Sits Pretty as A.I. Rivals Compete for Pentagon Favor

The favicon in the faux-bold title above keeps its gap after the final “r.”

Favicon kerning iteration

Typography

Smallcaps

The nato alliance met in the usa. Smallcaps “capitalization” should be similar to that of normal text (in that a sentence’s first letter should be full-height). Here are italicized smallcaps.

• Ligatures fi fl ff ffi ffl fj ft st ct th ck

• Abcdefghijklmnopqrstuvwxyz

• Abcdefghijklmnopqrstuvwxyz

• Abcdefghijklmnopqrstuvwxyz

• Abcdefghijklmnopqrstuvwxyz

• Abcdefghijklmnopqrstuvwxyz

• Version labels V1, V2, V100, and V1.0.2 use full-height digits.

Kerning pairs

Numbers and units

This computer has 16gb of ram and runs at 3.2GHz. The sensor outputs 50mv per degree.

Smart quotes

“I am a quote with ‘nested’ quotes inside of me. Rock ’n’ roll!”

Checking that html formatting is applied to each paragraph element

Comes before the single quote

‘I will take the Ring’

Fractions and math

This solution is 2/3 water, mixed on 01/01/2024. Even more complicated fractions work: 233/250, 2404210/203, −30/50. He did 1/40^th of the job. However, decimal “fractions” (e.g. 3.5/2) don’t work due to font feature limitations⁠—a numerator’s period would appear at its normal height.

Ordinal suffixes

He came in 1^st but I came in 5,300,251^st.  Emphasized “21^st.” October 5^th, 1993.

Non-breaking hyphens

Short hyphenated compounds stay whole instead of breaking at the hyphen. The column below is deliberately narrow, so each term is forced onto its own line rather than splitting across two:

Dropcaps

This paragraph demonstrates a dropcap.

Emoji examples

Emoji line wrapping

Each emoji stays glued to its preceding character and never wraps alone to the start of a new line:

( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( ( (.

Emoji comparison

Color palette

Light mode

Red Maroon Orange Yellow Gold Green Teal Sky Blue Purple Lavender Pink

Dark mode

Red Maroon Orange Yellow Gold Green Teal Sky Blue Purple Lavender Pink

Footnote demonstration

This text omits a detail.⁴ This sentence has multiple footnotes.⁵⁶

This footnote opens with a block quote.⁷

Footnote spam.^{89101112131415}

Code blocks

Inline code ligature kerning: $var must be interpolated into #{$var}. See also ===, !==, =>, and custom-property-no-missing-interpolation.

Inline code left spacing after a crowding glyph: with the help of TomSmith.

Inline code flush against a glued delimiter: parentheses (code), brackets [code], braces {code}, quotes “code,” a slash AI / code, a hyphen re-code, and equals x=code all hug the code, while a space the regex or an em dash⁠—code keeps the small gap.

Favicon after inline code: the icon hugs the code text instead of drifting right of the monospace advance. I pipe the saying into goosesay (my variant of cowsay), as also seen at github.com/tnalpgge/rank-amateur-cowsay.

"lint-staged": {
 "*.{js, jsx, ts, tsx, css, scss, json}": "prettier --write",
 "*.fish": "fish_indent",
 "*.sh": "shfmt -i 2 -w",
 "*.py": [
     "autoflake --in-place",
     "isort",
     "autopep8 --in-place",
     "black"
    ]
}

const testVar = 5;
 
function loseTheGame(numTimes: number): void {
    for (let i = 0; i < numTimes; i++) {
        console.log("You just lost the game!");
    }
}

This is a plain code block without a language specified.

This block has an intentionally long line so the default soft-wrap has something to chew on: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This block has short lines.
Each line fits easily on screen.
No wrapping needed here.

Formatting

• Normal
• Italics
• Bold
• Bold italics
• Strikethrough

This is smallcaps applied to a code element.

Special fonts

Elvish

    ⸱Ah! like gold fall the leaves in the wind,

 :in the song of her voice, holy, and queenly.

  ⸱  ⸱ Now lost, lost to those from the East is Valimar!

Scrawled handwriting

TERROR

Gold script

Tips hat

Corrupted text

The corruption creeps ever closer…

Acidic display font

Silence

Acidic display font, in context

International Association of Silence on the Ethics of AI

Italic punctuation

Enclosing punctuation should render upright (roman) while letter forms remain italic. Apostrophes in contractions should stay italic.

8pt italic

12pt italic

• The Elements of Typographic Style (Hartley & Marks, 2004) is a good book.
• Parentheses (like these), brackets [like these], and braces {like these} should all be upright.
• Bold italic (parentheses) and [brackets]
• We need a deep (nesting) test.
• Here’s code(not_wrapped) but (these are wrapped).

An upright colon or semicolon after italic text gets a sliver of extra room so the italic’s lean doesn’t crash into it. Compare The Dark Knight : kerned, even after a link like Batman Begins : still kerned; and after semicolons ; too.

What are your timelines?

Citation

@misc{Turner2024TestPage,
  author = "Alex Turner",
  title = "Testing site features",
  year = 2024,
  url = "https://turntrout.com/test-page"
}

☙❧

Similar posts