Text rendering differs slightly in size between preview4 and preview5

[llfab]

When I ported to preview5 I am seeing a slight difference in text rendering size such that my "just-the-right-size" text wraps to next line. I saw that quite a bit happened in the area of text rendering. Just wanted to bring this up to double check whether that is an expected change.

preview4:

preview5:

[llfab]

If I diff the images and zoom into the lower right you can see that the rendering has changed for "Exit"

[Gillibald]

Text measurements should not be different. Text rendering is slightly different because Avalonia now uses ClearType rendering on Windows if possible. Will investigate.

[llfab]

Yes, it seems that the measure is the same:

However, it may be that the "surounding" pixels may be more and that was just enough to cause the line wrap.

[llfab]

Checked with dev tool. All these text blocks are set to "fonts:Inter#Inter, $Default". I did read that Inter used to part of the package and is not anymore. I also remember that the wrap difference only used to be between preview4 and 5 but not between Windows and Linux.

[Gillibald]

Inter isn't referenced by default. If you don't reference it, the system's default is used and that will be different on different platforms.

[Gillibald]

FontFamily with fallbacks: FontFamily="NotFound, NotFound, Found" last family is picked up

[timunie]

In that case Windows might pull another font than Linux? Maybe you can try to embed a given font or install Inter-Font package (Note: Iirc you have to set .UseInterFont() in Appbuilder)

[llfab]

Yes, indeed. I should have found out myself. Thanks!

[Gillibald]

Could you provide me the actual item template you are using so I can repro the measurement issue?

[llfab]

This is the Xaml with DataTemplates for ViewModel kind of elements:

