[skia][macOS] TextBox/RadioButtons/ComboBox/CheckBox/Button/InfoBar texts are not properly aligned vertically

[ArchieCoder]

Current behavior

The text is more at the top

See the text box at the left

Expected behavior

I would expect the text to be vertically centered

How to reproduce it (as minimally and precisely as possible)

Use this sample UnoApp1.zip and click on Go to Second page to see the dialog, you will notice all the control texts are mostly not centered.

(Same as #16930)

Workaround

No response

Works on UWP/WinUI

Yes

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia

NuGet package version(s)

No response

Affected platforms

Skia (macOS)

IDE

Visual Studio 2022

IDE version

Latest VS

Relevant plugins

No response

Anything else we need to know?

No response

[ArchieCoder]

@ramezgerges I changed the title because I discovered that most controls have the wrong vertical alignment, see screenshot

[ArchieCoder]

InfoBar message is affected also

[ArchieCoder]

[ramezgerges]

This is actually not a bug, but is a result of font differences between platforms and the way the text is vertically aligned. Text is top-aligned in all those examples, so the Text will be closer to the top. WinUI in fact does the same thing, but because the default font (Segoe UI) with the default font size is taller than the default font used on the MacOS target, it appears to be better centered, but it's actually a pure coincidence. If you make the FontSize smaller, it's start looking weird like the results you see above.

To deal with this, you can use a custom font file that's used on both WinUI and Uno. Also, to make text acutally vertically-centered, use VerticalAlignment = "Center" where applicable.

[jeromelaban]

@ramezgerges It feels like we should be adjusting this so that we have the same rendering. Is this a value that is not aligned with WinUI's default templates? Or maybe ContentControl?

[jeromelaban]

Looking at it further, as Ramez is mentioning, since the default fonts are not the same between platforms, the automatic sizing and alignment may not match.

Here's an example on WinUI, using the amazing Xaml Studio:

@ArchieCoder in order to have the same layout everywhere, you'd need to use the same font and size everywhere (something we're working on in #15958), or to set the ContentVerticalAlignment as Ramez mentioned, which may help to some extents.

[ArchieCoder]

@jeromelaban @ramezgerges

I applied the Font using your Uno.Font nuget to use Roboto.

There are still inconsistencies even if the font Roboto + font size are applied.

Open project and click on "Click here"

UnoFontApp-master.zip
or
https://github.com/ArchieCoder/UnoFontApp

[jeromelaban]

Thanks. It feels like adjusting the fonts using OpenSans (in #15958) which has similar characteristics will be the best course of action here.

[ArchieCoder]

@ramezgerges @jeromelaban @ajpinedam Sorry to bring back again this issue, but as for now, this is an important one for my project.

There are inconsistencies between the 3 platforms: WinUI-Skia Windows-Skia Mac. I don't have access to Linux (I'm away from home).

I created a small project below where the UI properties come from Figma design. The font (open source) is included in the proejct. On Mac, aside of the vertical alignement, the font rendering seems off as well. I have the impression with Skia there is a bug with LineHeight and/or LineStackingStrategy. My project is ultra small so you can see the bugs easily.

WinUI (StackPanel good, Button good)

Skia Windows (StackPanel not good, Button good)

Skia Mac (StackPanel not good, Button not good)

Skia Windows vs Skia Mac side by side -> it feels the font on Mac renders differently

Project
UnoApp1.zip

[jeromelaban]

We're still working on this issue, variable fonts supports is causing trouble with the current sizing of controls. The font is different on every platform (the closest to Segoe UI), as we're mentioned previously, which makes the visual aspect different. We'll keep this issue updated as we know more.

[ArchieCoder]

Ah, I didn't know that a variable font was also an issue.

[jeromelaban]

Fixed by #3954