No Login Data Private Local Save

text‑indent & hanging‑punctuation Demo - Online

21
0
0
0

text-indent & hanging-punctuation Demo

Interactive playground for CSS text indentation and hanging punctuation — see how these properties refine typography in real-time.

Text Indent
40px
Negative values create hanging indents (first line sticks out left).
Hanging Punctuation
Best supported in Safari. Chrome requires flag. See FAQ below.
Preview Font Size
16px
Preset Texts
Browser Support (hanging-punctuation)
Safari — Full Chrome — Partial* Firefox — None Edge — Partial*
* Chrome/Edge require #enable-experimental-web-platform-features flag enabled.
Generated CSS
text-indent: 40px; hanging-punctuation: none;
Opening punct: 0 Closing punct: 0 Total chars: 0
The quick brown fox jumps over the lazy dog. This paragraph demonstrates text-indent in action — notice how the first line starts with an offset while subsequent lines align normally. "Quoted text appears here," she said, "and punctuation marks like periods, commas, and semicolons are visible throughout."
Edit the text above to see how different punctuation and paragraph structures affect the rendering.
Pro tip: Try text-indent: -30px with padding-left: 30px for a classic hanging indent (great for bibliographies). Combine with hanging-punctuation: first in Safari to let opening quotes hang elegantly outside the text block.

Frequently Asked Questions

What is text-indent in CSS?

text-indent controls the indentation of the first line of a block of text. Positive values push the first line to the right (like a traditional paragraph indent), while negative values pull it to the left — creating a hanging indent (common in bibliographies and reference lists). It accepts units like px, em, rem, %, and ch. The property is inherited and applies to block-level elements.

What is hanging-punctuation and why should I care?

hanging-punctuation allows certain punctuation marks (like quotation marks, periods, and commas) to hang outside the text block's edges. This creates optically smoother alignment — the text characters themselves align perfectly, while punctuation sits slightly outside. It's a subtle but powerful typographic refinement used in professional typesetting. Values include none, first (opening quotes on the first line), last (closing punctuation on the last line), force-end (all line-end punctuation), and allow-end (conditional hanging).

Which browsers support hanging-punctuation?

As of 2025, Safari (both macOS and iOS) provides full support for hanging-punctuation. Chrome and Edge offer partial support behind the #enable-experimental-web-platform-features flag (enter chrome://flags in the address bar to enable). Firefox does not currently support this property. For cross-browser projects, consider it a progressive enhancement — the text remains perfectly readable even without support.

How do text-indent and hanging-punctuation work together?

They complement each other beautifully! For example, you might use text-indent: 30px to indent the first line of a paragraph, then add hanging-punctuation: first so that if the paragraph starts with a quotation mark, it hangs outside the indent — keeping the actual text character perfectly aligned with the indentation point. This is especially elegant in book typography and editorial design.

What's a "hanging indent" and when is it used?

A hanging indent (achieved with a negative text-indent plus matching padding-left) is where the first line extends to the left of the rest of the paragraph. It's the standard format for APA, MLA, and Chicago style reference lists. For example: text-indent: -40px; padding-left: 40px; creates a clean hanging indent — the first line (usually the author's name) sticks out, while the rest of the citation is indented.

What punctuation marks are affected by hanging-punctuation?

The CSS specification targets specific Unicode categories. For opening punctuation (affected by first): opening quotation marks like " ' 「 『, opening brackets ( [ {. For closing punctuation (affected by last, force-end, allow-end): periods ., commas ,, semicolons ;, colons :, closing quotes, closing brackets, and exclamation/question marks. The exact set depends on the browser's implementation.

Can I use percentage values for text-indent?

Yes! text-indent accepts percentage values, which are calculated relative to the width of the containing block. For example, text-indent: 5% on a 600px-wide container creates a 30px indent. This is useful for responsive designs where you want the indent to scale with the layout. However, for precise typographic control, em or rem units are often preferred as they scale with the font size.

Does text-indent affect all lines or just the first?

text-indent only affects the first formatted line of a block element. All subsequent lines remain at the normal edge of the content box. If you want to indent every line, you'd use padding-left instead. This is a common point of confusion — text-indent is specifically a first-line property, which makes it perfect for paragraph styling and hanging indents.

🔧 Related Tools