iOS Typography: Inconsistent Ligature Rendering

[coston]

Description

Behavior: react-native-svg Text components render undesired ligatures in iOS, but does not in Android or Web.
Expected behavior: Text renders the text passed to it and is the same across iOS, Android, and Web.

Steps to reproduce

1. Use a font that has good ligatures support, such as Roboto.
2. Render svg Text キロ, メートル coston in iOS, web, and Android
3. 🎯 Notice that in iOS, the japanese text is collapsed into a combined character, and in Coston, the s and t are combined. These are not the correct values.

Snack or a link to a repository

https://github.com/coston/react-native-svg-victory-2912

SVG version

15.9.0

React Native version

0.76.2

Platforms

iOS

Workflow

Expo Dev Client

Device

iOS simulator

Device model

iPhone SE (3rd Generation) iOS 18.1

Acknowledgements

Yes

[coston]

This issue was first seen in FormidableLabs/victory#2912

[coston]

The goal is for iOS to not show discretionary ligatures, by default, which is the normal iOS setting. Android is not showing discretionary ligatures.

For some reason, setting the iOS NSLigatureAttributeName value to 1 in react-native-svg code still renders discretionary ligatures (2). I'm not sure what i'm overlooking in this case.

For anyone following along, I have a demo of how the NSLigatureAttributeName values render ligatures here: https://github.com/coston/NSLigatureAttributeName-demo