<Styles xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:bui="BitsOfNature.UI"
        xmlns:i18n="clr-namespace:BitsOfNature.UI.Avalonia.Localization;assembly=BitsOfNature.UI.Avalonia"
        xmlns:uc="using:Stryker.ApplicationManager.Application.UserControls"
        xmlns:vm="using:Stryker.ApplicationManager.Application.ViewModels">
  <Design.PreviewWith>
    <uc:SlideMenuContainer Width="{StaticResource AdminMenuDefaultMenuLevelWidth}" Height="1024"/>
  </Design.PreviewWith>

  <StyleInclude Source="/AssetsEmbedded/Styles/CommonStyles.axaml" />

  <Style Selector="uc|SlideMenuContainer">
    <Style.Resources>
      <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
          <ResourceInclude Source="/GlobalResources.axaml" />
        </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>
    </Style.Resources>
    
    <!-- Set Defaults -->
    <Setter Property="Template">
      <ControlTemplate>
        <Border BorderThickness="{StaticResource AdminMenuControlBorderThickness}" BorderBrush="{StaticResource BackgroundLow}">
          <Border.DataTemplates>
            <DataTemplate DataType="{x:Type uc:StandardMenuEntry}">
              <Border BorderBrush="Transparent" BorderThickness="0">
                <bui:StretchPanel Orientation="Horizontal">
                  <Image bui:StretchPanel.Size="auto" Stretch="Uniform" StretchDirection="Both" 
                         Width="{Binding IconWidth}" Height="{Binding IconHeight}" 
                         Margin="{Binding IconMargin}"
                         Source="{Binding Icon}" VerticalAlignment="Center"/>
                  <TextBlock bui:StretchPanel.Size="*" Foreground="{StaticResource FontColorDefault}" FontSize="{StaticResource FontSizeHigh}" 
                             Text="{Binding Content, Converter={StaticResource I18nOpt}}" VerticalAlignment="Center"
                             Margin="{Binding ContentMargin}"
                             TextWrapping="WrapWithOverflow" LineHeight="{StaticResource AdminMenuLineHeight}" />
                </bui:StretchPanel>
              </Border>
            </DataTemplate>
            <DataTemplate DataType="{x:Type uc:GroupHeaderMenuEntry}">
              <Border BorderBrush="Transparent" BorderThickness="2">
                <bui:StretchPanel Orientation="Horizontal">
                  <TextBlock bui:StretchPanel.Size="*" Foreground="{StaticResource FontColorVeryLow}" FontSize="{StaticResource FontSizeDefault}" FontWeight="Bold" 
                             Text="{Binding Content, Converter={StaticResource I18nOpt}}" VerticalAlignment="Center"
                             Margin="{Binding ContentMargin}"
                             TextWrapping="WrapWithOverflow" />
                </bui:StretchPanel>
              </Border>
            </DataTemplate>
            <DataTemplate DataType="{x:Type uc:GroupItemMenuEntry}">
              <Border BorderBrush="Transparent" BorderThickness="2" Margin="8 0 0 0">
                <bui:StretchPanel Orientation="Horizontal">
                  <TextBlock bui:StretchPanel.Size="*" Foreground="{StaticResource FontColorDefault}" FontSize="{StaticResource FontSizeDefault}" 
                             Text="{Binding Content, Converter={StaticResource I18nOpt}}" VerticalAlignment="Center"
                             Margin="{Binding ContentMargin}"
                             TextWrapping="WrapWithOverflow" />
                </bui:StretchPanel>
              </Border>
            </DataTemplate>
          </Border.DataTemplates>
          <ListBox SelectionMode="Single, Toggle" 
                   Items="{TemplateBinding Items}" 
                   SelectedItem="{Binding SelectedItem, RelativeSource={RelativeSource TemplatedParent}}"
                   ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                   ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.Styles>
              <Style Selector="ListBoxItem">
                <Setter Property="IsEnabled" Value="{Binding IsSelectable}" />
                <Setter Property="Tag" Value="{Binding Type}" />
                <Setter Property="Template">
                  <ControlTemplate>
                    <StackPanel Orientation="Vertical">
                      <ContentPresenter Name="PART_ContentPresenter"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}"
                                        CornerRadius="{TemplateBinding CornerRadius}"
                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                        Content="{TemplateBinding Content}"
                                        Padding="{TemplateBinding Padding}"
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Margin="4 4 4 4"/>
                      <Rectangle Height="2" Fill="#404040" Margin="2 0 2 0" />
                    </StackPanel>
                  </ControlTemplate>
                </Setter>
              </Style>
            </ListBox.Styles>
            <ListBox.Styles>
              <!-- TODO (fh) find better solution -->
              <Style Selector="ListBoxItem[Tag=Standard]">
                <Setter Property="Margin" Value="2,0,2,0" />
              </Style>
            </ListBox.Styles>
            <ListBox.Styles>
              <Style Selector="ListBoxItem[Tag=GroupHeader]">
                <Setter Property="Margin" Value="2,32,2,0" />
              </Style>
            </ListBox.Styles>
            <ListBox.Styles>
              <Style Selector="ListBoxItem[Tag=GroupItem]">
                <Setter Property="Margin" Value="16,0,4,0" />
              </Style>
            </ListBox.Styles>

          </ListBox>
        </Border>
      </ControlTemplate>
    </Setter>
  </Style>
</Styles>

And this is the ViewModel kind of element:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using Avalonia;
using Avalonia.Media;
using BitsOfNature.Core;
using BitsOfNature.UI.Core.Menus;

namespace Stryker.ApplicationManager.Application.UserControls
{
    public enum SlideMenuEntryType
    {
        Standard,
        GroupHeader,
        GroupItem
    }

    public interface ISlideMenuEntryUserContent
    {
        event EventHandler DirtyChanged;

        bool IsDirty { get; }
        SlideMenuEntry Parent { get; set; }

        void OnActivated();
        void OnDeactivated();
    }

    /// <summary>
    ///     Base class for menu entries, as used by <see cref="SlideMenuControl"/>
    /// </summary>
    public abstract class SlideMenuEntry : AvaloniaObject
    {
        #region Private Instance Fields
        /// <summary>
        ///     Gets the entry type
        /// </summary>
        private readonly SlideMenuEntryType _type;

        /// <summary>
        ///     The ID of the entry, as it appears in its <see cref="MenuPath"/>
        /// </summary>
        private readonly string _id;

        /// <summary>
        ///     The collection of child entries
        /// </summary>
        private readonly ObservableCollection<SlideMenuEntry> _children;

        /// <summary>
        ///     The user content associated with the node
        /// </summary>
        private object _userContent;
        #endregion

