mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Fabric: Support stylistic sets for fontVariant (#48674)
Summary: In the old arch, stylistic sets were supported however in the new arch support was not added. It seems that fontVariant support was actually initially missed on iOS fabric however a limited version was added in https://github.com/facebook/react-native/pull/44112 . I referenced that PR and also old arch implementation for these changes. <img width="480" alt="Screenshot 2025-01-14 at 11 15 18 AM" src="https://github.com/user-attachments/assets/ec32a356-fadd-4281-83b9-15871bbcd18f" /> ## Changelog: <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests --> [GENERAL] [ADDED] - Support stylistic sets for fontVariant Pull Request resolved: https://github.com/facebook/react-native/pull/48674 Test Plan: - Verified that the "Unsupported FontVariant" native log no longer displays on both platforms - On iOS was easy to test in the tester app as SF supports stylistic sets by default: ``` <Text> Stylistic{'\n'} <Text>Normal: ${'\n'}</Text> <Text style={{fontVariant: ['stylistic-four']}}> Stylistic Four: $ </Text> </Text> ``` <img width="391" alt="Screenshot 2025-01-14 at 11 59 29 AM" src="https://github.com/user-attachments/assets/1ede258e-783f-448f-8300-4c8c710796ef" /> - On Android I could not find any system fonts that support stylistic sets by default so I added Raleway and confirmed with a W character  I did not add font variant example to the tester apps as I felt it could be confusing for people at a glance to understand why there is only a system font example on iOS and why I chose the specific stylistic set. Reviewed By: cipolleschi Differential Revision: D68205738 Pulled By: javache fbshipit-source-id: 03ce572d3c8ecafca71fe00fc0e88eeafc2558bb
This commit is contained in:
Levi
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
a18bc58645
commit
c09b71b990
@@ -317,6 +317,53 @@ inline void fromRawValue(
|
||||
} else if (item == "proportional-nums") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::ProportionalNums);
|
||||
} else if (item == "stylistic-one") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticOne);
|
||||
} else if (item == "stylistic-two") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticTwo);
|
||||
} else if (item == "stylistic-three") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticThree);
|
||||
} else if (item == "stylistic-four") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticFour);
|
||||
} else if (item == "stylistic-five") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticFive);
|
||||
} else if (item == "stylistic-six") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticSix);
|
||||
} else if (item == "stylistic-seven") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticSeven);
|
||||
} else if (item == "stylistic-eight") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticEight);
|
||||
} else if (item == "stylistic-nine") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticNine);
|
||||
} else if (item == "stylistic-ten") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticTen);
|
||||
} else if (item == "stylistic-eleven") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticEleven);
|
||||
} else if (item == "stylistic-twelve") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticTwelve);
|
||||
} else if (item == "stylistic-thirteen") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::StylisticThirteen);
|
||||
} else if (item == "stylistic-fourteen") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::StylisticFourteen);
|
||||
} else if (item == "stylistic-fifteen") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::StylisticFifteen);
|
||||
} else if (item == "stylistic-sixteen") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::StylisticSixteen);
|
||||
} else if (item == "stylistic-seventeen") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::StylisticSeventeen);
|
||||
} else if (item == "stylistic-eighteen") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::StylisticEighteen);
|
||||
} else if (item == "stylistic-nineteen") {
|
||||
result =
|
||||
(FontVariant)((int)result | (int)FontVariant::StylisticNineteen);
|
||||
} else if (item == "stylistic-twenty") {
|
||||
result = (FontVariant)((int)result | (int)FontVariant::StylisticTwenty);
|
||||
} else {
|
||||
LOG(ERROR) << "Unsupported FontVariant value: " << item;
|
||||
react_native_expect(false);
|
||||
@@ -346,6 +393,66 @@ inline std::string toString(const FontVariant& fontVariant) {
|
||||
if ((int)fontVariant & (int)FontVariant::ProportionalNums) {
|
||||
result += "proportional-nums" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticOne) {
|
||||
result += "stylistic-one" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticTwo) {
|
||||
result += "stylistic-two" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticThree) {
|
||||
result += "stylistic-three" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticFour) {
|
||||
result += "stylistic-four" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticFive) {
|
||||
result += "stylistic-five" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticSix) {
|
||||
result += "stylistic-six" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticSeven) {
|
||||
result += "stylistic-seven" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticEight) {
|
||||
result += "stylistic-eight" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticNine) {
|
||||
result += "stylistic-nine" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticTen) {
|
||||
result += "stylistic-ten" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticEleven) {
|
||||
result += "stylistic-eleven" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticTwelve) {
|
||||
result += "stylistic-twelve" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticThirteen) {
|
||||
result += "stylistic-thirteen" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticFourteen) {
|
||||
result += "stylistic-fourteen" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticFifteen) {
|
||||
result += "stylistic-fifteen" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticSixteen) {
|
||||
result += "stylistic-sixteen" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticSeventeen) {
|
||||
result += "stylistic-seventeen" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticEighteen) {
|
||||
result += "stylistic-eighteen" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticNineteen) {
|
||||
result += "stylistic-nineteen" + separator;
|
||||
}
|
||||
if ((int)fontVariant & (int)FontVariant::StylisticTwenty) {
|
||||
result += "stylistic-twenty" + separator;
|
||||
}
|
||||
|
||||
if (!result.empty()) {
|
||||
result.erase(result.length() - separator.length());
|
||||
|
||||
@@ -42,7 +42,27 @@ enum class FontVariant : int {
|
||||
OldstyleNums = 1 << 2,
|
||||
LiningNums = 1 << 3,
|
||||
TabularNums = 1 << 4,
|
||||
ProportionalNums = 1 << 5
|
||||
ProportionalNums = 1 << 5,
|
||||
StylisticOne = 1 << 6,
|
||||
StylisticTwo = 1 << 7,
|
||||
StylisticThree = 1 << 8,
|
||||
StylisticFour = 1 << 9,
|
||||
StylisticFive = 1 << 10,
|
||||
StylisticSix = 1 << 11,
|
||||
StylisticSeven = 1 << 12,
|
||||
StylisticEight = 1 << 13,
|
||||
StylisticNine = 1 << 14,
|
||||
StylisticTen = 1 << 15,
|
||||
StylisticEleven = 1 << 16,
|
||||
StylisticTwelve = 1 << 17,
|
||||
StylisticThirteen = 1 << 18,
|
||||
StylisticFourteen = 1 << 19,
|
||||
StylisticFifteen = 1 << 20,
|
||||
StylisticSixteen = 1 << 21,
|
||||
StylisticSeventeen = 1 << 22,
|
||||
StylisticEighteen = 1 << 23,
|
||||
StylisticNineteen = 1 << 24,
|
||||
StylisticTwenty = 1 << 25
|
||||
};
|
||||
|
||||
enum class DynamicTypeRamp {
|
||||
|
||||
+20
@@ -24,6 +24,26 @@ typedef NS_OPTIONS(NSInteger, RCTFontVariant) {
|
||||
RCTFontVariantLiningNums = 1 << 3,
|
||||
RCTFontVariantTabularNums = 1 << 4,
|
||||
RCTFontVariantProportionalNums = 1 << 5,
|
||||
RCTFontVariantStylisticOne = 1 << 6,
|
||||
RCTFontVariantStylisticTwo = 1 << 7,
|
||||
RCTFontVariantStylisticThree = 1 << 8,
|
||||
RCTFontVariantStylisticFour = 1 << 9,
|
||||
RCTFontVariantStylisticFive = 1 << 10,
|
||||
RCTFontVariantStylisticSix = 1 << 11,
|
||||
RCTFontVariantStylisticSeven = 1 << 12,
|
||||
RCTFontVariantStylisticEight = 1 << 13,
|
||||
RCTFontVariantStylisticNine = 1 << 14,
|
||||
RCTFontVariantStylisticTen = 1 << 15,
|
||||
RCTFontVariantStylisticEleven = 1 << 16,
|
||||
RCTFontVariantStylisticTwelve = 1 << 17,
|
||||
RCTFontVariantStylisticThirteen = 1 << 18,
|
||||
RCTFontVariantStylisticFourteen = 1 << 19,
|
||||
RCTFontVariantStylisticFifteen = 1 << 20,
|
||||
RCTFontVariantStylisticSixteen = 1 << 21,
|
||||
RCTFontVariantStylisticSeventeen = 1 << 22,
|
||||
RCTFontVariantStylisticEighteen = 1 << 23,
|
||||
RCTFontVariantStylisticNineteen = 1 << 24,
|
||||
RCTFontVariantStylisticTwenty = 1 << 25,
|
||||
};
|
||||
|
||||
struct RCTFontProperties {
|
||||
|
||||
+140
@@ -84,6 +84,86 @@ static NSArray *RCTFontFeatures(RCTFontVariant fontVariant)
|
||||
UIFontFeatureTypeIdentifierKey : @(kNumberSpacingType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kProportionalNumbersSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticOne, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltOneOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticTwo, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwoOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticThree, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThreeOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticFour, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticFive, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFiveOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticSix, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticSeven, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSevenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticEight, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEightOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticNine, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticTen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticEleven, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltElevenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticTwelve, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwelveOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticThirteen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltThirteenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticFourteen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFourteenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticFifteen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltFifteenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticSixteen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSixteenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticSeventeen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltSeventeenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticEighteen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltEighteenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticNineteen, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltNineteenOnSelector),
|
||||
}},
|
||||
{RCTFontVariantStylisticTwenty, @{
|
||||
UIFontFeatureTypeIdentifierKey : @(kStylisticAlternativesType),
|
||||
UIFontFeatureSelectorIdentifierKey : @(kStylisticAltTwentyOnSelector),
|
||||
}},
|
||||
};
|
||||
});
|
||||
|
||||
@@ -102,6 +182,66 @@ static NSArray *RCTFontFeatures(RCTFontVariant fontVariant)
|
||||
if (fontVariant & RCTFontVariantProportionalNums) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantProportionalNums]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticOne) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticOne]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticTwo) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticTwo]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticThree) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticThree]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticFour) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticFour]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticFive) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticFive]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticSix) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticSix]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticSeven) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticSeven]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticEight) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticEight]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticNine) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticNine]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticTen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticTen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticEleven) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticEleven]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticTwelve) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticTwelve]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticThirteen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticThirteen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticFourteen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticFourteen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticFifteen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticFifteen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticSixteen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticSixteen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticSeventeen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticSeventeen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticEighteen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticEighteen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticNineteen) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticNineteen]];
|
||||
}
|
||||
if (fontVariant & RCTFontVariantStylisticTwenty) {
|
||||
[fontFeatures addObject:mapping[RCTFontVariantStylisticTwenty]];
|
||||
}
|
||||
|
||||
return fontFeatures;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user