Skip to content

Commit 163636d

Browse files
Thuong Tranfacebook-github-bot
authored andcommitted
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: `<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
1 parent 542d43d commit 163636d

File tree

4 files changed

+221
-1
lines changed

4 files changed

+221
-1
lines changed

Libraries/StyleSheet/StyleSheetTypes.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -590,7 +590,27 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
590590
| 'oldstyle-nums'
591591
| 'lining-nums'
592592
| 'tabular-nums'
593-
| 'proportional-nums',
593+
| 'proportional-nums'
594+
| 'stylistic-one'
595+
| 'stylistic-two'
596+
| 'stylistic-three'
597+
| 'stylistic-four'
598+
| 'stylistic-five'
599+
| 'stylistic-six'
600+
| 'stylistic-seven'
601+
| 'stylistic-eight'
602+
| 'stylistic-nine'
603+
| 'stylistic-ten'
604+
| 'stylistic-eleven'
605+
| 'stylistic-twelve'
606+
| 'stylistic-thirteen'
607+
| 'stylistic-fourteen'
608+
| 'stylistic-fifteen'
609+
| 'stylistic-sixteen'
610+
| 'stylistic-seventeen'
611+
| 'stylistic-eighteen'
612+
| 'stylistic-nineteen'
613+
| 'stylistic-twenty',
594614
>,
595615
textShadowOffset?: $ReadOnly<{
596616
width: number,

React/Views/RCTFont.mm

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,86 @@ + (RCTFontVariantDescriptor *)RCTFontVariantDescriptor:(id)json
248248
UIFontFeatureTypeIdentifierKey : @(kNumberSpacingType),
249249
UIFontFeatureSelectorIdentifierKey : @(kProportionalNumbersSelector),
250250
},
251+
@"stylistic-one" : @{
252+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
253+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltOneOnSelector),
254+
},
255+
@"stylistic-two" : @{
256+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
257+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwoOnSelector),
258+
},
259+
@"stylistic-three" : @{
260+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
261+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThreeOnSelector),
262+
},
263+
@"stylistic-four" : @{
264+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
265+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourOnSelector),
266+
},
267+
@"stylistic-five" : @{
268+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
269+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFiveOnSelector),
270+
},
271+
@"stylistic-six" : @{
272+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
273+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixOnSelector),
274+
},
275+
@"stylistic-seven" : @{
276+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
277+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSevenOnSelector),
278+
},
279+
@"stylistic-eight" : @{
280+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
281+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEightOnSelector),
282+
},
283+
@"stylistic-nine" : @{
284+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
285+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineOnSelector),
286+
},
287+
@"stylistic-ten" : @{
288+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
289+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTenOnSelector),
290+
},
291+
@"stylistic-eleven" : @{
292+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
293+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltElevenOnSelector),
294+
},
295+
@"stylistic-twelve" : @{
296+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
297+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwelveOnSelector),
298+
},
299+
@"stylistic-thirteen" : @{
300+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
301+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThirteenOnSelector),
302+
},
303+
@"stylistic-fourteen" : @{
304+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
305+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourteenOnSelector),
306+
},
307+
@"stylistic-fifteen" : @{
308+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
309+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFifteenOnSelector),
310+
},
311+
@"stylistic-sixteen" : @{
312+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
313+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixteenOnSelector),
314+
},
315+
@"stylistic-seventeen" : @{
316+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
317+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSeventeenOnSelector),
318+
},
319+
@"stylistic-eighteen" : @{
320+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
321+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEighteenOnSelector),
322+
},
323+
@"stylistic-nineteen" : @{
324+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
325+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineteenOnSelector),
326+
},
327+
@"stylistic-twenty" : @{
328+
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
329+
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwentyOnSelector),
330+
}
251331
};
252332
});
253333
RCTFontVariantDescriptor *value = mapping[json];

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,66 @@ public static int parseFontStyle(@Nullable String fontStyleString) {
8585
case "proportional-nums":
8686
features.add("'pnum'");
8787
break;
88+
case "stylistic-one":
89+
features.add("'ss01'");
90+
break;
91+
case "stylistic-two":
92+
features.add("'ss02'");
93+
break;
94+
case "stylistic-three":
95+
features.add("'ss03'");
96+
break;
97+
case "stylistic-four":
98+
features.add("'ss04'");
99+
break;
100+
case "stylistic-five":
101+
features.add("'ss05'");
102+
break;
103+
case "stylistic-six":
104+
features.add("'ss06'");
105+
break;
106+
case "stylistic-seven":
107+
features.add("'ss07'");
108+
break;
109+
case "stylistic-eight":
110+
features.add("'ss08'");
111+
break;
112+
case "stylistic-nine":
113+
features.add("'ss09'");
114+
break;
115+
case "stylistic-ten":
116+
features.add("'ss10'");
117+
break;
118+
case "stylistic-eleven":
119+
features.add("'ss11'");
120+
break;
121+
case "stylistic-twelve":
122+
features.add("'ss12'");
123+
break;
124+
case "stylistic-thirteen":
125+
features.add("'ss13'");
126+
break;
127+
case "stylistic-fourteen":
128+
features.add("'ss14'");
129+
break;
130+
case "stylistic-fifteen":
131+
features.add("'ss15'");
132+
break;
133+
case "stylistic-sixteen":
134+
features.add("'ss16'");
135+
break;
136+
case "stylistic-seventeen":
137+
features.add("'ss17'");
138+
break;
139+
case "stylistic-eighteen":
140+
features.add("'ss18'");
141+
break;
142+
case "stylistic-nineteen":
143+
features.add("'ss19'");
144+
break;
145+
case "stylistic-twenty":
146+
features.add("'ss20'");
147+
break;
88148
}
89149
}
90150
}

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -444,6 +444,66 @@ private void setFontVariant(@Nullable MapBuffer fontVariant) {
444444
case "proportional-nums":
445445
features.add("'pnum'");
446446
break;
447+
case "stylistic-one":
448+
features.add("'ss01'");
449+
break;
450+
case "stylistic-two":
451+
features.add("'ss02'");
452+
break;
453+
case "stylistic-three":
454+
features.add("'ss03'");
455+
break;
456+
case "stylistic-four":
457+
features.add("'ss04'");
458+
break;
459+
case "stylistic-five":
460+
features.add("'ss05'");
461+
break;
462+
case "stylistic-six":
463+
features.add("'ss06'");
464+
break;
465+
case "stylistic-seven":
466+
features.add("'ss07'");
467+
break;
468+
case "stylistic-eight":
469+
features.add("'ss08'");
470+
break;
471+
case "stylistic-nine":
472+
features.add("'ss09'");
473+
break;
474+
case "stylistic-ten":
475+
features.add("'ss10'");
476+
break;
477+
case "stylistic-eleven":
478+
features.add("'ss11'");
479+
break;
480+
case "stylistic-twelve":
481+
features.add("'ss12'");
482+
break;
483+
case "stylistic-thirteen":
484+
features.add("'ss13'");
485+
break;
486+
case "stylistic-fourteen":
487+
features.add("'ss14'");
488+
break;
489+
case "stylistic-fifteen":
490+
features.add("'ss15'");
491+
break;
492+
case "stylistic-sixteen":
493+
features.add("'ss16'");
494+
break;
495+
case "stylistic-seventeen":
496+
features.add("'ss17'");
497+
break;
498+
case "stylistic-eighteen":
499+
features.add("'ss18'");
500+
break;
501+
case "stylistic-nineteen":
502+
features.add("'ss19'");
503+
break;
504+
case "stylistic-twenty":
505+
features.add("'ss20'");
506+
break;
447507
}
448508
}
449509
}

0 commit comments

Comments
 (0)