How can I vertically center text in compose deskto...

# compose-desktop

[rob42]

How can I vertically center text in compose desktop? There are various threads here (and on github) that apply to Android, but I'm unable to achieve a centered result on desktop.

The issue appears to be that when drawing text, additional padding is added to the top of the text's bounding box. The bounding box can be centered, but not the actual text drawn inside it.

Here's an example. Notice how the 0 is not vertically centered in its bounding box:

BasicText(
    modifier = Modifier.background(Color.Green.copy(alpha = 0.3f)),
    text = "0",
    style = TextStyle(fontSize = 48.sp)
)

[Kirill Grouchnikov]

There’s a difference between centering a single glyph vs centering “text” as a more amorphous entity. You have baseline, ascenders, descenders just to begin with.

[Kirill Grouchnikov]

“Centering” a lower-case “g” vs centering an upper-case “W” would be quite different from centering the text “Wg” as a single unit.

[rob42]

That's right. But in this case, nothing is centered. It's not centered on x-height, nor ascender-descender height

[rob42]

Screenshot 2024-01-18 155228.png

[Ivan Matkov]

https://github.com/JetBrains/compose-multiplatform/issues/3453#issuecomment-1803686130

[Ivan Matkov]

.wrapContentHeight(
    align = Alignment.CenterVertically, // Default value
    unbounded = true // Makes sense if the size less than text
),

[Ivan Matkov]

It's not centered on x-height, nor ascender-descender height

It's HIGHLY depends on metrics from specific fonts. Centering on x-height is not supported, but ascender-descender height IS allied here. It's just picked up from the font where it can be in "visually unexpected"

[Ivan Matkov]

Screenshot 2023-11-09 at 11.53.39.png

[rob42]

Sorry for the very very slow follow-up on this. I was experiencing this issue with the Windows system font (Segoe UI).

After some Googling, it does appear that the font metrics of Segoe UI are unusual, and that it needs to be handled as a special case. Here's a discussion of this issue as it relates to JavaFX: https://bugs.openjdk.org/browse/JDK-8115125

The issue is Segoe UI has a huge code page covering most languages and has made a effort to make the accents on characters readable even at small font sizes.

They added a workaround specifically for SegoeUI -- and I think compose desktop should consider doing the same, since this is the default font used on Windows.