[Text][Android][iOS?][RC] text decorations ignoring font position metrics

[axyz]

Description

87184c8fbac1 implemented textDecorationStyle feature parity between iOS and Android (before RC missing in Android as noop). cc @quantizor

The position and sizing of the lines (underlines, strike through), though, are not based on the open type tables of the used font, instead different heuristics are used (mid of x size fo strike through, baseline + 1 for underline)

This leads to a wrong final result, where underlines is always touching the baseline, and strike-through may be oddly positioned.

The problem is more visible in custom fonts that intentionally define larger offsets for the underline (e.g. to avoid crossing descenders), or use a curated position for strike through (e.g. avoiding overlapping with currency symbol mid lines). Those are just some examples, but in general the expectation is to respect the values embedded in the font.

---

On iOS there is a similar issue: while "solid" and "double" underlines respect values that CoreText reads from the font, the position of "wavy", "dashed", "dotted", instead is using the same hardcoded heuristic now introduced on Android.

(I couldn't directly verify the issues on iOS, but inferred from similar code. Would be worth also verifying how the strike through position is determined there)

---

I'm not familiar with the native code, but I think both the current state as well as the one in the RC have issues, with underlines on Android now always touching the glyphs just being the most visible one.

LLM suggested possible fixes involving reading the correct metric when they are available, while falling back to heuristics when not available.

    drawSpannedDecoration(start, end, canvas, layout, color, style) {
        paint,
        baseline,
        thickness,
      ->
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        baseline + paint.underlinePosition + thickness / 2f
      } else {
        baseline + thickness + 1f
      }
    }

    CTFontRef ctFont = (__bridge CTFontRef)font;
    CGFloat fontThickness = CTFontGetUnderlineThickness(ctFont);
    CGFloat thickness = fontThickness > 0
        ? fontThickness
        : MAX(font.pointSize / 12.0f, 1.5f);
    CGFloat topOffset = -CTFontGetUnderlinePosition(ctFont);
    CGFloat y = baseline + topOffset + thickness / 2.0f;

I haven't directly verified these suggestions and I also think a wider assessment may be needed:

• are there other metrics being ignored and replaced with custom heuristics?
• Is any of those changes compatible with the recent introduction of variable fonts support? (Add font-variation-settings feature for variable fonts react-native-community/discussions-and-proposals#829 (comment)) cc @Abbondanzo
• when heuristics are used as fallback, are they in sync with web browsers implementation?
• should font metrics be respected by default, or via a style property like on web (e.g. text-underline-position: from-font)
• probably more things I'm missing needing some text rendering experts' eyes

Steps to reproduce

run the reproducer and check the actual and expected rendering (as in screenshot)

can also be compared with older RN version where underline was correctly rendered with a large offset: https://snack.expo.dev/@axyzxp/underline-rendering?platform=android

React Native Version

0.87.0-rc.4

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx @react-native-community/cli info

❯ npx @react-native-community/cli info
info Fetching system and libraries information...
System:
  OS: Linux 7.0 Ubuntu 26.04 LTS 26.04 LTS (Resolute Raccoon)
  CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
  Memory: 13.25 GB / 30.57 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 26.7.0
    path: /home/axyz/.local/share/mise/installs/node/latest/bin/node
  Yarn: Not Found
  npm:
    version: 11.19.0
    path: /home/axyz/.local/share/mise/installs/node/latest/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 21.0.7
    path: /home/axyz/app/android-studio/jbr/bin/javac
  Ruby:
    version: 3.3.8
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.2.0
    wanted: 20.2.0
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.87.0-rc.4
    wanted: 0.87.0-rc.4
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

there is no crash, it is a visual defect.

MANDATORY Reproducer

https://github.com/axyz/rn-reproducer-font-rendering

Screenshots and Videos