A modern programming language that makes developers happier.

kotlinlang

How to align two texts of different sizes by their top?
```Row {
    Text(
        "h4 text",
        style = MaterialTheme.typography.h4,
    )
    Text("my icon")
}```
I saw that fontsize had a lineHeight, and a baselineshift.
The thing I don't get is that the baselineshift is a multiplier.
How can I compute the top with it?
Or is there some other way?

I saw you could align using alignbybaseline.
Then you will get whitespace above the small text.
I need the space to be under the small text

```Box {
    Row {
        Text(
            "h4 text",
            modifier = Modifier.padding(end = 10.dp),
            style = MaterialTheme.typography.h4,
            onTextLayout = {
                it.firstBaseline
            }
        )
        Row(
            modifier = Modifier
        ) {
            Text("my icon")
        }
    }
    Spacer(
        Modifier.padding(top = 11.dp)
            .fillMaxWidth()
            .height(1.dp)
            .background(Color.Black)
    )
}```


I could see two options, maybe you could use horizontal guideline from `ConstraintLayout` or use custom Layout to measure height of individual text and `positionY` accordingly

Will that work?
I've never done the measuring.
The problem is though, that If I color the background of a H4-text, it is bigger then the text itself.
So I would need to measure inside of it.

I didn't understand about coloring here. Could share some code to explain about it?

```
Text(
    "h4 text",
    modifier = Modifier.padding(end = 10.dp)
        .background(Color.Red),
    style = MaterialTheme.typography.h4,
    
    onTextLayout = {
        it.firstBaseline
    }
)```


Is that your desired behavior.. I never tried this. So you're saying the above code colors above &amp; below text but not behind it?

I think it has something todo with the baselineshift which you can find at `MaterialTheme.typography.h4.baselineShift`
But I don't know how to use it.

I want to align them with the top:
```Row(modifier) {
    Text(
        "some text",
        modifier = Modifier.padding(end = 10.dp),
        style = MaterialTheme.typography.h4
    )
    Column {
        Row {
            Icon(Icons.Default.DateRange)
            Text("another text)
        }
    }```
The problem is that if i color the background of the H4, it colors more then only the real text.
Therefor, I guess some padding is build in?
I want to know that padding (in this case 10.dp), such that I can align by the top of the text.
You suggested to use measuring of the childs, but does that work if more then the H4 is colored?

I'm not aware if there's any default padding with `Text` Composable but I believe it'll if you measure the height and use the padding with modifier, better give it a try.

Ok, I will learn about it and then give you the answer.

Not sure if it solves the exact usecase for you, but there’s also a modifier for this - `Modifier.alignBy` . Here’s an example - <https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/layout/ViewLayoutConfigurationsActivity.kt#L317|https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/[…]ample/jetpackcompose/layout/ViewLayoutConfigurationsActivity.kt>

I will investigate today, but first I have to quickly finish a demo.
Therefor I use the hardcoded 10.dp for now