Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ public class TextAttributeProps private constructor() {
if (value == ReactConstants.UNSET.toFloat()) {
Float.NaN
} else {
if (allowFontScaling) toPixelFromSP(value) else toPixelFromDIP(value)
if (allowFontScaling) toPixelFromSP(value, maxFontSizeMultiplier)
else toPixelFromDIP(value)
}
}

Expand Down Expand Up @@ -169,7 +170,7 @@ public class TextAttributeProps private constructor() {
public var letterSpacing: Float
get() {
val letterSpacingPixels =
if (allowFontScaling) toPixelFromSP(letterSpacingInput)
if (allowFontScaling) toPixelFromSP(letterSpacingInput, maxFontSizeMultiplier)
else toPixelFromDIP(letterSpacingInput)

require(fontSize > 0) { "FontSize should be a positive value. Current value: $fontSize" }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,18 @@
* LICENSE file in the root directory of this source tree.
*/

@file:Suppress("DEPRECATION") // DisplayMetrics.scaledDensity, to simulate a system font scale

package com.facebook.react.views.text

import android.util.DisplayMetrics
import android.view.Gravity
import com.facebook.react.bridge.JavaOnlyMap
import com.facebook.react.common.mapbuffer.WritableMapBuffer
import com.facebook.react.uimanager.DisplayMetricsHolder
import com.facebook.react.uimanager.ReactStylesDiffMap
import org.assertj.core.api.Assertions.assertThat
import org.assertj.core.api.Assertions.within
import org.junit.After
import org.junit.Before
import org.junit.Test
Expand Down Expand Up @@ -84,11 +89,133 @@ class TextAttributePropsTest {
assertThat(textAlignment("end", isRTL = true)).isEqualTo(Gravity.LEFT)
}

@Test
fun lineHeightIsCappedByMaxFontSizeMultiplier() {
setFontScale(2f)

val textAttributes =
TextAttributeProps.fromReadableMap(
ReactStylesDiffMap(
JavaOnlyMap.of("fontSize", 14.0, "lineHeight", 20.0, "maxFontSizeMultiplier", 1.3)
),
)

assertThat(textAttributes.lineHeight).isCloseTo(20f * DENSITY * 1.3f, within(0.001f))
}

@Test
fun lineHeightIsCappedByMaxFontSizeMultiplierFromMapBuffer() {
setFontScale(2f)

// Keys are iterated in ascending order, so lineHeight is set before maxFontSizeMultiplier.
val textAttributes =
TextAttributeProps.fromMapBuffer(
WritableMapBuffer()
.put(TextAttributeProps.TA_KEY_FONT_SIZE, 14.0)
.put(TextAttributeProps.TA_KEY_LINE_HEIGHT, 20.0)
.put(TextAttributeProps.TA_KEY_MAX_FONT_SIZE_MULTIPLIER, 1.3),
)

assertThat(textAttributes.lineHeight).isCloseTo(20f * DENSITY * 1.3f, within(0.001f))
}

@Test
fun letterSpacingIsCappedByMaxFontSizeMultiplier() {
setFontScale(2f)

val textAttributes =
TextAttributeProps.fromReadableMap(
ReactStylesDiffMap(
JavaOnlyMap.of("fontSize", 14.0, "letterSpacing", 2.0, "maxFontSizeMultiplier", 1.3)
),
)

assertThat(textAttributes.fontSize).isEqualTo(37) // ceil(14 * 2 * 1.3)
assertThat(textAttributes.letterSpacing)
.isCloseTo(2f * DENSITY * 1.3f / textAttributes.fontSize, within(0.001f))
}

@Test
fun lineHeightScalesWithFontScaleWithoutMaxFontSizeMultiplier() {
setFontScale(2f)

val textAttributes =
TextAttributeProps.fromReadableMap(
ReactStylesDiffMap(JavaOnlyMap.of("fontSize", 14.0, "lineHeight", 20.0)),
)

assertThat(textAttributes.lineHeight).isCloseTo(20f * DENSITY * 2f, within(0.001f))
}

@Test
fun lineHeightIsNotCappedWhenFontScaleIsBelowMaxFontSizeMultiplier() {
setFontScale(1.2f)

val textAttributes =
TextAttributeProps.fromReadableMap(
ReactStylesDiffMap(
JavaOnlyMap.of("fontSize", 14.0, "lineHeight", 20.0, "maxFontSizeMultiplier", 1.5)
),
)

assertThat(textAttributes.lineHeight).isCloseTo(20f * DENSITY * 1.2f, within(0.001f))
}

@Test
fun lineHeightIsNotCappedWhenMaxFontSizeMultiplierIsZero() {
setFontScale(2f)

val textAttributes =
TextAttributeProps.fromReadableMap(
ReactStylesDiffMap(
JavaOnlyMap.of("fontSize", 14.0, "lineHeight", 20.0, "maxFontSizeMultiplier", 0.0)
),
)

assertThat(textAttributes.lineHeight).isCloseTo(20f * DENSITY * 2f, within(0.001f))
}

@Test
fun lineHeightIgnoresFontScaleWhenFontScalingIsDisabled() {
setFontScale(2f)

val textAttributes =
TextAttributeProps.fromReadableMap(
ReactStylesDiffMap(
JavaOnlyMap.of(
"fontSize",
14.0,
"lineHeight",
20.0,
"maxFontSizeMultiplier",
1.3,
"allowFontScaling",
false,
)
),
)

assertThat(textAttributes.lineHeight).isCloseTo(20f * DENSITY, within(0.001f))
}

private fun setFontScale(fontScale: Float) {
DisplayMetricsHolder.setScreenDisplayMetrics(
DisplayMetrics().apply {
density = DENSITY
scaledDensity = DENSITY * fontScale
},
)
}

private fun textAlignment(textAlign: String, isRTL: Boolean): Int {
return TextAttributeProps.getTextAlignment(
ReactStylesDiffMap(JavaOnlyMap.of("textAlign", textAlign)),
isRTL,
Gravity.CENTER_HORIZONTAL,
)
}

private companion object {
const val DENSITY = 2f
}
}
12 changes: 12 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -531,6 +531,18 @@ function MaxFontSizeMultiplierExample(props: {}): React.Node {
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
<Text maxFontSizeMultiplier={0}>Ignore inherited max (no max)</Text>
</Text>
<Text
allowFontScaling={true}
maxFontSizeMultiplier={1}
style={{
marginTop: 10,
lineHeight: 20,
letterSpacing: 1,
backgroundColor: 'lightgray',
}}>
lineHeight and letterSpacing are capped too (max 1x): these lines keep
the same spacing at any system font size
</Text>
</View>
);
}
Expand Down
12 changes: 12 additions & 0 deletions packages/rn-tester/js/examples/Text/TextExample.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -1269,6 +1269,18 @@ const examples = [
<Text allowFontScaling={true} maxFontSizeMultiplier={1}>
<Text maxFontSizeMultiplier={0}>Ignore inherited max (no max)</Text>
</Text>
<Text
allowFontScaling={true}
maxFontSizeMultiplier={1}
style={{
marginTop: 10,
lineHeight: 20,
letterSpacing: 1,
backgroundColor: 'lightgray',
}}>
lineHeight and letterSpacing are capped too (max 1x): these lines
keep the same spacing at any system font size
</Text>
<Text
allowFontScaling={true}
style={{fontSize: 22}}
Expand Down
Loading