Differences in font alignment

Hi guys, i’m experiencing a difference in the fonts between the preview and the iOS simulator (i’ve highlighted the component):

Preview (looks ok to me):

file

iOS (the text is aligned to the top of its container):

file

here’s the code, nothing unusual:

<Font File="../Assets/fonts/Neo Sans Pro Medium.ttf" ux:Global="NeoSansProMedium"/>
<Text Font="NeoSansProMedium" FontSize="30" Color="#fff" ux:Class="MenuText" />
<MenuText Value="Matches" Alignment="TopRight" Margin="0,15,20,0" ux:Name="txtMatches"/>

i’m using Fuse 0.22.0 6996

iOS 9.3.2

OSX

Text is not expected to be identical in local preview and on-device (they currently use different text renderers). However, this seems to go beyond that since the actual alignment changes, so something is probably wrong.

  • Have you tried this with the latest version of fuse to see if the behaviour changes?
  • Your MenuText does specify a top-alignment (TopRight), but you say you expect the preview-behaviour (vertical center) is what you expect?
  • Can you please provide enough to UX to accurately reproduce the issue you have? (The current snippet doesn’t match the screenshots, increasing the chance of misunderstandings when investigating.) Try to keep it as short as possible though. :slight_smile:

Hi Remi, thanks for your answer.

Fuse 0.23 has the same result.

My MenuText does indeed specify a TopRight alignment, but that isn’t supposed to align the whole element relative to its parent? Anyway, i have others Texts with different alignments, and all of them have the same problem on iOS, text is top aligned.

is worth to mention in the images i highlighted the Text component, not his parent, so that frame represents the space the Text component uses.

This is a more complete example, but as i said, i have plenty of others Texts with different alignments and parents, all with the same problem:

<StackPanel Alignment="BottomRight" ItemSpacing="0" Margin="0,0,0,20">
    <Panel>
        <MenuText Value="Tutorial" Alignment="TopRight" Margin="0,15,20,0"/>
        <Clicked>
            ...
        </Clicked>
    </Panel>
</StackPanel>

Hi!

I was able to reproduce your issue, however this looks like an issue with the font. I tested several different fonts and Neo Sans Pro medium was the only one to align to the top. We use the native iOS textrenderer, leading me to believe that this is a bug in iOS or the font itself has issues.