android-jetpack-composeandroid-jetpackandroid-jetpack-compose-material3

Text doesn't fit to the edge of Text component with justify in Jetpack Compose

I'm writing a book reader app and I'm trying to style the text for reading (justify, hyphens, etc).

I have the following code for text component:

Text(
    text = reader.value[viewModel.currentPage],
    style = LocalTextStyle.current.copy(
        textAlign = TextAlign.Justify,
        textIndent = TextIndent(
            firstLine = 35.sp,
        ),
        hyphens = Hyphens.Auto,
        lineBreak = LineBreak.Paragraph.copy(
            strategy = LineBreak.Strategy.HighQuality,
            strictness = LineBreak.Strictness.Strict,
            wordBreak = LineBreak.WordBreak.Phrase,
        ),
    ),
    modifier = Modifier
        .fillMaxWidth()
        .border(1.dp, Color.White),
)

And result of text component:

enter image description here

However, the text in the block doesn't fit to the right edge because of the whitespace I think. All content is inside column, that has 16.dp paddings on left and right sides.

I expected something like this, with same paddings around:

enter image description here

Are there any built-in Compose features to somehow remove/hide these whitespaces? Or any other solutions? I've read the documentation about text styling in compose, but I didn't find anything to solve the problem

Solution

  • So, after a night of searching and reading, I finally found the solution (I feel stupid about it now):

    Text(
    text = reader.value[viewModel.currentPage],
    style = LocalTextStyle.current.copy(
        textAlign = TextAlign.Justify,
        textIndent = TextIndent(
            firstLine = 35.sp,
        ),
        hyphens = Hyphens.Auto,
        lineBreak = LineBreak.Paragraph.copy(
            strategy = LineBreak.Strategy.HighQuality,
            strictness = LineBreak.Strictness.Strict,
            wordBreak = LineBreak.WordBreak.Phrase,
        ),
        fontSize = MaterialTheme.typography.bodyLarge.fontSize,
        lineHeight = MaterialTheme.typography.bodySmall.lineHeight,
        letterSpacing = TextUnit.Unspecified,
    ),
    modifier = Modifier
        .fillMaxWidth(1f)
        .border(1.dp, Color.White),
)

    I added letterSpacing = TextUnit.Unspecified and everything now as I want

    Solution result