        #region Properties
        /// <summary>
        ///     Gets the entry type
        /// </summary>
        public SlideMenuEntryType Type => _type;

        /// <summary>
        ///     Gets the ID of the entry, corresponding to this entry's part in <see cref="Path"/>
        /// </summary>
        public string Id => _id;

        /// <summary>
        ///     Gets the full menu path of the item, starting at the root
        /// </summary>
        public MenuPath Path => Parent?.Path?.Append(Id) ?? new MenuPath(Id);

        /// <summary>
        ///     Gets the parent menu entry
        /// </summary>
        public SlideMenuEntry Parent { get; private set; }

        /// <summary>
        ///     Gets the level of the menu item, i.e. the number of parent nodes above it
        /// </summary>
        public int Level => (Parent?.Level ?? -1) + 1;

        /// <summary>
        ///     Gets whether this is a leaf node (i.e. it has no children)
        /// </summary>
        public bool IsLeaf => _children.Count == 0;

        /// <summary>
        ///     Gets the list of child entries, clients may modify this list to add or remove entries
        /// </summary>
        public IEnumerable<SlideMenuEntry> Children => _children;

        /// <summary>
        ///     Gets or sets the content of the menu item
        /// </summary>
        public object Content { get; set; }

        /// <summary>
        ///     Gets or sets the content margin of the menu item
        /// </summary>
        public Thickness ContentMargin { get; set; }

        /// <summary>
        ///     Gets or sets the menu icon
        /// </summary>
        public IImage Icon { get; set; }

        /// <summary>
        ///     Gets or sets the icon margin of the menu item
        /// </summary>
        public Thickness IconMargin { get; set; }

        /// <summary>
        ///     Gets or sets the scale factor menu icon
        /// </summary>
        public double IconScaleFactor { get; set; }

        /// <summary>
        ///     Gets the desired icon width based on the <see cref="IconScaleFactor"/>
        /// </summary>
        public double IconWidth
        {
            get
            {
                if (IconScaleFactor <= 0.0)
                {
                    return Icon == null ? 0.0 : Icon.Size.Width;
                }
                else
                {
                    return Icon == null ? 0.0 : IconScaleFactor * Icon.Size.Width;
                }
            }
        }

        /// <summary>
        ///     Gets the desired icon height based on the <see cref="IconScaleFactor"/>
        /// </summary>
        public double IconHeight
        {
            get
            {
                if (IconScaleFactor <= 0.0)
                {
                    return Icon == null ? 0.0 : Icon.Size.Height;
                }
                else
                {
                    return Icon == null ? 0.0 : IconScaleFactor * Icon.Size.Height;
                }
            }
        }

        /// <summary>
        ///     Gets or sets the user content that should be displayed when the entry is selected. Should only
        ///     be set on leaf nodes
        /// </summary>
        public object UserContent 
        {
            get => _userContent;
            set
            {
                if (_userContent is ISlideMenuEntryUserContent oldUserContent)
                {
                    oldUserContent.Parent = null;
                    oldUserContent.DirtyChanged -= OnUserContentDirtyChanged;
                }

                _userContent = value;

                if (_userContent is ISlideMenuEntryUserContent newUserContent)
                {
                    newUserContent.Parent = this;
                    newUserContent.DirtyChanged += OnUserContentDirtyChanged;
                }
            }
        }

        /// <summary>
        ///     Gets or sets the width of the submenu laying out the child items. Set to <c>null</c> to use the default width.
        /// </summary>
        public double? LevelWidth { get; init; }

        private bool _isSelectable;
        public bool IsSelectable
        {
            get => (Type != SlideMenuEntryType.GroupHeader) && _isSelectable;
            set
            {
                _isSelectable = value;
            }
        }

        public static readonly DirectProperty<SlideMenuEntry, bool> IsSelectedProperty =
            AvaloniaProperty.RegisterDirect<SlideMenuEntry, bool>(nameof(IsSelected), c => c.IsSelected, (c, v) => c.IsSelected = v);

        private bool _isSelected;
        public bool IsSelected
        {
            get => _isSelected;
            set { SetAndRaise(IsSelectedProperty, ref _isSelected, value); }
        }

