search

software-mansion / react-native-svg

SVG library for React Native, React Native Web, and plain React web projects.
MIT License
7.51k stars 1.13k forks source link

iOS Typography: Inconsistent Ligature Rendering #2545

Open coston opened 2 days ago

coston commented 2 days ago

Description

Screenshot 2024-11-19 at 14 58 30

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 commented 2 days ago

This issue was first seen in https://github.com/FormidableLabs/victory/issues/2912

coston commented 5 hours ago

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