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

Text with emoji loses vertical alignment #17734

Open
jpgarza93 opened this issue Dec 9, 2024 · 0 comments
Open

Text with emoji loses vertical alignment #17734

jpgarza93 opened this issue Dec 9, 2024 · 0 comments

Comments

@jpgarza93
Copy link

jpgarza93 commented Dec 9, 2024

Describe the bug

When adding an emoji to the Text property of a , the text's vertical alignment is disrupted no matter what the LineHeight is. The text appears misaligned vertically, with the entire content shifting upwards as if the emoji dictates the height of the text.

With emoji (The text is not aligned to the vertical center of the emoji.)
image

Without emoji (vertically aligned)
image

To Reproduce

  1. Add a to the UI.
  2. Set the Text property to a string containing both regular text and an emoji (e.g., "😊 HELLO Emoji").
<TextBox
     Classes="Badge Info"
     VerticalAlignment="Center"
     VerticalContentAlignment="Center"
     Text="😊 HELLO emoji" />
  1. Observe the vertical alignment of the text within the TextBox.

Expected behavior

I would expect the emoji and text to share the same vertical-line alignment.

Avalonia version

11.2.2

OS

Windows

Additional context

Seeing the same issue on <Label/> or other text controls. I am using Lexend font but the problem exists with the default and all fonts I have tried.

@jpgarza93 jpgarza93 added the bug label Dec 9, 2024
@jpgarza93 jpgarza93 changed the title Text with emoji loses vertical alignment. Text with emoji loses vertical alignment Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants