IssueTracker

Verified that something happens on the Material.Text layer It probably is the merging of styles. Will look further. Screenshots and the code attached.

val str = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nibh lacus, finibus " +
    "vitae nulla ut, tincidunt fringilla arcu. Duis vestibulum ligula quis blandit condimentum." +
    " Nam efficitur lorem et velit pellentesque viverra. Etiam vitae lacinia urna. " +
    "Nullam a rutrum urna, at hendrerit purus. Donec nec dui nec lacus facilisis bibendum in" +
    " nec risus. Sed convallis eu orci sit amet ullamcorper. Sed fermentum tristique lectus, " +
    "at lacinia dolor ultricies vitae. Donec id interdum orci. Sed ac sapien ut ipsum accumsan" +
    " tristique. Morbi mollis eleifend hendrerit. Curabitur eget mi auctor, maximus dui ut," +
    " pellentesque ante. Aliquam molestie sagittis euismod."


@Composable
fun TextAlignmentDemo() {
    Column {
        Title("Material Text")
        Text(TextAlign.Left, bgColor = Color.Yellow)
        Text(TextAlign.Center, bgColor = Color.Cyan)
        Text(TextAlign.Right, bgColor = Color.Green)

        Title("BasicText")
        BasicText(TextAlign.Left, bgColor = Color.Yellow)
        BasicText(TextAlign.Center, bgColor = Color.Cyan)
        BasicText(TextAlign.Right, bgColor = Color.Green)
    }
}

@Composable
fun Text(align: TextAlign, bgColor: Color = Color.Transparent, modifier: Modifier = Modifier) {
    Text(
        modifier = modifier.fillMaxWidth().background(color = bgColor).padding(vertical = 8.dp),
        text = str,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        textAlign = align,
        fontSize = 16.sp,
        color = Color.Black,
    )
}

@Composable
fun BasicText(align: TextAlign, bgColor: Color = Color.Transparent, modifier: Modifier = Modifier) {
    BasicText(
        modifier = modifier.fillMaxWidth().background(color = bgColor).padding(vertical = 8.dp),
        text = str,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        style = TextStyle(
            textAlign = align,
            fontSize = 16.sp,
            color = Color.Black
        )
    )
}

@Composable 
fun Title(text: String) {
    Text(text, fontSize = 16.sp, modifier = Modifier.padding(top = 16.dp))
}

Hooray. Glad this is verified. I thought I was going crazy and I was about to turn in my letter of resignation since I couldn't center text properly. =)

I spoke too soon, it is not about merging of styles, but it is about letterspacing.

Minimal repro is:

BasicText(
  text = longStr,
  maxLines = 1,
  overflow = TextOverflow.Ellipsis,
  style = TextStyle(
    textAlign = TextAlign.Right,
    letterSpacing = 0.5.sp
  )
)

the issue reproduces on platform as well. could not check all platform versions but saw it on android 25 and 30.

    <TextView
        android:id="@+id/text1"
        android:textSize="14sp"
        android:letterSpacing="0.035"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAlignment="textEnd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

• StaticLayout calculates the last line with a negative starting point in such cases.
• For example if maxLines is 2, the first line appears correct but the second line shifts to an invisible negative position.
• Happens for both RTL and LTR
• Tried to see if I can trick via using AlignmentSpan instead of StaticLayout.alignment, that didn't work either.
• tested with Align.End, Align.Start, that didn't work either.

There was a letterSpacing issue at b/173574230 and b/183128727. Looks like letterspacing have weird behavior on Android platform which makes this a nasty platform dependent bug. I see little hope to fix this on Compose side (which means a backward compatible solution).

will reduce the priority since there is not much to do for letter spacing for all versions of android. will check it later again.

This issue cannot be fixed easily on Compose since it is a bug in the android framework. The solution

• would either require framework changes which would be applicable only after Android T etc
• or moving native code into Compose (which is not in our plans yet)

The option for applications is not to use ellipsis, letterspacing, and text align together.

Based on the use case/design

• use ellipsis and text align
• use letter spacing and text align
• do not use letterspacing and ellipsis with any non default text align.