search

xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.62k stars 1.87k forks source link

Font aliasing and color aren't displayed correctly in MacOS without a retina display #2204

Closed vcx closed 5 years ago

vcx commented 6 years ago

Description

Font aliasing and color aren't displayed correctly in MacOS without a retina display. They both work well in native code.

Steps to Reproduce

  1. Download the attachment, compile and run on a Mac computer without retina display (or in an older monitor attached to it)

Expected Behavior

Basic Information

Screenshots

See attachments color-issue and font-issue.

Issue details

We are applying RGB colors in Xamarin.Forms, and it works perfectly on UWP, but rather strange on Mac. In fact, the colors on Mac seem lighter than expected. In the picture, last window is the Xamarin.Forms.

Is this an expected behavior? Should we start adjusting Hue, Sat and Luminosity altogether? Here are the sample codes for both Xamarin.Forms and native applications:

Xamarin.Forms

    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <StackLayout x:Name="teste" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#32d2c8">
            …
        </StackLayout>
    </StackLayout>

Native

                        <subviews>
                            <box >
                                <rect key="frame" x="0.0" y="0.0" width="480" height="270"/>
                                <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                …
                                <color key="fillColor" red="0.1960784314" green="0.82352941180000006" blue="0.7843137255" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                            </box>

On the font issue, we are using custom fonts for our application, and we noticed that whenever we use them with a small font size (say 11), they appear to be pixelated and, sometimes, we can barely read it. To demonstrate it, we downloaded one of our fonts (Segore WP Light) and one provided by Apple (SF Pro Display), putting them site-by-side on both Xamarin.Forms and native applications. The result was clear: on the native application, the fonts are rendered perfectly, whereas in Xamarin.Forms they get pixelated (Apple’s font is better rendered, but still presents some cracks and pixels).

However, if we increase the font size (say 14), the problem goes away. Moreover, if we use the Mac system native fonts the problem is not presented. So the question is: should we have an additional care for fonts alien to the Mac OS system? Could we solve this somehow in Xamarin.Forms?

Sample code snippet:

Xamarin.Forms

            <Label FontSize="11" Text="Welcome to Xamarin Forms!" FontFamily="Segoe WP Light" VerticalOptions="Center" HorizontalOptions="Center" TextColor="White" />
            <Label FontSize="11" Text="Welcome to Xamarin Forms!" FontFamily="SF Pro Display" VerticalOptions="Center" HorizontalOptions="Center" TextColor="White" />

Native

                                        <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="sdr-ex-IXh">
                                            <rect key="frame" x="165" y="235" width="149" height="22"/>
                                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                            <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" alignment="center" title="Welcome to Xamarin Forms!" id="myO-YS-RLq">
                                                <font key="font" size="11" name="SegoeWP-Light"/>
                                                <color key="textColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                                                <color key="backgroundColor" white="1" alpha="0.0" colorSpace="deviceWhite"/>
                                            </textFieldCell>
                                        </textField>
                                        <textField horizontalHuggingPriority="251" verticalHuggingPriority="750" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="3ew-qC-fwm">
                                            <rect key="frame" x="170" y="211" width="139" height="22"/>
                                            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                                            <textFieldCell key="cell" scrollable="YES" lineBreakMode="clipping" sendsActionOnEndEditing="YES" alignment="center" title="Welcome to Xamarin Forms!" id="f6e-Eh-Wvu">
                                                <font key="font" size="11" name="SFProDisplay-Regular"/>
                                                <color key="textColor" name="controlBackgroundColor" catalog="System" colorSpace="catalog"/>
                                                <color key="backgroundColor" white="1" alpha="0.0" colorSpace="deviceWhite"/>
                                            </textFieldCell>
                                        </textField>

I've grouped in a single issue because, after doing some investigation in code and past issues, I believe they're related, but let me know if you prefer to split in two.

X POCFonts.zip font-issue color-issue

PureWeen commented 6 years ago

