Prevent Text in Jetpack Compose from enlarging when device font size is increases

Question

I have a screen in my app which displays a timer. If the user decides to increase the font size in the device settings menu then the text becomes too large for the layout and it begins to wrap. This is not an issue for my other screens that are more text heavy. For this screen - and only this screen - I would prefer to prevent the timer text from increasing in size if accessibility options are used.

The code in question looks like this, if it adds context:

HorizontalPager(state = pagerState, dragEnabled = dragEnabled) { page ->
    val timeInSeconds = abs(steps[page % steps.size] / 1000L)
    val minutes = (timeInSeconds / 60).toString().padStart(2, '0')
    val seconds = (timeInSeconds % 60).toString().padStart(2, '0')

    Text(
        modifier = Modifier.fillMaxWidth(0.85f),
        text = stringResource(R.string.pomodoro_active_notification_content_body, minutes, seconds),
        textAlign = TextAlign.Center,
        fontSize = LocalDimens.current.intervalTimeFontSize,
        style = MaterialTheme.typography.h1
    )
}

Answer 1

As @CommonsWare correctly pointed out, you need to reverse scaling.

You can get fontScale from LocalDensity:

val Int.nonScaledSp
    @Composable
    get() = (this / LocalDensity.current.fontScale).sp

Usage:

10.nonScaledSp

---

An other option is using dp related text size: it's gonna ignore system Font Size setting, but it's gonna take Display size setting into account - it can be useful in cases when you have some container view size in dp and wanna text to have size related to the parent parent:

val density = LocalDensity.current
val textSize = with(density) { 15.dp.toSp() }