I’d like to have my `Text()` measure as though its text is bold even when its not so that the size o...

# compose

[Bryan Herbst]

I’d like to have my Text() measure as though its text is bold even when its not so that the size of the Text() component doesn’t change as text gets bolded/unbolded.

What’s the best way to accomplish that?

Here’s an example of the behavior I don’t want:

Screen Recording 2021-04-23 at 8.20.41 AM.mov

[grandstaish]

You could have invisible bolded versions of the labels in the same boxes so that they contribute to the size. But you’d need to be careful to ignore them in the semantics tree

[grandstaish]

snap

[Zach Klippenstein (he/him) [MOD]]

Lol

[Bryan Herbst]

I actually just got a working modifier!

fun Modifier.widthByTextStyle(
  text: String,
  style: TextStyle
) = composed {
  val maxIntrinsics = MultiParagraphIntrinsics(
    annotatedString = AnnotatedString(text),
    style = style,
    placeholders = emptyList(),
    density = LocalDensity.current,
    resourceLoader = LocalFontLoader.current
  )

  val widthDp = with(LocalDensity.current) {
    maxIntrinsics.maxIntrinsicWidth.toDp()
  }

  width(widthDp)
}

[Bryan Herbst]

The invisible text was my first thought, but didn’t love it

[Zach Klippenstein (he/him) [MOD]]

Nice!

[Bryan Herbst]

Modifier needs a little cleanup, but was a lot easier than I feared

[Javier]

Curiously, I am going to save that modifier, but I liked the animation when you change selected widget xD

[Zach Klippenstein (he/him) [MOD]]

We interacted on Twitter about this, but idk if you saw this thread at the time about animating font weights in compose: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1618853550136500

[Zach Klippenstein (he/him) [MOD]]

Tl;dr it should technically be possible, but seems broken right now.

[Zach Klippenstein (he/him) [MOD]]

In case that’s something you try doing

[Bryan Herbst]

I did! And I’ve had a similar discussion internally too- would love to support animating between font weights but our font isn’t a variable weight font right now anyway (reminds me, need to chat with our UX team about that)

[Bryan Herbst]

@Javier thanks, I’m super happy with the selection animation too! The background of each chip is just a pretty straightforward modifier:

private fun Modifier.scrollableSegmentBackground(selected: Boolean) = composed {
  val elevationDp by animateDpAsState(
    targetValue = if (selected) TargetElevation.OnLight.medium else 0.dp
  )

  val backgroundColor by animateColorAsState(
    targetValue = if (selected) {
      TargetTheme.colors.background.default
    } else {
      TargetTheme.colors.background.container
    }
  )

  graphicsLayer(
    shadowElevation = with(LocalDensity.current) { elevationDp.toPx() },
    shape = SegmentShape
  ).background(
    color = backgroundColor,
    shape = SegmentShape
  )
}

[Siyamed]

I recently learned that make font bold but dont change measurement is actually not weight but a variable font axis called grade

[Siyamed]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#grade

[Siyamed]

doesn’t help you now but wanted to share

[Zach Klippenstein (he/him) [MOD]]

This makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself.

Wow this is super interesting. Learning so much today!

[Colton Idle]

@Bryan Herbst that code snippet you posted is all you need to get that animation to work from a solid background "chip" to an elevated "card" looking chip?

[Bryan Herbst]

Yep! scrollableSegmentBackground() does both the background color and the elevation.