tl;dr: Is there a way to hook into the native text line-breaking algorithm (if there is one)? I created a Composable for handling HTML ruby text. It's basically markup that can be used to add additional information to text. It's often used for providing readings in Japanese for example. For that the text is displayed above the Japanese characters (see image). My composable if made out of

RubyText

that contains text and optionally a ruby text that dictate it's reading. These are packed inside a

FlowRow

.The problem I am facing is that I can't control line breaking properly this way. If there is a long slice of text without reading annotations they are packed into the same

RubyText

composable. Thus they cannot break in the middle. Is there a way to hook into the native line-breaking and take advantage of it? Or do I have to re-implement it myself to make my rubied text work properly?

@Composable
fun RubyText(
    text: String,
    ruby: String? = null,
    rubyVisible: Boolean = true,
    style: TextStyle = TextStyle.Default,
) {
    val rubyFontSize = LocalTextStyle.current.fontSize / 2
    val boxHeight = rubyFontSize.toDp()

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Box(modifier = Modifier.requiredHeight(boxHeight + 3.dp)) {
            ruby?.let {
                if (rubyVisible) {
                    Text(text = it, style = TextStyle(fontSize = rubyFontSize))
                }
            }
        }
        Text(text = text, style = style)
    }
}

// This renders the second image (nside of the thread).
fun example2() {
        RubyText(text = "このルールを")
        RubyText(text = "守", ruby = "まも")
        RubyText(text = "るらない")
        RubyText(text = "人", ruby = "ひと")
        RubyText(text = "は")
        RubyText(text = "旅行", ruby = "りょこう")
        RubyText(text = "ができなくなることもあります。")
}

There's no way to hook into the algorithm, but this seems like something we might be able to support with some other api? Please file a feature request

HACK:

val (annotatedString, inlineContent) = "このルールを守まもるらない人ひとは旅行りょこうができなくなることもあります。".toRuby()
Text(text = annotatedString, inlineContent = inlineContent)

private val RUBY_REGEX = "\uFFF9([^\uFFF9\uFFFA\uFFFB]*)\uFFFA([^\uFFF9\uFFFA\uFFFB]*)\uFFFB".toRegex()
private fun String.toRuby(): Pair<AnnotatedString, Map<String, InlineTextContent>> {
    val inlineContent = mutableMapOf<String, InlineTextContent>()
    return buildAnnotatedString {
        var position = 0
        for (match in RUBY_REGEX.findAll(this@toRuby)) {
            append(substring(startIndex = position, endIndex = match.range.first))
            position = match.range.last + 1
            val id = match.value
            val (text, annotation) = match.destructured
            appendInlineContent(id, text)
            inlineContent[id] = InlineTextContent(
                placeholder = Placeholder((2 * text.length).em, 3.em, PlaceholderVerticalAlign.Bottom),
                children = {
                    Column(
                        modifier = Modifier.fillMaxHeight(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Bottom,
                    ) {
                        BasicText(text = annotation)
                        BasicText(text = text)
                    }
                }
            )
        }
        append(substring(startIndex = position))
    } to inlineContent
}

of course, something built-in could work much much better than this

@ephemient I didn't create a feature request since I lacked an account for the issue tracker. Could you explain the example above a bit more clearly? What exactly should

toRuby

do?

it's replacing

\uFFF9..\uFFFA..\uFFFB

(the Unicode interlinear annotations for ruby text, but you could of course use whatever else you want, this is just an example) with inline content inline content means that the string contains "旅行" (which is important for accessibility) but when it is drawn, the given

@Composable

is used instead of that substring https://developer.android.com/reference/kotlin/androidx/compose/foundation/text/InlineTextContent

For future reference, anyone can make an account for free, it's helpful to be able to file requests and bugs.

@Zach Klippenstein (he/him) [MOD] I know, I moved away from Google products a couple of years ago. I just don't feel comfortable to have to create a new account just to file a feature request. I am thankful for ephemient.

neither Android nor web supports top-to-bottom text as far as I know

Web not directly, but a website could use CSS to render it properly. But this might be out-of-scope for Compose I suppose.

I am wrong, CSS

writing-mode: vertical-rl

has been implemented in many web engines (very recently): https://caniuse.com/mdn-css_properties_writing-mode_horizontal_vertical_values