Hello, I have issues with the rendering of a rotat...

# compose

[Nino]

Hello, I have issues with the rendering of a rotating Text composable in Android. The letters "giggle" / "snap" between 2 y values it seems, that's really noticeable.

It feels like text is handled differently in Compose. Is it possible to "rasterize" the Text composable and just rotate the pixels (even if it creates some aliasing)?

Here a small reproductible example (with a simple colored square that is working perfectly fine).

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.SpaceEvenly,
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    val angle by rememberInfiniteTransition().animateFloat(
        initialValue = 0F,
        targetValue = 10F,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 50_000,
                easing = LinearEasing,
            ),
            repeatMode = RepeatMode.Reverse,
        )
    )

    Text(
        modifier = Modifier
            .graphicsLayer {
                rotationZ = angle
            }
            .padding(64.dp),
        text = "I'm a text that giggle all around, unlike this box down here :( -_| ",
        textAlign = TextAlign.Center,
        fontSize = 20.sp
    )

    Box(
        modifier = Modifier
            .graphicsLayer {
                rotationZ = angle
            }
            .size(200.dp)
            .background(Color.Magenta),
    )
}

2025-07-23 18-19-20.mp4

[romainguy]

You can try two things:

[romainguy]

• Linear text

[romainguy]

• Set your graphicsLayer to have an Offscreen compositing strategy

[romainguy]

#2 is what you are asking for, but #1 should fix it as well without generating an extra offscreen texture

[Nino]

As always, thanks Romain for the tips, compositingStrategy = CompositingStrategy.Offscreen is exactly what fixes my problem. But I don't understand why rendering the text in an offscreen buffer fixes the text "snapping". Any clues? 😄

Also, "linear text compose" doesn't bring anything, am I missing something?

[romainguy]

Because when using an offscreen layer the text is rasterized into a texture, and the texture is rotated

[romainguy]

when you don't do this, the text is re-rasterized at different rotation angles, which when combined with hinting, etc. causes the wiggle

[romainguy]

Linear text effectively prevents this

[romainguy]

Here's a way to enable linear text:

[romainguy]

ProvideTextStyle(
  TextStyle(textMotion = Animated)
) {
  Text(…)
}

[Nino]

I see, thanks! I guess the "cost" of compositingStrategy = CompositingStrategy.Offscreen is the fact we have to render "twice" this Composable, right?

[romainguy]

Well you render it once the first time (or every time the content changes), then the texture is copied on every frame

[romainguy]

So in the worst case, yeah you draw twice

[romainguy]

But also you use more memory

[romainguy]

It can also look "bad" if you start scaling for instance

[Nino]

Yes, makes sense. Thanks a lot for your quick help 😄

I just looked for the other solution you cited (TextMotion.Animated), and it all boils down to good old Canvas with LINEAR_TEXT_FLAG and SUBPIXEL_TEXT_FLAG

[romainguy]

Yep, hence my mention of linear text

[Nino]

Yeah, I didn't see the relation between the "Compose world" and the Canvas flags 😅

But in the end, Compose is just a big Canvas

[romainguy]

Views are just a big Canvas

[Halil Ozercan]

Happy to self promote once again https://halilibo.com/2024/why-text-gets-jittery-when-scaled-on-android.html

[Halil Ozercan]

"Scaled" in the title is just one example, the same thing of course applies to translation and rotation