Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Skia TextBox Alignment/Padding not behaving as expected #16568

Open
iurycarlos opened this issue May 3, 2024 · 2 comments
Open

Skia TextBox Alignment/Padding not behaving as expected #16568

iurycarlos opened this issue May 3, 2024 · 2 comments
Labels
difficulty/tbd Categorizes an issue for which the difficulty level needs to be defined. kind/bug Something isn't working platform/wasm 🌐 Categorizes an issue or PR as relevant to the WebAssembly platform project/layout 🧱 Categorizes an issue or PR as relevant to layouting and containers (Measure/Arrange, Collections,..) project/text 🔤 Categorizes an issue or PR as relevant to text (TextBox, PasswordBox, TextBlock, Fonts, …) triage/untriaged Indicates an issue requires triaging or verification

Comments

@iurycarlos
Copy link
Contributor

Current behavior

The Fluent Textbox "vertical alignment" for its text differs between platforms:

WASM:
image

DESKTOP:
image

We can observe that as long as we change the FontSize or the Height attributes, the result will be different.
Probably it is the alignment in skia that is broken, since WASM version seems correct.

Expected behavior

The alignment should be the same in all platforms

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

Using:
Uno.Templates::5.2.31

Run:
dotnet new unoapp -o TextBoxAlignment -preset "recommended" -platforms "android" -platforms "maccatalyst" -platforms "wasm" -platforms "windows" -platforms "desktop" -platforms "ios" -theme-service False -vscode False -pwa False -theme "fluent" -presentation "mvux" -config False -di False -log "none" -nav "blank" -http False -loc False -tests "none" -toolkit False -dsp False -id "com.companyname.TextBoxAlignment" -pub "O=TextBoxAlignment"

Add this code to MainPage.xaml:

<TextBox VerticalContentAlignment="Center" Text="Testing Vertical Text Alignment" />

<TextBox
	VerticalContentAlignment="Center"
	FontSize="11"
	Text="Testing FontSize 11" />


<TextBox
	Height="50"
	VerticalContentAlignment="Center"
	Text="Testing height 50" />

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

No response

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

@iurycarlos iurycarlos added kind/bug Something isn't working triage/untriaged Indicates an issue requires triaging or verification difficulty/tbd Categorizes an issue for which the difficulty level needs to be defined. labels May 3, 2024
@kazo0
Copy link
Contributor

kazo0 commented May 3, 2024

Same strange behavior applies when trying to set a Padding on the TextBox:

<TextBox Padding="20,0,0,0" Text="Testing Padding at 20,0,0,0" />
image

TextBoxAlignment.zip

@kazo0 kazo0 changed the title Fluent TextBox text alignment diverges between platforms Skia TextBox text alignment/Padding not behaving as expected May 3, 2024
@kazo0 kazo0 changed the title Skia TextBox text alignment/Padding not behaving as expected Skia TextBox Alignment/Padding not behaving as expected May 3, 2024
@Youssef1313
Copy link
Member

Youssef1313 commented May 3, 2024

image

This is the behavior on WinUI, which appears to match Skia? Am I missing something?

To me, it's actually a Wasm bug, or if microsoft/microsoft-ui-xaml#6324 will be fixed then we can match Skia, but looks like Microsoft views that issue as "By Design" and it's a behavior that's unlikely to change on their side.

So I think, for now, we should make Wasm match WinUI and Skia.

@Youssef1313 Youssef1313 added platform/wasm 🌐 Categorizes an issue or PR as relevant to the WebAssembly platform project/layout 🧱 Categorizes an issue or PR as relevant to layouting and containers (Measure/Arrange, Collections,..) project/text 🔤 Categorizes an issue or PR as relevant to text (TextBox, PasswordBox, TextBlock, Fonts, …) labels May 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
difficulty/tbd Categorizes an issue for which the difficulty level needs to be defined. kind/bug Something isn't working platform/wasm 🌐 Categorizes an issue or PR as relevant to the WebAssembly platform project/layout 🧱 Categorizes an issue or PR as relevant to layouting and containers (Measure/Arrange, Collections,..) project/text 🔤 Categorizes an issue or PR as relevant to text (TextBox, PasswordBox, TextBlock, Fonts, …) triage/untriaged Indicates an issue requires triaging or verification
Projects
None yet
Development

No branches or pull requests

3 participants