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.

I am a subtitle with a link.⁠

Mats (starting with smallcaps).

Lists

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 checked off should still be crossed out and same (diminished) opacity
      • 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

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?

Section to transclude

Hi! Am I being transcluded?

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 }{{\epsilon }_0}\nabla \cdot \mathbf{B}=0\nabla \times \mathbf{E}=-\frac{\partial \mathbf{B}}{\partial t}\nabla \times \mathbf{B}={\mu }_0\left(\mathbf{J}+{\epsilon }_0\frac{\partial \mathbf{E}}{\partial t}\right)\mathcal{L}=-\frac{1}{4}{F}_{\mu \nu }{F}^{\mu \nu }+\bar{\psi }(i{\gamma }^{\mu }{D}_{\mu }-m)\psi S=\int d^{4}x\sqrt{-g}\left(\frac{R}{16\pi G}+{\mathcal{L}}_{\mathrm{matter}}\right)$$

Video

Audio

Images

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\to 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.⁠

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

Numbers and units

This computer has 16gb of ram and runs at 3.2GHz.

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 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.³⁴

Footnote spam.^56789101112

Code blocks

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

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…

What are your timelines?

Citation

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

☙❧