Has anyone found an effective way to render mathem...

# compose

[Kashismails]

Has anyone found an effective way to render mathematical symbols inline within text? I've successfully used Canvas for drawing mathematical notation, but I'm looking for a solution that allows me to integrate math symbols directly inline with regular text. Would AnnotatedString be a viable approach for this?

[Oleksandr Balan]

I think you may use InlineTextContent with AnnotatedString to achieve it. Something like this 👇

@Preview
@Composable
private fun AnnotatedStringPreview() {
    Text(
        modifier = Modifier.padding(8.dp),
        text = buildAnnotatedString {
            appendInlineContent("<<sum>>")
            append(" x")
            append(" + ")
            appendInlineContent("<<sum>>")
            append(" y")
        },
        inlineContent = mapOf(
            "<<sum>>" to InlineTextContent(
                placeholder = Placeholder(
                    width = 0.8.em,
                    height = 0.8.em,
                    placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline,
                ),
                children = { SumSymbol() },
            ),
        ),
        fontSize = 40.sp,
    )
}

@Composable
private fun SumSymbol(modifier: Modifier = Modifier) {
    Canvas(modifier = modifier.fillMaxSize()) {
        val w = size.width
        val h = size.height

        val points = listOf(
            Offset(w * 0.9f, 0f),
            Offset(0f, 0f),
            Offset(w * 0.5f, h * 0.5f),
            Offset(0f, h),
            Offset(w * 0.9f, h),
        )

        drawPoints(
            points = points,
            pointMode = PointMode.Polygon,
            cap = StrokeCap.Round,
            color = Color.Black,
            strokeWidth = 3.dp.toPx(),
        )
    }
}

[Kashismails]

The hard thing here is to track the sizing of the equations as they can be of different sizes