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

[Android] When using custom fonts, text position in TextBox or Button doesn't render correctly #6528

Open
2 tasks done
lunelake opened this issue Jul 22, 2021 · 10 comments · May be fixed by #18608
Open
2 tasks done
Assignees
Labels
difficulty/medium 🤔 Categorizes an issue for which the difficulty level is reachable with a good understanding of WinUI kind/bug Something isn't working platform/android 🤖 Categorizes an issue or PR as relevant to the Android platform project/text 🔤 Categorizes an issue or PR as relevant to text (TextBox, PasswordBox, TextBlock, Fonts, …)

Comments

@lunelake
Copy link

lunelake commented Jul 22, 2021

Current behavior

When using custom fonts, text position in TextBox or Button doesn't render correctly on Android

image

Expected behavior

When using custom fonts, text position in TextBox or Button render correctly on Android

image

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

  1. Apply custom font to Android by following the instructions in the link.
    https://platform.uno/docs/articles/features/custom-fonts.html
  2. Add button or TextBox

Workaround

None

Works on UWP/WinUI

Yes

Environment

Nuget Package:

  • Uno.UI: 3.8.11

Nuget Package Version(s):

Affected platform(s):

  • Android
  • Visual Studio 2019 (version: 16.10.3)

IDE:

Anything else we need to know?

@lunelake lunelake added difficulty/tbd Categorizes an issue for which the difficulty level needs to be defined. kind/bug Something isn't working triage/untriaged Indicates an issue requires triaging or verification labels Jul 22, 2021
@jeromelaban
Copy link
Member

Thanks for the report. Can you create a repro sample so we're sure that we're looking at the same issue ?

@jeromelaban jeromelaban added triage/needs-information Indicates an issue needs more information in order to work on it. project/text 🔤 Categorizes an issue or PR as relevant to text (TextBox, PasswordBox, TextBlock, Fonts, …) labels Jul 22, 2021
@lunelake
Copy link
Author

lunelake commented Jul 22, 2021

Here is a sample. It works fine on iOS and Windows but not on Android.

UnoCustomFontIssuesRepro.zip

@no-response no-response bot removed the triage/needs-information Indicates an issue needs more information in order to work on it. label Jul 22, 2021
@jeromelaban jeromelaban removed the triage/untriaged Indicates an issue requires triaging or verification label Jul 22, 2021
@jeromelaban
Copy link
Member

Thanks for the repro. I was not able to reproduce the issue visually, the content is appearing properly. Which device are you using to run this repro ?

@jeromelaban jeromelaban added the triage/needs-information Indicates an issue needs more information in order to work on it. label Aug 3, 2021
@no-response
Copy link

no-response bot commented Aug 23, 2021

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. We don't monitor discussions on closed issues thus please open a new GitHub issue if you need the team to revisit this matter.

@no-response no-response bot closed this as completed Aug 23, 2021
@lunelake
Copy link
Author

@jeromelaban Sorry, I didn't know there were comments. I'm having a problem with the Android emulator (Pixel5 - API 30 Android 11.0-API30) and the Samsung Galaxy M12.

@jeromelaban
Copy link
Member

Thanks for the update.

@jeromelaban jeromelaban reopened this May 11, 2022
@jeromelaban jeromelaban removed the triage/needs-information Indicates an issue needs more information in order to work on it. label May 11, 2022
@tristanlabelle
Copy link

tristanlabelle commented Oct 30, 2022

I'm hitting the same issue, and it looks like the custom font I'm using exacerbates it even more because text ends up rendered way below.

Repro code:

<Page
    x:Class="UnoTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <StackPanel VerticalAlignment="Top" Orientation="Horizontal" Margin="20">
        <Border BorderThickness="1" BorderBrush="Green">
            <TextBlock Text="Default Font" FontSize="30" />
        </Border>
        <Border BorderThickness="1" BorderBrush="Red">
            <TextBlock FontFamily="ms-appx:///Assets/Assets/BravuraText.otf#Bravura Text" Text="Bravura Font" FontSize="30" />
        </Border>
    </StackPanel>
</Page>

BravuraText.odf can be downloaded here: https://github.com/steinbergmedia/bravura/blob/master/redist/otf/BravuraText.otf

Windows (correct):
image

Android (incorrect text metrics which adds space above and below):
image

Hacky workaround: use Android-specific negative vertical margins on the TextBlock, ie android:Margin="0 -50" (I found the value -50 by trial and error) :

image

GitHub
Bravura music font, reference font for SMuFL (Standard Music Font Layout) - bravura/BravuraText.otf at master · steinbergmedia/bravura

@MartinZikmund MartinZikmund changed the title When using custom fonts, text position in TextBox or Button doesn't render correctly on Android [Android] When using custom fonts, text position in TextBox or Button doesn't render correctly Jul 10, 2023
@MartinZikmund MartinZikmund added platform/android 🤖 Categorizes an issue or PR as relevant to the Android platform difficulty/medium 🤔 Categorizes an issue for which the difficulty level is reachable with a good understanding of WinUI and removed difficulty/tbd Categorizes an issue for which the difficulty level needs to be defined. labels Jul 10, 2023
@sang-hyeon
Copy link

sang-hyeon commented Jul 20, 2023

same issue here.

see Android-IncludeFontPadding

@yeahg-dev
Copy link

This makes text based UI Layout different on iOS and Android, and it makes UI bug frequently.
How is this issue going??

@MartinZikmund
Copy link
Member

@ramezgerges can you please check the repro to see what could be the cause?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
difficulty/medium 🤔 Categorizes an issue for which the difficulty level is reachable with a good understanding of WinUI kind/bug Something isn't working platform/android 🤖 Categorizes an issue or PR as relevant to the Android platform project/text 🔤 Categorizes an issue or PR as relevant to text (TextBox, PasswordBox, TextBlock, Fonts, …)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants