On 24 Jul 2018, at 11:30, Aliaksei Syrel <alex.syrel@gmail.com> wrote:

Hi Peter,

Thanks for the question and motivation to do a text rendering quality comparison.

I think you forgot that Pharo does not support "retina" or "hi-dpi" displays. Imagine you have a laptop screen with the resolution of (3840x2160). Pixels are so small, that UI gets almost unreadable. Therefore OS has to scale the whole interface with for example scale factor 2 (can be changed in settings). Interesting is that now programs think the resolution is 1920x1080. Pharo thinks same too, so it renders the whole UI in 1080p and then it gets upscaled to 4K which results in the blurry interface.

Programs have to support "hi-dpi" screens explicitly. Bloc for example, when opened in SDL2 native window supports retina screens and delivers very beautiful graphics. The process is quite simple: SDL2 windows provide two types of extent: • window extent - scaled window size in dp (in our example it would be 1080p) • canvas extent - real canvas size in px (in our example it would be 4K) we can get scale factor by dividing canvas extent / window extent. Next we create a Bloc canvas of size equal to window canvas extent (4K) provided by SDL2 and scale the whole graphic scene by previously computed scale factor 2 while actually rendering everything in window extent coordinates (1080p). It can be easily done since Bloc is vector graphics. I would like to emphasise that everything in bloc is based on dp and not px.

1dp = 1px * scaling factor.

Coming back to the text rendering issue :) The correct experiment would be to take a non-retina monitor and do the comparison, then take a retina monitor and repeat the same comparison process making sure that all tested programs have support of retina screens. This way we compare Bloc with web browsers in the same environment.

Below are the results:

(non-retina) <Text Rendering Non-Retina.png>

(retina) <Text Rendering Retina.png>

When zoomed-in (download pictures, they are .png) we can see that the text rendering quality in Bloc is as good as in other modern web-browsers. Indeed, there are very minor differences between all of them, but perceived quality is on the same level, especially in "retina" case.

Looks really impressive!

P.S. Compared on OSX with Arial font.

Cheers, Alex

On 24 July 2018 at 10:09, Ben Coman <btc@openinworld.com> wrote:

On 24 July 2018 at 15:07, Peter Uhnák <i.uhnak@gmail.com> wrote: Hi,

I'm trying to understand how exactly Pharo renders fonts and aliases them.

I want to use Segoe UI (which is the default Windows 10 font for UI), however when rendered in Pharo it is blurry, and for size 9 and light hinting it actually produces incorrect size.

Here is a comparsion (100%)

<image.png> and 300%

<image.png>

You can see how blurry and bold the fonts are compared to MS word/Chrome/Firefox. Even Bloc should use the same rendering engine as Firefox, but seems to suffer from the same^1. (Note that fonts size 7 and 8 is ok... the font starts at size 8.)

I've tried digging through the settings and FreeTypeSettings methods, but couldn't find anything that would help me fix this.

Any pointers appreciated.

Thanks, Peter

^1 Note for Bloc: I couldn't figure out how to specify the font size in points instead of pixels, so maybe that's why it is much more compact horizontally.

Could you clarify... are "light" "normal" "full" and "none" done through Morphic without Bloc ?

Are you on a high-dpi screen? I'm not very familiar with this, but you could try experimenting... http://windows10_dpi_blurry_fix.xpexplorer.com/ https://www.howtogeek.com/175664/how-to-make-the-windows-desktop-work-well-o...

cheers -ben