feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values #34003

thuongtv-vn · 2022-06-13T09:03:49Z

Summary

Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20)

stylistic-three(ss01)
stylistic-two(ss02)
stylistic-three(ss03)
stylistic-four(ss04)
stylistic-five(ss05)
stylistic-six(ss06)
stylistic-seven(ss07)
stylistic-eight(ss08)
stylistic-nine(ss09)
stylistic-ten(ss10)
stylistic-eleven(ss11)
stylistic-twelve(ss12)
stylistic-thirteen(ss13)
stylistic-fourteen(ss14)
stylistic-fifteen(ss15)
stylistic-sixteen(ss16)
stylistic-seventeen(ss17)
stylistic-eighteen(ss18)
stylistic-nineteen(ss19)
stylistic-twenty(ss20)

References:
https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html#Type3
https://docs.microsoft.com/en-us/typography/opentype/spec/featurelist

Example:
<Text style={{ fontVariant: ['stylistic-three', 'stylistic-five'] }}> Hello World! </Text>

Changelog

[iOS] [Added] - Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20)
[Android] [Added] - Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20)

Test Plan

facebook-github-bot · 2022-06-13T09:03:53Z

Hi @thuongtv-vn!

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@fb.com. Thanks!

analysis-bot · 2022-06-13T09:20:10Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 97291bf
Branch: main

analysis-bot · 2022-06-13T09:42:59Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	7,825,846	+1,524
android	hermes	armeabi-v7a	7,213,153	+1,527
android	hermes	x86	8,136,369	+1,528
android	hermes	x86_64	8,116,924	+1,525
android	jsc	arm64-v8a	9,692,435	+1,810
android	jsc	armeabi-v7a	8,448,662	+1,828
android	jsc	x86	9,643,724	+1,808
android	jsc	x86_64	10,241,101	+1,830

Base commit: 97291bf
Branch: main

facebook-github-bot · 2022-06-13T11:01:09Z

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 · 2022-06-13T11:01:13Z

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 · 2022-06-13T13:01:05Z

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 · 2022-06-13T19:44:56Z

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

cortinico · 2022-06-13T20:19:32Z

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java

+          case "stylistic-three":
+            features.add("'ss03'");
+            break;
+          case "stylistic-five":
+            features.add("'ss05'");
+            break;


Why are we adding only ss03 and ss05 here? What's your use case?
https://docs.microsoft.com/en-us/typography/opentype/spec/features_pt#ssxx

Hi @cortinico

Thank for your question. Because fontVariant now only have some regular setting features. In my case i would like to alternative 'a', 'g', '1' characters. It would be good if we can add all the font features. I am thinking about how dynamic it is. Do you have any advice?

IMHO either we include all of them, or we include none.

Hi @cortinico
Thank you for your suggestion. I updated my pull request with fully added 20 font stylistics.

cortinico · 2022-06-21T21:25:06Z

Could you rebase as the CI should be green now?

…riant value

thuongtv-vn · 2022-08-16T08:04:18Z

Hi @cortinico
I had rebased my pull request. Do I need to update any further to get it merge?

facebook-github-bot · 2022-08-16T13:52:51Z

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

react-native-bot · 2022-08-17T10:15:04Z

This pull request was successfully merged by Thuong Tran in 163636d.

^{When will my fix make it into a release? | Upcoming Releases}

