maui [WinUI] `LineHeight` behavior is different from HTML&CSS behavior

Description

I tried to set LineHeight property to a Label and the Label's text is not vertically centered as it happens when rendered in a web browser.

Steps to Reproduce

Run the sandbox project with this commit https://github.com/MartyIX/maui/commit/ebadf353c59f8570dae55165a28f5b31a0d507dc (https://github.com/MartyIX/maui/tree/feature/2024-04-08-LineHeight-behavior)

Compare behavior with the following HTML&CSS:

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="src/style.css">
   </head>
   <body>

     <div class="label1">Hi friend, try change my color!<br>second line</div>
     <div class="label2">Hi friend, try change my color!<br>second line</div>
     <div class="label1">only one line</div>
     <div class="labelNormal">first line<br>second line</div>
     <div class="label3">BEHAVIOR DIFFERENCE</div>
   </body>
 </html>

&

body {
  background: #ffffff;
  padding: 0 24px;
  color: white; /* Change my color to yellow */
  margin: 0;
  height: 100vh;
  display: flex;
  font-family: sans-serif;
  font-size: 14px;
  justify-content: center;
  align-items: flex-start;
}

.label1 {
  height: 150px;
  color: blue;
  background-color: lightblue;
  line-height: 40px;
}

.label2 {
  color: green;
  background-color: lightgreen;
  line-height: 40px;
}

.labelNormal {
  height: 150px;
  color: purple;
  background-color: pink;
}

.label3 {
  color: brown;
  background-color: lightgray;
  line-height: 40px;
}

(For your convenience check it out here: https://playcode.io/1828826)

You should see (the MAUI app on the left and a rendered HTML&CSS on the right):

and the label BEHAVIOR DIFFERENCE is (vertically) aligned differently. In my opinion, it's wrong on Windows. There should be more whitespace above the label.

Notes:

There is also #17741 but that bug is reported for android.
Documentation https://learn.microsoft.com/en-gb/dotnet/maui/user-interface/controls/label?view=net-maui-8.0#set-line-height specifies On Windows, the Label.LineHeight property changes the line height of text that wraps onto multiple lines. but I'm not sure if this note covers what this is issue is about.
edit: I also filed https://github.com/microsoft/microsoft-ui-xaml/issues/9528 as it looks like it might be a WinUI issue.

Link to public reproduction project repository

https://github.com/MartyIX/maui/tree/feature/2024-04-08-LineHeight-behavior

Version with bug

8.0.14 SR3.1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

Windows 10, Windows 11

Did you find any workaround?

No.

Relevant log output

No response

Apr 08 '24 12:04 MartyIX

Given #17741, perhaps @hansmbakker could comment on if this issue is also an issue on android or if his expectation is different.

Apr 08 '24 13:04 MartyIX

This is how it looks like on MacCatalyst:

Notice that BEHAVIOR DIFFERENCE is aligned to the bottom on. On Windows, it's exactly the opposite (it's aligned to the top).

Apr 08 '24 13:04 MartyIX

cc @kubaflo if you have an opinion on this issue given that you did work on #20352

Apr 09 '24 09:04 MartyIX

Can repro this issue at Windows platform on the latest 17.10.0 Preview 3(8.0.10/8.0.20) with sample project.

Apr 10 '24 09:04 kevinxufei

I filed https://github.com/microsoft/microsoft-ui-xaml/issues/9528 where I show how various properties behaves on WinUI. MAUI could potentially work around it though.

Apr 14 '24 18:04 MartyIX