Text with italic/bold-italic fonts is horizontally clipped

Description

Text rendered with italic or bold-italic custom fonts gets horizontally clipped on both iOS and Android. The last glyph on a line is cut off because the text layout measurement is based on advance widths rather than ink bounds (the actual drawn pixel extent of glyphs).

Italic and bold-italic fonts commonly have glyph outlines that overshoot their declared advance width. The platform text layout engines (StaticLayout/BoringLayout on Android, NSLayoutManager.usedRectForTextContainer: on iOS) size the text container using advance widths only, so the rightmost glyph's ink gets clipped by the container boundary.

This is especially visible with:

• Large font sizes
• Custom bold-italic fonts with prominent overshoot (e.g. Magistral-BoldItalic)
• Text views sized with alignSelf: 'flex-start'

Steps to reproduce

1. Load a custom bold-italic font (e.g. Magistral-BoldItalic)
2. Render a <Text> component with alignSelf: 'flex-start' so the text view is not stretched to full width
3. Observe that the rightmost character is clipped horizontally

React Native Version

0.83.2

Affected Platforms

Runtime - Android, Runtime - iOS

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

System:
  OS: macOS 15.7.3
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 1.58 GB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.3.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 10.9.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 32.0.0
      - 33.0.0
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-30 | Google Play Intel x86 Atom
      - android-31 | Google APIs Intel x86_64 Atom
      - android-33 | Google Play Intel x86_64 Atom
      - android-34 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play Intel x86_64 Atom
      - android-35 | ARM 64 v8a
      - android-35 | Intel x86_64 Atom
      - android-35 | Google APIs Intel x86_64 Atom
      - android-35 | Google Play Intel x86_64 Atom
      - android-36 | Google Play Intel x86_64 Atom
      - android-36 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-36 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom
      - android-36 | Pre-Release 16 KB Page Size Google APIs ARM 64 v8a
      - android-36 | Pre-Release 16 KB Page Size Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14432022
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.3.5
    path: /usr/local/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.2.0
    wanted: 19.2.0
  react-native:
    installed: 0.83.2
    wanted: 0.83.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

no crash

MANDATORY Reproducer

https://snack.expo.dev/@alex_p8/font-overflow-fix

Screenshots and Videos

Expected Behavior

The text container should be wide enough to fully contain the drawn glyphs. The measurement should account for ink bounds (the actual pixel extent of rendered glyphs), not just advance widths.

Actual Behavior

The rightmost glyph on each line is horizontally clipped. The text container is too narrow because it is sized based on advance widths, which do not account for glyph overshoot common in italic and bold-italic typefaces.

Reproduziere das Abschneiden mit dem verknüpften Snack und verfolge anschließend die Messung von React-Native-Text bis zu Androids StaticLayout/BoringLayout und iOS' NSLayoutManager.usedRectForTextContainer:. Vergleiche den gemessenen Container mit den gerenderten Tintenbegrenzungen für kursive und fett-kursive benutzerdefinierte Schriftarten. Erledigt ist die Aufgabe, wenn das ganz rechte Glyph auf Android und iOS im gemeldeten alignSelf-Fall vollständig sichtbar ist.