AvaloniaUI/Avalonia

Text with emoji loses vertical alignment

jpgarza93 opened this issue ยท 0 comments

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.