Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support font-variant-ligatures values #36740

Closed
wants to merge 2 commits into from
Closed

Support font-variant-ligatures values #36740

wants to merge 2 commits into from

Conversation

finnp
Copy link
Contributor

@finnp finnp commented Mar 31, 2023 •
edited
Loading

Summary

The text style prop fontVariant in React Native is supposed to map to the CSS font-variant property. The CSS property is a short-hand for the following CSS properties:

Currently React Native only supports a subset of the values from font-variant-numeric and font-variant-caps.

This change increases the font-variant support by adding all values from font-variant-ligatures.

Changelog:

[iOS] [Added] - Add all fontVariant values for font-variant-ligatures
[Android] [Added] - Add all fontVariant values for font-variant-ligatures

Test Plan:

See #36740 (comment)

Resources

@facebook-github-bot
Copy link
Contributor

Hi @finnp!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@finnp
Copy link
Contributor Author

finnp commented Mar 31, 2023

This change is related to increasing compability with web, linking #34425

@react-native-bot react-native-bot added Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Mar 31, 2023
@facebook-github-bot
Copy link
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Mar 31, 2023
@cortinico cortinico requested a review from necolas March 31, 2023 14:07
@finnp
Copy link
Contributor Author

finnp commented Mar 31, 2023

Here's a table of all the values:

Name Android TextView setting iOS Feature Type iOS Feature Selector
common-ligatures 'liga', 'clig' kLigaturesType kCommonLigaturesOnSelector
no-common-ligatures 'liga' off, 'clig' off kLigaturesType kCommonLigaturesOffSelector
discretionary-ligatures 'dlig' kLigaturesType kRareLigaturesOnSelector
no-discretionary-ligatures 'dlig' off kLigaturesType kRareLigaturesOffSelector
historical-ligatures 'hlig' kLigaturesType kHistoricalLigaturesOnSelector
no-historical-ligatures 'hlig' off kLigaturesType kHistoricalLigaturesOffSelector
contextual 'calt' kContextualAlternatesType kContextualAlternatesOnSelector
no-contextual 'calt off' kContextualAlternatesType kContextualAlternatesOffSelector

@finnp finnp marked this pull request as ready for review March 31, 2023 14:26
necolas
necolas approved these changes Mar 31, 2023
View reviewed changes
Copy link
Contributor

@necolas necolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Stamping

@finnp
Copy link
Contributor Author

finnp commented Mar 31, 2023 •
edited
Loading

Test Plan

I started testing iOS with a test project with the following code: https://github.com/finnp/react-native-font-test/blob/main/A

The results looks like this:

To find proper fonts to test I searched Github and also used https://otf.show/onum.

The same test on Android looks like this

Both screenshot look as expected ✅

@finnp
Copy link
Contributor Author

finnp commented Apr 3, 2023

@cortinico @necolas Is anything else needed here to get this merged?

@cortinico
Copy link
Contributor

@cortinico @necolas Is anything else needed here to get this merged?

Yes we need CircleCI tests to be green before we can import this. Can I ask you to logoff/login to your CircleCI as your token got revoked. You can do so from this UI: https://app.circleci.com/pipelines/github/facebook/react-native/21404

@analysis-bot
Copy link

analysis-bot commented Apr 3, 2023 •
edited
Loading

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 8,586,914 -4,681
android hermes armeabi-v7a 7,901,311 -4,395
android hermes x86 9,069,452 -4,627
android hermes x86_64 8,926,266 -4,908
android jsc arm64-v8a 9,174,285 +1,537
android jsc armeabi-v7a 8,364,703 +1,050
android jsc x86 9,231,816 +1,693
android jsc x86_64 9,489,208 +1,058

Base commit: 58ee6b2
Branch: main

@finnp
Support font-variant-ligatures values
67eff89 
The text style prop `fontVariant` in React Native is supposed to map
to the CSS `font-variant` property. The CSS property is a short-hand
for the following CSS properties:

- `[font-variant-alternates](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates)`
- `[font-variant-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)`
- `[font-variant-east-asian](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian)`
- `[font-variant-emoji](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji)`
- `[font-variant-ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)`
- `[font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)`
- `[font-variant-position](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position)`

Currently React Native only supports a subset of the values from
`font-variant-numeric` and `font-variant-caps`.

This change increase the `font-variant` support by adding all values
from `font-variant-ligatures`.

