Everything This Blog Can Render

An exploration of everything a page can hold: quiet typography, expressive color, precise equations, detailed diagrams, and a small window onto the first steps on the Moon.

Good presentation gives every idea the space and shape it needs.

This showcase moves from the smallest details—an emphasized word or a superscript—to full-width tables, interactive disclosures, and moving images. Use On this page to explore a section, or scroll through the whole collection.

Typography and inline formatting

The baseline paragraph pairs a clear typeface with generous line spacing. Here’s bold, italic, bold italic, strikethrough, underline, and highlighted text, all on the same line.

inline code stands apart from the surrounding text. A technical sentence might mention const, Array.prototype.map(), or a file such as telemetry.json. Scientific notation can use x², while chemical notation can use H₂O. The API abbreviation reveals its expansion on hover where supported.

Punctuation can take center stage, too: an asterisk *, a backtick `, an ampersand &, and an em dash —.

Fonts

Body sans serif: precise, quiet, and readable.

Serif: useful for a literary interruption or an occasional pull quote.

Display: a little more personality without changing the whole article.

Monospace: for technical labels, metadata, and the occasional terminal joke.

Text sizes

Small text is for secondary details, not for hiding important information.

Normal text follows the article’s responsive font size.

Large text gives an observation a bit more presence.

Lead text can introduce a section without requiring another heading.

Text colors

Sage · restrained green
Sky · cool blue
Amber · warm yellow
Coral · muted red
Violet · soft purple
Muted · quieter supporting text

Styles can be combined: large coral serif or small sky-colored monospace.

Alignment

Left aligned: the ordinary starting point.

Centered: a brief statement or caption.

Right aligned: a signature, perhaps.

Headings and navigation

The On this page table of contents offers a quick path between sections. On a narrow screen, it sits above the text for easy access.

Level-three heading

A third-level heading marks a smaller section within a larger idea.

Level-four heading

The fourth level is supported in the body but intentionally not included in the automatically generated table of contents.

Level-five heading

Smaller still: a quiet label for the finer details.

Level-six heading

The smallest heading in the hierarchy. Six levels leave plenty of room for detail.

Jump back to typography, browse the writing archive, or explore NASA’s Apollo 11 collection. A full address can be a link, too: https://www.jason-shaw.com.

Quotes, rules, and lists

Good tools should make the easy things simple and the hard things possible.

A second paragraph gives a quotation room to develop its thought.

A quotation within a quotation adds another layer of emphasis.

A horizontal rule separates two thoughts without pretending to be a heading.

---

Unordered and nested lists

• Software
  • Static rendering
  • Accessible markup
  • Syntax highlighting
• Hardware
  • Mechanical constraints
  • Electrical constraints
• Writing, which occasionally benefits from having fewer lists

Ordered lists

1. Choose a clear night.
2. Find a comfortable observing spot.
   1. Look for an open view of the sky.
   2. Let your eyes adjust to the darkness.
3. Locate the Moon and its brightest features.
4. Take a moment to appreciate the distance.

Task lists

• Binoculars packed
• Star chart ready
• Find the Sea of Tranquility
• Sketch the lunar terminator
• Spot a passing satellite

Callouts and expandable content

Expand this section for additional detail

An expandable section keeps extra detail close at hand, with room for paragraphs, bold text, and a list:

• A first detail.
• A second detail.

You can also focus the disclosure heading with Tab and toggle it with Enter or Space.

This second disclosure starts open

Some details deserve to be visible at first glance. Collapse this section to tuck them away.

Code and syntax highlighting

Code blocks combine a language label, highlighted syntax, horizontal scrolling for long lines, and a Copy code button. The examples below show how different languages look side by side.

TypeScript

interface Mission {
  name: string;
  crew: string[];
  destination: string;
}

const mission: Mission = {
  name: "Apollo 11",
  crew: ["Neil Armstrong", "Buzz Aldrin", "Michael Collins"],
  destination: "Moon",
};

const summary = `${mission.name}: ${mission.crew.join(", ")}`;
console.log(summary);

Python

from dataclasses import dataclass

@dataclass(frozen=True)
class Stepper:
    steps_per_revolution: int = 200
    microsteps: int = 16

    def steps_for_angle(self, degrees: float) -> int:
        return round(self.steps_per_revolution * self.microsteps * degrees / 360)

print(Stepper().steps_for_angle(90))

Shell

mkdir -p observations
printf 'Moon: clear skies\n' > observations/tonight.txt
cat observations/tonight.txt

JSON

{
  "mission": "Apollo 11",
  "year": 1969,
  "destination": "Moon",
  "crew": ["Armstrong", "Aldrin", "Collins"]
}

Diff

- const distance = 384400;
+ const distanceKm = 384400;
  console.log("Average Earth–Moon distance");

An intentionally long line

const observationLog = "Clear skies / a bright lunar crescent / long shadows along the terminator / a satellite crossing overhead / one last look before the clouds roll in";

A plain-text block gives a simple sequence its own space:

EARTH -> TRANSIT -> MOON

Tables and horizontal overflow

Capability	Example	Expected result
Typography	Bold, italic, highlights	Styled text
Mathematics	Inline and display equations	Typeset notation
Code	TypeScript and Python	Highlighted blocks
Tables	This very table	Readable columns

The next table is intentionally wider than a phone. Scroll sideways to explore its columns without losing your place on the page.

Collection	Typography	Callouts	Math	Code	Images	Media	Embeds	Navigation
Essentials	Emphasis	Notes	Equations	TypeScript	Artwork	Audio	Apollo 11	Section links
Details	Color	Tips	Fractions	Python	Figures	Video	YouTube	Horizontal scroll

A compact table with a caption and column headings.

Measurement	Value
Article layout	Responsive
Table width	Constrained by a scrolling wrapper

Mathematics and technical notation

Inline mathematics flows with a sentence: $E = mc^2$, $\theta = \frac{\pi}{2}$, and $\omega = \frac{2\pi}{T}$.

Display mathematics deserves its own line. For a simple integral:

$$\int_0^1 x^2\,dx = \left[\frac{x^3}{3}\right]_0^1 = \frac{1}{3}$$

A rotation matrix brings several rows of notation together:

$$\begin{bmatrix} 1 & 0 & 0 \\ 0 & \cos\theta & -\sin\theta \\ 0 & \sin\theta & \cos\theta \end{bmatrix}$$

And a stepper-motor example gives the notation a reason to exist:

$$\begin{aligned} N_{\text{steps}} &= \frac{\theta}{360^{\circ}} \, N_{\text{full}}\, \mu \\ &= \frac{90}{360} \cdot 200 \cdot 16 = 800 \end{aligned}$$

Fractions, matrices, and aligned equations give technical ideas room to breathe. Wide expressions stay within a horizontally scrollable area.

Images, figures, and diagrams

A simple image follows the width of the reading column:

The same asset can appear in a semantic figure with a caption:

Inline vector diagram

Vector lines and labels stay sharp as the diagram scales from a phone to a wide display.

Audio, video, and third-party embeds

HTML video

The following video uses a publicly hosted example MP4. Playback depends on the external provider and browser policy.

HTML audio

An unmistakable sound in a compact player: a horse’s whinny. Press play to listen.

Embedded iframe

Watch the full restored moonwalk on YouTube.

Footnotes and references

A short note can add context without sending every reader away mid-sentence.¹ A second reference leaves room for a longer detour.²

Section links, full addresses, and external references connect a page to the world around it. Their underlines make them recognizable alongside the surrounding text.

The whole picture

Small details add up: the rhythm of a paragraph, the alignment of an equation, a caption beneath an image, and a moving glimpse of another world. Together, they give a page enough range for a brief observation or a much deeper exploration.

Return to the typography examples, revisit the Apollo 11 clip, or explore more writing.

---

A page of possibilities, down to the smallest detail.

Footnotes

1. Footnotes collect supporting details at the end of the page. The return arrow takes you back to the sentence you were reading. ↩

2. NASA’s restored Apollo 11 moonwalk offers a longer look at the astronauts’ time on the lunar surface. ↩