The font parts of this looks to be resolved in the latest code base. I tested the Xamarin Forms sample using SF Pro Display against master and the font looks good. I then tested against 3.0.0.296286-pre2 and the font no longer looked good. Once the next pre comes out can you test against that and then update this ticket to see if that resolves your issue?

As far as the background I couldn't quite get that to work where I saw a different background. Can you attach the native macOS project you are using just so I can make sure I'm comparing to the correct expectation?

Overall I'm thinking this is resolved on the master branch though :-)

vcx commented 6 years ago

I just tested on a Mac pointing to nightly 3.1.0.351576-nightly. No changes... color issue was solved, fonts still buggy.

Is there any chance to get this fixed on 2.5.x somehow? My customer can't upgrade to nightly, as it causes other bugs in their app.

vcx commented 6 years ago

Just in case, which commit did you use in your test that made fonts work correctly? I'd like to do other tests here.

jassmith commented 6 years ago

Moving back over to ready for work and assigning MacOS backend expert :)

jassmith commented 6 years ago

As for if this will make it to 2.5.x, nope.

vcx commented 6 years ago

@jassmith, @PureWeen: do you know exactly in which commit the font issue was solved? One of the devs in the team here tested on top of latest commit in master today, no luck.

Also, by just reading the description, I'm not sure our case is the same of #2159. Our is more related to font aliasing, not weight... and it's not random.

samhouts commented 5 years ago

@rmarinho Please also identify what commit may have resolved the color issue so we can confirm that was done. Thanks!

rmarinho commented 5 years ago

Hey the solved the color issue was in commit https://github.com/xamarin/Xamarin.Forms/commit/b8de5564bf05f9086a0d7bc8c33bcce9b38803e4 you can find it on version 3.0.0 and above.

I have now a setup (non retina mac) i m debugging the issue, will update as soon as as i have a good answer.

rmarinho commented 5 years ago

Do you mind for now to test 3.5.0 stable and also turn off font smoothing on the Mac your are trying. It seems that works for me...

screen shot 2019-03-04 at 01 07 05 screen shot 2019-03-04 at 01 06 03

rmarinho commented 5 years ago

After more investigation i was able to found this on Apple's documentation

Using screen fonts (for font sizes 16 pt and smaller) optimizes text layout for a standard-resolution display. For screen font, text is laid out using integral glyph advancements. Because the higher pixel density on a high-resolution display allows for floating-point glyph advancements even at small font sizes, screen font is no longer required. Floating-point advancements result in more precise layout, as shown in Figure 1-4, and allows for kerning and ligatures for smaller font sizes. If your app is document-based and supports text editing and layout, you should familiarize yourself with the default text settings. See Adjust Font Settings to Ensure Document Compatibility.

This made me test returing a ScreenFont with different RenderingModes and test the results with several options on Retina and Non Retina with LCD font Smoothing on and off

With LCD font smoothing ON with NON retina Mac

NSFontRenderingMode.Default BAD screen shot 2019-03-04 at 14 59 53

NSFontRenderingMode.Antialiased STILL BAD screen shot 2019-03-04 at 15 01 09

NSFontRenderingMode.IntegerAdvancements BETTER screen shot 2019-03-04 at 15 03 08

NSFontRenderingMode.AntialiasedIntegerAdvancements GOOD screen shot 2019-03-04 at 15 06 35

rmarinho commented 5 years ago

With LCD font smoothing OFF with NON retina Mac

NSFontRenderingMode.Default GOOD screen shot 2019-03-04 at 15 15 43

NSFontRenderingMode.Antialiased GOOD screen shot 2019-03-04 at 15 11 18

NSFontRenderingMode.IntegerAdvancements BAD screen shot 2019-03-04 at 15 09 48

NSFontRenderingMode.AntialiasedIntegerAdvancements GOOD screen shot 2019-03-04 at 15 08 00

rmarinho commented 5 years ago

@vcx hey, do you mind test this package and see if it works for you ? debug.zip