- [Apple True Type Reference](https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html)
- [Webkit Source Code](https://opensource.apple.com/source/WebCore/WebCore-7602.1.50.1.1/platform/graphics/cocoa/FontCacheCoreText.cpp)
- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)
- [Android TextView Documentation](https://developer.android.com/reference/android/widget/TextView#setFontFeatureSettings(java.lang.String))
@finnp
Add TypeScript values for font-variant-ligatures values
d9fa362
@facebook-github-bot
Copy link
Contributor

@cortinico has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Apr 5, 2023
@facebook-github-bot
Copy link
Contributor

@cortinico merged this pull request in f0893cf.

@necolas necolas mentioned this pull request Apr 5, 2023
Open
74 tasks
@finnp finnp deleted the font-variant-ligatures branch April 5, 2023 23:25
@pke pke mentioned this pull request May 4, 2023
Closed
jeongshin pushed a commit to jeongshin/react-native that referenced this pull request May 7, 2023
@finnp @jeongshin
Support font-variant-ligatures values (facebook#36740)
a6ed4d5 
Summary:
The text style prop `fontVariant` in React Native is supposed to map to the CSS `font-variant` property. The CSS property is a short-hand for the following CSS properties:

- [font-variant-alternates](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates)
- [font-variant-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)
- [font-variant-east-asian](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian)
- [font-variant-emoji](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji)
- [font-variant-ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) 👈
- [font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)
- [font-variant-position](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position)

Currently React Native only supports a subset of the values from `font-variant-numeric` and `font-variant-caps`.

This change increases the `font-variant` support by adding all values from `font-variant-ligatures`.

## Changelog:

[iOS] [Added] - Add all fontVariant values for font-variant-ligatures
[Android] [Added] - Add all fontVariant values for font-variant-ligatures

Pull Request resolved: facebook#36740

Test Plan:
See facebook#36740 (comment)
## Resources
- [Apple True Type Reference](https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html)
- [Webkit Source Code](https://opensource.apple.com/source/WebCore/WebCore-7602.1.50.1.1/platform/graphics/cocoa/FontCacheCoreText.cpp)
- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)
- [Android TextView Documentation](https://developer.android.com/reference/android/widget/TextView#setFontFeatureSettings(java.lang.String))

Reviewed By: cipolleschi

Differential Revision: D44705513

Pulled By: cortinico

fbshipit-source-id: 1cde5fcc23ba99fd2f98fa73d934c8e51b0d292e
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
@finnp @OlimpiaZurek
Support font-variant-ligatures values (facebook#36740)
af3c33c 
Summary:
The text style prop `fontVariant` in React Native is supposed to map to the CSS `font-variant` property. The CSS property is a short-hand for the following CSS properties:

- [font-variant-alternates](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates)
- [font-variant-caps](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps)
- [font-variant-east-asian](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian)
- [font-variant-emoji](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji)
- [font-variant-ligatures](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures) 👈
- [font-variant-numeric](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric)
- [font-variant-position](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position)

Currently React Native only supports a subset of the values from `font-variant-numeric` and `font-variant-caps`.

This change increases the `font-variant` support by adding all values from `font-variant-ligatures`.

## Changelog:

[iOS] [Added] - Add all fontVariant values for font-variant-ligatures
[Android] [Added] - Add all fontVariant values for font-variant-ligatures

Pull Request resolved: facebook#36740

Test Plan:
See facebook#36740 (comment)
## Resources
- [Apple True Type Reference](https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html)
- [Webkit Source Code](https://opensource.apple.com/source/WebCore/WebCore-7602.1.50.1.1/platform/graphics/cocoa/FontCacheCoreText.cpp)
- [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)
- [Android TextView Documentation](https://developer.android.com/reference/android/widget/TextView#setFontFeatureSettings(java.lang.String))

Reviewed By: cipolleschi

Differential Revision: D44705513

Pulled By: cortinico

fbshipit-source-id: 1cde5fcc23ba99fd2f98fa73d934c8e51b0d292e
@professorkolik
Copy link

When this can be released?

@cortinico
Copy link
Contributor

When this can be released?

This will land in 0.73

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@necolas necolas necolas approved these changes

Assignees
No one assigned
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@finnp @facebook-github-bot @cortinico @analysis-bot @professorkolik @necolas @react-native-bot