Skip to content

Commit 9a121c0

Browse files
committed
Support font-variant-ligatures values
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))
1 parent 606946d commit 9a121c0

File tree

3 files changed

+66
-0
lines changed

3 files changed

+66
-0
lines changed

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -788,6 +788,14 @@ export type ____FontVariantArray_Internal = $ReadOnlyArray<
788788
| 'oldstyle-nums'
789789
| 'lining-nums'
790790
| 'tabular-nums'
791+
| 'common-ligatures'
792+
| 'no-common-ligatures'
793+
| 'discretionary-ligatures'
794+
| 'no-discretionary-ligatures'
795+
| 'historical-ligatures'
796+
| 'no-historical-ligatures'
797+
| 'contextual'
798+
| 'no-contextual'
791799
| 'proportional-nums'
792800
| 'stylistic-one'
793801
| 'stylistic-two'

packages/react-native/React/Views/RCTFont.mm

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,38 @@ + (RCTFontVariantDescriptor *)RCTFontVariantDescriptor:(id)json
248248
UIFontFeatureTypeIdentifierKey : @(kNumberSpacingType),
249249
UIFontFeatureSelectorIdentifierKey : @(kProportionalNumbersSelector),
250250
},
251+
@"common-ligatures" : @{
252+
UIFontFeatureTypeIdentifierKey : @(kLigaturesType),
253+
UIFontFeatureSelectorIdentifierKey : @(kCommonLigaturesOnSelector),
254+
},
255+
@"no-common-ligatures" : @{
256+
UIFontFeatureTypeIdentifierKey : @(kLigaturesType),
257+
UIFontFeatureSelectorIdentifierKey : @(kCommonLigaturesOffSelector),
258+
},
259+
@"discretionary-ligatures" : @{
260+
UIFontFeatureTypeIdentifierKey : @(kLigaturesType),
261+
UIFontFeatureSelectorIdentifierKey : @(kRareLigaturesOnSelector),
262+
},
263+
@"no-discretionary-ligatures" : @{
264+
UIFontFeatureTypeIdentifierKey : @(kLigaturesType),
265+
UIFontFeatureSelectorIdentifierKey : @(kRareLigaturesOffSelector),
266+
},
267+
@"historical-ligatures" : @{
268+
UIFontFeatureTypeIdentifierKey : @(kLigaturesType),
269+
UIFontFeatureSelectorIdentifierKey : @(kHistoricalLigaturesOnSelector),
270+
},
271+
@"no-historical-ligatures" : @{
272+
UIFontFeatureTypeIdentifierKey : @(kLigaturesType),
273+
UIFontFeatureSelectorIdentifierKey : @(kHistoricalLigaturesOffSelector),
274+
},
275+
@"contextual" : @{
276+
UIFontFeatureTypeIdentifierKey : @(kContextualAlternatesType ),
277+
UIFontFeatureSelectorIdentifierKey : @(kContextualAlternatesOnSelector),
278+
},
279+
@"no-contextual" : @{
280+
UIFontFeatureTypeIdentifierKey : @(kContextualAlternatesType),
281+
UIFontFeatureSelectorIdentifierKey : @(kContextualAlternatesOffSelector),
282+
},
251283
@"stylistic-one" : @{
252284
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
253285
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltOneOnSelector),

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,32 @@ public static int parseFontStyle(@Nullable String fontStyleString) {
8585
case "proportional-nums":
8686
features.add("'pnum'");
8787
break;
88+
case "common-ligatures":
89+
features.add("'liga'");
90+
features.add("'clig'");
91+
break;
92+
case "no-common-ligatures":
93+
features.add("'liga' off");
94+
features.add("'clig' off");
95+
break;
96+
case "discretionary-ligatures":
97+
features.add("'dlig'");
98+
break;
99+
case "no-discretionary-ligatures":
100+
features.add("'dlig' off");
101+
break;
102+
case "historical-ligatures":
103+
features.add("'hlig'");
104+
break;
105+
case "no-historical-ligatures":
106+
features.add("'hlig' off");
107+
break;
108+
case "contextual":
109+
features.add("'calt'");
110+
break;
111+
case "no-contextual":
112+
features.add("'calt' off");
113+
break;
88114
case "stylistic-one":
89115
features.add("'ss01'");
90116
break;

0 commit comments

Comments
 (0)