From 163636db752b9a5544de54b256e264d3877bb6f7 Mon Sep 17 00:00:00 2001 From: Thuong Tran Date: Wed, 17 Aug 2022 03:07:09 -0700 Subject: [PATCH] feat(font-feature): adding stylistics from ss01 to ss20 as new fontVariant values (#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: ` Hello World! ` ## 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: https://github.com/facebook/react-native/pull/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 --- Libraries/StyleSheet/StyleSheetTypes.js | 22 ++++- React/Views/RCTFont.mm | 80 +++++++++++++++++++ .../react/views/text/ReactTypefaceUtils.java | 60 ++++++++++++++ .../react/views/text/TextAttributeProps.java | 60 ++++++++++++++ 4 files changed, 221 insertions(+), 1 deletion(-) diff --git a/Libraries/StyleSheet/StyleSheetTypes.js b/Libraries/StyleSheet/StyleSheetTypes.js index 490ef5f306ad18..0ff1d26f64dd29 100644 --- a/Libraries/StyleSheet/StyleSheetTypes.js +++ b/Libraries/StyleSheet/StyleSheetTypes.js @@ -590,7 +590,27 @@ export type ____TextStyle_InternalCore = $ReadOnly<{ | 'oldstyle-nums' | 'lining-nums' | 'tabular-nums' - | 'proportional-nums', + | 'proportional-nums' + | 'stylistic-one' + | 'stylistic-two' + | 'stylistic-three' + | 'stylistic-four' + | 'stylistic-five' + | 'stylistic-six' + | 'stylistic-seven' + | 'stylistic-eight' + | 'stylistic-nine' + | 'stylistic-ten' + | 'stylistic-eleven' + | 'stylistic-twelve' + | 'stylistic-thirteen' + | 'stylistic-fourteen' + | 'stylistic-fifteen' + | 'stylistic-sixteen' + | 'stylistic-seventeen' + | 'stylistic-eighteen' + | 'stylistic-nineteen' + | 'stylistic-twenty', >, textShadowOffset?: $ReadOnly<{ width: number, diff --git a/React/Views/RCTFont.mm b/React/Views/RCTFont.mm index 679f2cea43ebe2..e119657d3716fd 100644 --- a/React/Views/RCTFont.mm +++ b/React/Views/RCTFont.mm @@ -248,6 +248,86 @@ + (RCTFontVariantDescriptor *)RCTFontVariantDescriptor:(id)json UIFontFeatureTypeIdentifierKey : @(kNumberSpacingType), UIFontFeatureSelectorIdentifierKey : @(kProportionalNumbersSelector), }, + @"stylistic-one" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltOneOnSelector), + }, + @"stylistic-two" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwoOnSelector), + }, + @"stylistic-three" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThreeOnSelector), + }, + @"stylistic-four" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourOnSelector), + }, + @"stylistic-five" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFiveOnSelector), + }, + @"stylistic-six" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixOnSelector), + }, + @"stylistic-seven" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSevenOnSelector), + }, + @"stylistic-eight" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEightOnSelector), + }, + @"stylistic-nine" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineOnSelector), + }, + @"stylistic-ten" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTenOnSelector), + }, + @"stylistic-eleven" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltElevenOnSelector), + }, + @"stylistic-twelve" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwelveOnSelector), + }, + @"stylistic-thirteen" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThirteenOnSelector), + }, + @"stylistic-fourteen" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourteenOnSelector), + }, + @"stylistic-fifteen" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFifteenOnSelector), + }, + @"stylistic-sixteen" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixteenOnSelector), + }, + @"stylistic-seventeen" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSeventeenOnSelector), + }, + @"stylistic-eighteen" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEighteenOnSelector), + }, + @"stylistic-nineteen" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineteenOnSelector), + }, + @"stylistic-twenty" : @{ + UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType), + UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwentyOnSelector), + } }; }); RCTFontVariantDescriptor *value = mapping[json]; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java index 76da16072cdeb3..6ca731ef4ff1aa 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java @@ -85,6 +85,66 @@ public static int parseFontStyle(@Nullable String fontStyleString) { case "proportional-nums": features.add("'pnum'"); break; + case "stylistic-one": + features.add("'ss01'"); + break; + case "stylistic-two": + features.add("'ss02'"); + break; + case "stylistic-three": + features.add("'ss03'"); + break; + case "stylistic-four": + features.add("'ss04'"); + break; + case "stylistic-five": + features.add("'ss05'"); + break; + case "stylistic-six": + features.add("'ss06'"); + break; + case "stylistic-seven": + features.add("'ss07'"); + break; + case "stylistic-eight": + features.add("'ss08'"); + break; + case "stylistic-nine": + features.add("'ss09'"); + break; + case "stylistic-ten": + features.add("'ss10'"); + break; + case "stylistic-eleven": + features.add("'ss11'"); + break; + case "stylistic-twelve": + features.add("'ss12'"); + break; + case "stylistic-thirteen": + features.add("'ss13'"); + break; + case "stylistic-fourteen": + features.add("'ss14'"); + break; + case "stylistic-fifteen": + features.add("'ss15'"); + break; + case "stylistic-sixteen": + features.add("'ss16'"); + break; + case "stylistic-seventeen": + features.add("'ss17'"); + break; + case "stylistic-eighteen": + features.add("'ss18'"); + break; + case "stylistic-nineteen": + features.add("'ss19'"); + break; + case "stylistic-twenty": + features.add("'ss20'"); + break; } } } diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java b/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java index 8706e70b102b6c..787ab9bb14db4a 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java @@ -444,6 +444,66 @@ private void setFontVariant(@Nullable MapBuffer fontVariant) { case "proportional-nums": features.add("'pnum'"); break; + case "stylistic-one": + features.add("'ss01'"); + break; + case "stylistic-two": + features.add("'ss02'"); + break; + case "stylistic-three": + features.add("'ss03'"); + break; + case "stylistic-four": + features.add("'ss04'"); + break; + case "stylistic-five": + features.add("'ss05'"); + break; + case "stylistic-six": + features.add("'ss06'"); + break; + case "stylistic-seven": + features.add("'ss07'"); + break; + case "stylistic-eight": + features.add("'ss08'"); + break; + case "stylistic-nine": + features.add("'ss09'"); + break; + case "stylistic-ten": + features.add("'ss10'"); + break; + case "stylistic-eleven": + features.add("'ss11'"); + break; + case "stylistic-twelve": + features.add("'ss12'"); + break; + case "stylistic-thirteen": + features.add("'ss13'"); + break; + case "stylistic-fourteen": + features.add("'ss14'"); + break; + case "stylistic-fifteen": + features.add("'ss15'"); + break; + case "stylistic-sixteen": + features.add("'ss16'"); + break; + case "stylistic-seventeen": + features.add("'ss17'"); + break; + case "stylistic-eighteen": + features.add("'ss18'"); + break; + case "stylistic-nineteen": + features.add("'ss19'"); + break; + case "stylistic-twenty": + features.add("'ss20'"); + break; } } }