InlineTextContent alignment not working a expected.

[Dominaezzz]

I expected PlaceholderVerticalAlign.Center to align the centre of the image with the center of the text but it aligns the center of the image with the bottom of the text. For all values of PlaceholderVerticalAlign.*, the align of the image is always aligned with the bottom of the text.

import androidx.compose.desktop.Window
import androidx.compose.foundation.Image
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.foundation.text.appendInlineContent
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Person
import androidx.compose.ui.text.Placeholder
import androidx.compose.ui.text.PlaceholderVerticalAlign
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.em

fun main() {
    Window(title = "Bad Text", size = IntSize(300, 300)) {
        val text = buildAnnotatedString {
            appendInlineContent("image")
            append(" is a person.")
        }
        val person = InlineTextContent(
            placeholder = Placeholder(1.em, 1.em, PlaceholderVerticalAlign.Center),
            children = {
                Image(Icons.Filled.Person)
            }
        )
        Text(text, inlineContent = mapOf("image" to person))
    }
}

[olonho]

Is the same problem present in Android Compose? Why do you believe that behavior we get is not correct?

[Dominaezzz]

The reason why I think the behaviour is different is because the docs say otherwise.

https://developer.android.com/reference/kotlin/androidx/compose/ui/text/PlaceholderVerticalAlign#center

It says,

Align the center of the placeholder with the center of the entire line

[Dominaezzz]

I don't know if this behaviour is present in Android compose.

[Dominaezzz]

Is what it looks like

[Dominaezzz]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1623185440192700?thread_ts=1623185440.192700&cid=CJLTWPH7S

Looks like it's not present in Android compose.

[Dominaezzz]

[mgroth0]

I am observing this problem in compose multiplatform version 1.7.0-dev1703 for Desktop on Mac OS

[m-sasha]

@mgroth0 Could you post a reproducer? Both the op's reproducer and the test below seem to work correctly:

fun main() = singleWindowApplication {
    val text = buildAnnotatedString {
        append("Hello ")
        appendInlineContent(inlineContentId, "[myBox]")
        append(" inline content")
    }

    Column {
        Text(
            text = text,
            inlineContent = redSquare(2.em),
            style = TextStyle(fontSize = 32.sp),
            modifier = Modifier
                .padding(8.dp)
                .border(Dp.Hairline, color = Color.Black)
        )
        Text(
            text = text,
            inlineContent = redSquare(0.5.em),
            style = TextStyle(fontSize = 32.sp),
            modifier = Modifier
                .padding(8.dp)
                .border(Dp.Hairline, color = Color.Black)
        )
    }
}

const val inlineContentId = "inlineContent"

private fun redSquare(size: TextUnit) =
    mapOf(
        Pair(
            inlineContentId,
            InlineTextContent(
                Placeholder(
                    width = size,
                    height = size,
                    placeholderVerticalAlign = PlaceholderVerticalAlign.Center
                )
            ) {
                Box(modifier = Modifier.fillMaxSize().background(color = Color.Red))
            }
        )
    )