MathView and TextView width and height calculation does not work with non-100% DPI on Windows

[MartinZikmund]

Describe the bug

When display has non-100 % DPI, the height of TextView is calculated as significantly bigger than expected on Windows.

To Reproduce

1. Create a StackLayout with two TextView controls, both with the following content:

\textit{Napětí by se dalo téměř krájet. 
Skupina rytířů vkládá do velkého koše poslední zátěž a přesouvá se 
ke šlapacímu kolu. 
Na povel se začnou pomalu pohybovat a stroj se zachvěje. 
Rameno trebuchetu se jen neochotně sklání k zemi.}

\\

Opatrně ho zajistí mohutnou pojistkou.

\\

Několik mužů umístí těžký kámen do koženého vaku.

\\

Všichni ustoupí do bezpečné vzdálenosti od mohutné dřevěné konstrukce.

\\

Trhnutí lanem a kámen letí vstříc nepřátelské pevnosti.

\\

Desítky očí se nemohou odtrhnout od projektilu.

\\

Doletí?

\\

Pokud se těleso bude pohybovat v blízkosti Země (nebo jakékoliv jiné planety), bude na něj působit tíhová síla. Abychom si celou situaci zjednodušili, tak budeme předpokládat, že těleso se pohybuje v těsné blízkosti povrchu Země a jeho trajektorie bude velmi malá (oboje vzhledem k rozměrům Země).

2. Set display scaling in Windows Settings to something higher than 100% (I have 150%).
   3.Observe the result has significant space between the texts.

Example from my app:

But on 100% scaling display:

Expected behavior

The height should be calculated appropriately regardless of display scaling.

Environment (please complete the following information):

• Platform: CSharpMath.SkiaSharp
• Package Version or Commit: latest
• Device: Windows 10 PC

[Happypig375]

Also note that diacritics are not italicized properly. We need a way to convert ě to \v e and ů to \r u automatically because

[Happypig375]

I have no idea what went wrong. Smells like a Xamarin.Forms bug...

[Happypig375]

Should be a Xamarin.Forms bug.

[Happypig375]

Hmmm. The spacing increases with the height of the content.

[FoggyFinder]

Should be a Xamarin.Forms bug.

Does it persist across different XF versions?

[Happypig375]

Still investigating. I might be wrong on this being a Xamarin.Forms problem.

[MartinZikmund]

@Happypig375 actually I discovered the spacing bug in my UWP version, so it is probably something in Painter.Measure 🤔

[charlesroddie]

In our Xamarin Forms app we have a function which is supposed to retrieve the pixels per XF view unit. It is defined in each platform project:

// Android
Resources.System.DisplayMetrics.ScaledDensity
// iOS
UIScreen.MainScreen.Scale
// UWP
Windows.Graphics.Display.DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel
// Mac
NSScreen.MainScreen.BackingScaleFactor

This is then used in places (Skiasharp and CSharpMath.Skiasharp) that work with raw pixels.

I wonder if there is a better approach to this.

[Happypig375]

Xamarin.Essentials.DeviceDisplay.MainDisplayInfo.Density?

[Happypig375]

My theory is that on higher scales, a larger view box is allocated, but the scale is not taken into account, thus appearing to be smaller. With a fixed width/height, this leads to the view appearing to be scaled down, leading to #137.

[prepare]

Hello,

I'm not sure but I think this may related about this issue.

How DPI effects the final pixels size calculation ?

"other than 96 dpi"

on Windows,

The Typography uses default DPI value on => 96 dpi, and PointsPerInch= 72
to calculate the scale_to_pixel value from CalculateScaleToPixel() and CalculateScaleToPixelFromPointSize() .

---

  const int s_pointsPerInch = 72;//point per inch, fix?        

        /// <summary>
        /// default dpi
        /// </summary>
        public static uint DefaultDpi { get; set; } = 96;

        /// <summary>
        /// convert from point-unit value to pixel value
        /// </summary>
        /// <param name="targetPointSize"></param>
        /// <param name="resolution">dpi</param>
        /// <returns></returns>
        public static float ConvPointsToPixels(float targetPointSize, int resolution = -1)
        {
            //http://stackoverflow.com/questions/139655/convert-pixels-to-points
            //points = pixels * 72 / 96
            //------------------------------------------------
            //pixels = targetPointSize * 96 /72
            //pixels = targetPointSize * resolution / pointPerInch

            if (resolution < 0)
            {
                //use current DefaultDPI
                resolution = (int)DefaultDpi;
            }

            return targetPointSize * resolution / s_pointsPerInch;
        }
        /// <summary>
        /// calculate scale to target pixel size based on current typeface's UnitsPerEm
        /// </summary>
        /// <param name="targetPixelSize">target font size in point unit</param>
        /// <returns></returns>
        public float CalculateScaleToPixel(float targetPixelSize)
        {
            //1. return targetPixelSize / UnitsPerEm
            return targetPixelSize / this.UnitsPerEm;
        }
        /// <summary>
        ///  calculate scale to target pixel size based on current typeface's UnitsPerEm
        /// </summary>
        /// <param name="targetPointSize">target font size in point unit</param>
        /// <param name="resolution">dpi</param>
        /// <returns></returns>
        public float CalculateScaleToPixelFromPointSize(float targetPointSize, int resolution = -1)
        {
            //1. var sizeInPixels = ConvPointsToPixels(sizeInPointUnit);
            //2. return sizeInPixels / UnitsPerEm

            if (resolution < 0)
            {
                //use current DefaultDPI
                resolution = (int)DefaultDpi;
            }
            return (targetPointSize * resolution / s_pointsPerInch) / this.UnitsPerEm;
        }

_from https://github.com/LayoutFarm/Typography/blob/master/Typography.OpenFont/Typeface.cs#L297

---

For DPI-aware app=> The DPI value should be changed to match current DPI value of your system.

(an incorrect value may lead to incorrect scale => incorrect heights... etc).

pic 1: DPI-aware WinForm on Win10, set DPI=120, Sarabun font, 20pt, [a] Rendered with PixelFarm no Hint, [b] Windows Notepad, [c] Rendered with PixelFarm + vertical only TrueType hint

[Happypig375]

I have noticed the settable resolution in Typography too but I haven't got around to experiment with it.

[prepare]

I updated method CalculateScaleToPixel() and CalculateScaleToPixelFromPointSize() .
by changing default value of resolution to -1.

see => LayoutFarm/Typography@69f741e

[Happypig375]

A problem would be how to get the DPI in a cross-platform way. Is Density DPI?

[MartinZikmund]

A problem would be how to get the DPI in a cross-platform way. Is Density DPI?

There is a cross platform implementation of display properties in Uno Platform (DisplayInformation class) and Xamarin.Essentials.

[Happypig375]

What happens when the view crosses display boundaries?

[Happypig375]

Also, MathViews have the same problem.

[Happypig375]

This bug does not occur in CSharpMath.Avalonia.

[Happypig375]

I'll try to take a Xamarin.Essentials in CSharpMath.Forms and use the density.

[Happypig375]

Using BackgroundColor as a reference, this bug affects width too.

[Happypig375]

Should be fixed in latest commit. Try the nightly packages!

[MartinZikmund]

Tested on latest master and works great too :-) . Thanks!