Typesetting from the end in compose android

by

I’m having trouble with making a text be set from the end.
It’s no problem if the text is shorter than its container, but once it’s longer, it clips/overflows/ellipses weirdly.

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
    Text(
        text = "Michal SuperLongMiddleName Surname",
        maxLines = 1,
        softWrap = false,
        textAlign = TextAlign.End,
        overflow = TextOverflow.Clip,
        style = TextStyle(textDirection = TextDirection.Rtl),
        modifier = Modifier
                .align(Alignment.End)
                .width(150.dp) // to show the problem
        ),
    )
}

So if the text is shorter I get properly
| Michal Short Surname|
but when it doesn’t fit the container, I get
|Michal SuperLongMiddleName Su|
while the expected result I believe should be
|l SuperLongMiddleName Surname|

P.S.: It is a design thing and I might have put too many properties (maybe they are clashing?) to get it working, but there was no luck in any of the combinations I thought of.

  • stackoverflow.com/a/71063157/7874746 For now, you can achieve this like that until Jetpack Compose supports this.

    – 

  • Some workaround: I would reverse the string and also turn the entire Text composable by 180 degree with graphicsLayer modifier. Note that textAlign should be Start in this case.

    – 

  • @AbdullahJaved Oh. it works with ellipsis, but unfortunately, I used it in the example only to clarify it. I actually need to clip the text and that way, it’s the same bug as in the compose. (I am removing it from question to not confuse others)

    – 

  • @bylazy I am not sure what step am I missing, but wouldn’t I end up with mirrored or upside-down letters?

    – 

  • @Majkeee You’re right, my mistake

    – 

Leave a Comment