        public static readonly DirectProperty<SlideMenuEntry, bool> IsDirtyProperty =
            AvaloniaProperty.RegisterDirect<SlideMenuEntry, bool>(nameof(IsDirty), c => c.IsDirty, (c, v) => c.IsDirty = v);

        private bool _isDirty;
        public bool IsDirty
        {
            get => _isDirty;
            set { SetAndRaise(IsDirtyProperty, ref _isDirty, value); }
        }

        #endregion

        #region Construction
        /// <summary>
        ///     Constructor
        /// </summary>
        /// <param name="id">
        ///     The node ID
        /// </param>
        /// <param name="type">
        ///     The node type
        /// </param>
        protected SlideMenuEntry(string id, SlideMenuEntryType type)
        {
            _id = id;
            _type = type;
            _isSelectable = true;
            _children = new ObservableCollection<SlideMenuEntry>();

            IconScaleFactor = 0.0;
        }
        #endregion

        #region Public Methods
        /// <summary>
        ///     Gets the child entry reachable under the specified relative path, or <c>null</c> if no such
        ///     child exists
        /// </summary>
        /// <param name="relativePath">
        ///     The relative path
        /// </param>
        /// <returns>
        ///     The referenced entry, or <c>null</c> if no such entry exists
        /// </returns>
        public SlideMenuEntry GetDescendant(MenuPath relativePath)
        {
            if (relativePath.Length == 0) { return this; }

            return _children.
                SingleOrDefault(c => c.Id == relativePath.Root)?.
                GetDescendant(relativePath.Tail);
        }

        /// <summary>
        ///     Gets the immediate child with the given ID
        /// </summary>
        /// <param name="id">
        ///     The child ID
        /// </param>
        /// <returns>
        ///     The child entry, or <c>null</c> if no such entry exists
        /// </returns>
        public SlideMenuEntry GetChild(string id) => _children.SingleOrDefault(c => c.Id == id);
        #endregion

        #region Private Helpers
        private void OnUserContentDirtyChanged(object sender, EventArgs e)
        {
            UpdateDirtyState();
        }

        public void UpdateDirtyState()
        {
            bool dirty = false;

            if (IsLeaf)
            {
                if (_userContent is ISlideMenuEntryUserContent userContent)
                {
                    dirty = userContent.IsDirty;
                }
                else
                {
                    dirty = false;
                }
            }
            else
            {
                dirty = _children.ToList().Exists(x => x.IsDirty);
            }

            IsDirty = dirty;
        }

        public void AddEntry(SlideMenuEntry entry)
        {
            Assert.That(entry.Parent == null, "Illegal state!");
            entry.Parent = this;
            _children.Add(entry);
        }

        public void InsertEntry(int index, SlideMenuEntry entry)
        {
            Assert.That(entry.Parent == null, "Illegal state!");
            entry.Parent = this;
            _children.Insert(index, entry);
        }

        public void RemoveEntry(SlideMenuEntry entry)
        {
            Assert.NotNull(entry.Parent, "Illegal state!");
            _children.Remove(entry);
            entry.Parent = null;
        }

        public void RemoveAllEntries()
        {
            foreach (SlideMenuEntry entry in _children)
            {
                entry.Parent = null;
            }
            _children.Clear();
        }
        #endregion
    }

    // TODO: subclasses do not add anything... is it necessary to have subclasses _and_ enum?
    public class StandardMenuEntry : SlideMenuEntry
    {
        public StandardMenuEntry(string id) : base(id, SlideMenuEntryType.Standard)
        { }
    }

    public class GroupHeaderMenuEntry : SlideMenuEntry
    {
        public GroupHeaderMenuEntry(string id) : base(id, SlideMenuEntryType.GroupHeader)
        { }
    }

    public class GroupItemMenuEntry : SlideMenuEntry
    {
        public GroupItemMenuEntry(string id) : base(id, SlideMenuEntryType.GroupItem)
        { }
    }
}

There are some dependencies to our BitsOfNature framework that I cannot share. However, I hope that still helps you a bit. I would also be able to do further testing of that helps.

[llfab]

the one that wrapped from prev4 to prev5 is the <DataTemplate DataType="{x:Type uc:StandardMenuEntry}">