From 2144968ecb424a23b9fd071fc690c83127d72bd5 Mon Sep 17 00:00:00 2001 From: Simon Hamp Date: Tue, 20 Oct 2026 01:38:24 +0100 Subject: [PATCH] Document text-outline for outlined text Co-Authored-By: Claude Opus 5.5 --- .../docs/mobile/4/edge-components/text.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/resources/views/docs/mobile/4/edge-components/text.md b/resources/views/docs/mobile/4/edge-components/text.md index 134c81a3..8a735ffb 100644 --- a/resources/views/docs/mobile/4/edge-components/text.md +++ b/resources/views/docs/mobile/4/edge-components/text.md @@ -39,6 +39,7 @@ All [shared layout and style attributes](layout) are supported, plus: - `line-through` - Strikethrough: `1`=on, `0`=off (optional, int) - `text-transform` - Case: `0`=none, `1`=uppercase, `2`=lowercase, `3`=capitalize (optional, int) - `letter-spacing` - Tracking in em relative to font size (optional, float) +- `text-outline` - Draws the text hollow, as an outline this many points wide in its color (optional, float) — see [Outlined text](#outlined-text) - `font` - Custom font: a `resources/fonts/` file token or a config alias like `accent` (optional, string) — see [Custom fonts](#custom-fonts) Line height is set with `leading-*` classes — see [Line height](#line-height). @@ -204,6 +205,7 @@ Style text with Tailwind classes — these compose with `text-*` size and `font- `tracking-normal`, `tracking-wide`, `tracking-wider`, `tracking-widest` (in em, relative to the font size) - **Font family** — `font-sans` (default), `font-serif`, `font-mono` +- **Outline** — `text-outline`, `text-outline-2`, `text-outline-[1.5]` (in points) — see [Outlined text](#outlined-text) @verbatim ```blade @@ -231,6 +233,29 @@ its own classes (weight, color, size): Runs render in document order, so interleaved text and nested `` stay in sequence. A `` with no nested runs behaves exactly like a plain string. +## Outlined text + +`text-outline` draws text hollow: just the outline of its glyphs, in the text color, centered on their edges. It's +the same look as CSS `-webkit-text-stroke` with a transparent fill. The width is in points: `text-outline` is 1, +`text-outline-2` is 2, and `text-outline-[1.5]` takes any value. + +It works on a whole `` or on one inline run. Nested runs inherit it, and `text-outline-0` turns it off +again: + +@verbatim +```blade + + /dev/null + +``` +@endverbatim + + + ## Text selection Text isn't selectable by default. Add `select-text` to make a subtree long-press-selectable (the native Copy