[simonhamp]

Text runs can now draw hollow: just the outline of their glyphs, in the run's own colour. This goes with NativePHP/mobile-air#549, which adds the text-outline class and passes it as the text_outline prop. I needed it for the dev/null wordmark, whose middle slash the web draws as an orange outline with -webkit-text-stroke.

How it draws

• Android: the span or leaf gets Compose's Stroke draw style, at the width in dp. That's a real centred stroke with no fill.
• iOS: SwiftUI can't stroke glyphs, so on iOS 18 a TextRenderer builds the outline out of the glyphs themselves. Copies nudged out by half the width in 16 directions make the outer edge. The part that copies nudged in by half the width all still cover is cut out of that, which makes the inner edge. The result is the same centred stroke.
• Before iOS 18, outlined runs draw filled as before.
• Nested runs inherit the width, like the other text props, and text-outline-0 turns it off.

Worth checking

• The iOS outline's corners come out slightly rounded, because the copies are nudged around a circle. Android's are sharp miters, like the web's. At 1pt you have to zoom in to see it.
• A composed text with an outlined run is built as several Text values joined together, because a TextRenderer can only see attributes set on Text, not on an AttributedString. Composed text without an outline still builds the one attributed string it always did, and the custom renderer is only installed when something is outlined.
• The renderer's displayPadding is half the outline width, so the outline isn't clipped at the edges.

Screenshots

From the devnull app, where the wordmark's middle slash uses text-outline text-theme-lane-0. The close-ups show the web on top, the app's earlier solid slash in the middle, and text-outline at the bottom, all at 17pt on iOS:

Light	Dark

Android close-ups, light and dark:

iOS light	iOS dark	Android light	Android dark

Testing

• iOS: built and run on an iPhone 17 Pro simulator (iOS 27). I also typechecked the plugin's Swift with mobile-air's render sources: same error count as main, all from types outside those folders, plus a planted error to prove the file was checked.
• Android: built (BUILD SUCCESSFUL) and run on an API 35 emulator.
• For the test builds, both changes were applied on top of the combined/dev-null-app branches the devnull app uses.

Docs: NativePHP/nativephp.com#565.

🤖 Generated with Claude Code