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.

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 @title-lower.

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.

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.

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.

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, 7:15 p.m.

10165

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, 3:29 p.m.

1183.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, 5:44 p.m.

841

Alex Turner@Turn_Trout

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

May 15^th, 2026, 5:44 p.m.

110

Images

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?

Spoilers

Normal blockquote

Arrows

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

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.

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.

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.^{7891011121314}

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.

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

What are your timelines?

Citation

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

☙❧

Similar posts