Skip to content

Commit

Permalink
feat(font-feature): adding stylistics from ss01 to ss20 as new fontVa…
Browse files Browse the repository at this point in the history 
…riant 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:
`<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: #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
  • Loading branch information
@facebook-github-bot
Thuong Tran authored and facebook-github-bot committed Aug 17, 2022
1 parent 542d43d commit 163636d
Show file tree
Hide file tree
Showing 4 changed files with 221 additions and 1 deletion.
22 changes: 21 additions & 1 deletion Libraries/StyleSheet/StyleSheetTypes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
80 changes: 80 additions & 0 deletions React/Views/RCTFont.mm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
60 changes: 60 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down
60 changes: 60 additions & 0 deletions ReactAndroid/src/main/java/com/facebook/react/views/text/TextAttributeProps.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down

0 comments on commit 163636d

Please sign in to comment.