…riant values (facebook#34003) Summary: Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20) stylistic-three(ss01) stylistic-two(ss02) stylistic-three(ss03) stylistic-four(ss04) stylistic-five(ss05) stylistic-six(ss06) stylistic-seven(ss07) stylistic-eight(ss08) stylistic-nine(ss09) stylistic-ten(ss10) stylistic-eleven(ss11) stylistic-twelve(ss12) stylistic-thirteen(ss13) stylistic-fourteen(ss14) stylistic-fifteen(ss15) stylistic-sixteen(ss16) stylistic-seventeen(ss17) stylistic-eighteen(ss18) stylistic-nineteen(ss19) stylistic-twenty(ss20) References: https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html#Type3 https://docs.microsoft.com/en-us/typography/opentype/spec/featurelist Example: `<Text style={{ fontVariant: ['stylistic-three', 'stylistic-five'] }}> Hello World! </Text>` ## Changelog [iOS] [Added] - Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20) [Android] [Added] - Add new fontVariant values: stylistic-one(ss01) -> stylistic-twenty(ss20) Pull Request resolved: facebook#34003 Test Plan: ![Screen Shot 2022-06-13 at 16 02 46](https://user-images.githubusercontent.com/62107729/173318839-69da379c-df13-4351-9dfa-4b548664e43d.png) Reviewed By: cipolleschi Differential Revision: D37118078 Pulled By: cortinico fbshipit-source-id: 6a8366638f8181b5db6b2c12c48a5ad65e1e598f

gedeagas · 2022-08-20T11:01:12Z

PR For Docs Here.
facebook/react-native-website#3272

Thank you for the awesome work @thuongtv-vn

pke · 2022-11-04T09:55:15Z

Thanks a ton for adding this finally to RN @thuongtv-vn!

One question though: was this tested on Android? I patched my 0.66.3 RN version with this PR and the Text component is now complaining about an invalid prop and not applying the correct variant:

 Warning: Failed prop type: Invalid prop `fontVariant[0]` of value `stylistic-three` supplied to `Text`, expected one of ["small-caps","oldstyle-nums","lining-nums","tabular-nums","proportional-nums"].
Bad object: {
  "fontWeight": "700",
  "fontVariant": [
    "stylistic-three"
  ],

Is there something to be done to make RN pick up on the patched JS files?

Solved

edit: Yes, it seems this would require to compile RN from source for Android (iOS works with just the patch). The property warning was fixed when I correctly patched the DeprecatedTextStyleProps file.

pke · 2022-11-04T11:37:58Z

First version to contain this is 0.71-rc.0 correct?

pke · 2022-11-07T10:10:07Z

@thuongtv-vn any reasons why we not just hand over the OTF variant values like this fontVariant: "ss01"?

thuongtv-vn · 2022-11-22T04:04:25Z

@thuongtv-vn any reasons why we not just hand over the OTF variant values like this fontVariant: "ss01"?

@pke the reason for stylistic values that it is following the current code style as you can see below on iOS and Android:

pke · 2022-11-22T07:07:24Z

I reckon that and I believe it was a bad choice whoever made it.
Instead of using what Web devs already know and what is the official nomenclature for OTF the react native team decided to invent their own keys and force everyone to read up the docs to understand the mapping.

I'd vote for changing all the current mapped values to the official keys and deprecating react natives ones. This would not only improve the DX but also reduce tedious documentation work and dramatically simplify the amount of code required to implement this (no more switch cases and mappings, joins etc)

What do you all think?

finnp · 2023-01-06T10:09:09Z

Yeah it would be nice if it would just follow the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant

I just patched my react-native locally to add no-contextual and no-commonl-ligatures

For these ss01 type features I believe a new propertly like fontFeatureSettings would have been more appropriate.

pke · 2023-01-24T09:38:48Z

Is there anyone with authority here that could assess if it would make sense to create a PR harmonising this? @cortinico

cortinico · 2023-01-24T19:13:56Z

Is there anyone with authority here that could assess if it would make sense to create a PR harmonising this? @cortinico

It's probably something to raise in this thread

[w3c] ☂️ Web Styles (Part 1) umbrella issue #34425

necolas · 2023-01-30T18:13:33Z

Yes I'm in favour of all the W3C props conforming to standards for the reasons mentioned above. It's difficult if we merge changes without clear guidance that we need these APIs not to diverge from the standards.

Commenting on this RFC will help me document what is needed going forward react-native-community/discussions-and-proposals#496

react-native-bot added Platform: iOS iOS applications. Type: Enhancement A new feature or enhancement of an existing feature. labels Jun 13, 2022

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 Jun 13, 2022

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Jun 13, 2022

cortinico reviewed Jun 13, 2022

View reviewed changes

thuongtv-vn changed the title ~~feat(font) adding stylistic ss03, ss05 as fontVariant value~~ feat(font-feature) adding stylistic ss03, ss05 as fontVariant value Jun 14, 2022

thuongtv-vn changed the title ~~feat(font-feature) adding stylistic ss03, ss05 as fontVariant value~~ feat(font-feature): adding stylistic ss03, ss05 as fontVariant value Jun 14, 2022

thuongtv-vn changed the title ~~feat(font-feature): adding stylistic ss03, ss05 as fontVariant value~~ feat(font-feature): adding stylistic 'stylistic-three','stylistic-five' as new fontVariant value Jun 14, 2022

thuongtv-vn force-pushed the new-fontVariant-values branch from 527f4c3 to 2284daa Compare June 21, 2022 02:23

thuongtv-vn changed the title ~~feat(font-feature): adding stylistic 'stylistic-three','stylistic-five' as new fontVariant value~~ feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values Jun 21, 2022

thuongtv-vn force-pushed the new-fontVariant-values branch from 2284daa to a3b25c0 Compare June 21, 2022 02:45

feat(font-feature): adding stylistics from ss01 to ss20 as new fontVa…

0df0a05

…riant value

thuongtv-vn force-pushed the new-fontVariant-values branch from a3b25c0 to 0df0a05 Compare June 22, 2022 13:54

facebook-github-bot closed this in 163636d Aug 17, 2022

react-native-bot added the Merged This PR has been merged. label Aug 17, 2022

gedeagas mentioned this pull request Aug 20, 2022

feat(font): Adding Stylistics As New FontVariant Values facebook/react-native-website#3272

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values #34003

feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values #34003

thuongtv-vn commented Jun 13, 2022 •

edited

Loading

facebook-github-bot commented Jun 13, 2022

analysis-bot commented Jun 13, 2022 •

edited

Loading

analysis-bot commented Jun 13, 2022 •

edited

Loading

facebook-github-bot commented Jun 13, 2022

facebook-github-bot commented Jun 13, 2022

facebook-github-bot commented Jun 13, 2022

facebook-github-bot commented Jun 13, 2022

cortinico Jun 13, 2022

thuongtv-vn Jun 14, 2022

cortinico Jun 15, 2022

thuongtv-vn Jun 21, 2022

cortinico commented Jun 21, 2022

thuongtv-vn commented Aug 16, 2022

facebook-github-bot commented Aug 16, 2022

react-native-bot commented Aug 17, 2022

gedeagas commented Aug 20, 2022

pke commented Nov 4, 2022 •

edited

Loading

pke commented Nov 4, 2022

pke commented Nov 7, 2022

thuongtv-vn commented Nov 22, 2022

pke commented Nov 22, 2022

finnp commented Jan 6, 2023

pke commented Jan 24, 2023

cortinico commented Jan 24, 2023

necolas commented Jan 30, 2023

feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values #34003

feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values #34003

Conversation

thuongtv-vn commented Jun 13, 2022 • edited Loading

Summary

Changelog

Test Plan

facebook-github-bot commented Jun 13, 2022

Action Required

Process

analysis-bot commented Jun 13, 2022 • edited Loading

analysis-bot commented Jun 13, 2022 • edited Loading

facebook-github-bot commented Jun 13, 2022

facebook-github-bot commented Jun 13, 2022

facebook-github-bot commented Jun 13, 2022

facebook-github-bot commented Jun 13, 2022

cortinico Jun 13, 2022

Choose a reason for hiding this comment

thuongtv-vn Jun 14, 2022

Choose a reason for hiding this comment

cortinico Jun 15, 2022

Choose a reason for hiding this comment

thuongtv-vn Jun 21, 2022

Choose a reason for hiding this comment

cortinico commented Jun 21, 2022

thuongtv-vn commented Aug 16, 2022

facebook-github-bot commented Aug 16, 2022

react-native-bot commented Aug 17, 2022

gedeagas commented Aug 20, 2022

pke commented Nov 4, 2022 • edited Loading

Solved

pke commented Nov 4, 2022

pke commented Nov 7, 2022

thuongtv-vn commented Nov 22, 2022

pke commented Nov 22, 2022

finnp commented Jan 6, 2023

pke commented Jan 24, 2023

cortinico commented Jan 24, 2023

necolas commented Jan 30, 2023

thuongtv-vn commented Jun 13, 2022 •

edited

Loading

analysis-bot commented Jun 13, 2022 •

edited

Loading

analysis-bot commented Jun 13, 2022 •

edited

Loading

pke commented Nov 4, 2022 •

edited

Loading