[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 text, and its layout doesn't say which glyphs it placed. So on iOS 18 a TextRenderer sets each outlined run's text again with Core Text, in the same font, and strokes those glyph paths where SwiftUI placed each glyph. The stroke is centred on the edge with mitred corners (limit 4), the same as Android and the web.
• 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.

The first version of the iOS side faked the stroke by stamping nudged copies of the glyph and cutting the inside out. The cut took out the whole glyph, so it drew a thin band outside the letter with rounded corners. The close-ups below show the difference.

Worth checking

• The outlined run carries its font as a Core Text font, built the way its SwiftUI font is: the bundled font by name (italic face, or the same synthesized oblique), otherwise the system font at the run's weight and design. The size comes from the laid-out run, so Dynamic Type still applies. If SwiftUI ever picked a different face than that, the outline would trace the wrong glyph.
• Overlapping contours inside a glyph are merged before stroking. SF draws letters like B and e from overlapping shapes, and without this the stroke shows lines inside them.
• Underline, strikethrough and a background chip stay solid under an outlined run, as on Android, whose text layout switches to fill for those even when the glyphs are stroked. On iOS the outlined run is laid out with see-through glyphs and decorations in the text colour. The renderer draws the run, which leaves just those where SwiftUI puts them, then strokes the outlines on top. The leaf path now passes the text colour to underline/strikethrough explicitly, because the first decoration modifier on a Text wins. That looks the same for text that isn't outlined.
• See-through text hides emoji too, so glyphs with no outline (emoji) are drawn from their glyphs with Core Text.
• 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. Each outlined run gets its own piece. 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 twice the outline width, which is as far as a mitred corner can reach.

Screenshots

iOS close-ups of the wordmark at 17pt (Geist, as in the app), before and after this change, light and dark, then the same at 40pt:

Android close-ups, light and dark:

Underline, strikethrough, a chip and an emoji in outlined runs on iOS, each next to the same run filled. Before this change iOS dropped all three, and left stray bits of them at spaces:

More iOS cases: the system font, a leaf, italics, Dynamic Type at accessibility sizes, and a run that wraps with an emoji in it. Then Android in the devnull app:

iOS samples	Android light	Android dark

Testing

• iOS: the new screenshots come from a small simulator app that compiles this plugin's NativeUITextRenderer, NativeUIFontResolver and NativeUITheme with stub nodes and the devnull app's Geist fonts. I ran it on iOS 27 (iPhone 17 Pro) and iOS 18.5 simulators. I haven't rebuilt the devnull app with this change yet.
• iOS typecheck with mobile-air's render sources: the same 138 errors as before the change, all from types outside those folders, plus a planted error to prove the file was checked.
• Android: unchanged since it was built (BUILD SUCCESSFUL) and run on an API 35 emulator.
• For the first round of 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