Text is very bad without qt backend

[cppdev123]

Without using qt any text shown in the program doesn't look like texts in other applications. It seems to consist of dots instead of lines maybe antialiasing not enabled ? or there is an option that correct this ? Also the check box has some dots above the right mark which becomes visible when the box the checked or is hovered

[cppdev123]

regarding the check box I was using an old version of slint but please don't show a right mark when hovering the check box this confuses the user and makes them think it is already checked !

[ogoffart]

Thanks for the bug report. What platform are you using? Could you please post a screenshot.

[ogoffart]

Actually, for the read-only property, i wonder if the widget should then be able to get focus when it is read-only, and if yes, should the blinking cursor should be visible or hidden?

[cppdev123]

For the read only property check here: https://github.com/slint-ui/slint/pull/1321

The problem with text is that it is not sharp like the rest of texts I think it needs some type of anti aliasing

[tronical]

The GL backend renders text through femtovg, which does deploy anti-aliasing when rendering the glyph outlines. It's possible that there is a bug somewhere that causes this to either not work or affect quality negatively. In order to determine what the cause of the bug might be, it would be really helpful to know what operating system you're using, what your screen resolution is and what font-size you're specifying (if you do specify one).

And as Olivier said, a screenshot would be very helpful, too!

Thanks :)

[cppdev123]

I tried on windows 10 and on the online playground to show the difference I made slint code on the playground and html code to display a text and change its size with a slider the slint text was very not smooth especially for small size font. The font in html is not the better one also but it is still better than slint and if I try to build a test qt application on windows I get a very good text like MS Word !

slint code:

import { Slider, VerticalBox, LineEdit, SpinBox } from "std-widgets.slint";
export Demo := Window {
    VerticalBox {
        Text {
            text: "some text";
            font-size: s.value * 1px;
        }
        s := Slider {
            minimum: 10;
            maximum: 100;
        }
        SpinBox {
            value: s.value;
            maximum: 100;
            enabled: false;
        }
    }
}

html code:

<script>
  function onSliderChange(sliderVal) {
    var name = document.getElementById("name");
 name.style.fontSize = sliderVal + "px";
 document.getElementById("spin").value = sliderVal;
  }
</script>

<div class="container">

  <h1 id="name" color="#000000">some text</h1>

   <input class="none" type="range" min="10" max="100" value="10" id="slider" step="1" onchange="onSliderChange(this.value)">

 </div>

<input type="number" id="spin" min=10 max=100>

[tronical]

Thanks for the quick response :)

For comparison, this is how it looks like for me in the online editor. I think that's quite decent:

https://user-images.githubusercontent.com/1486/172408351-340eb608-057d-4813-8179-9c5f2fe6252b.mov

Could you show a screenshot of how it looks like on your machine?

Are you running Windows 10 inside a virtual machine or is this running directly? Do you happen to know what kind of graphics drivers you're using?

Also, how do the other Slint demos look? Do they all look bad?

[cppdev123]

Yours like very good unlike on my system. I'll post a video

[cppdev123]

It looks bad when it is small ( < 30 or so ) I think it's a from the font since qml also seems to have the same issue. I tried changing font-family but it has no effect I tried: "Times New Roman" and "Calibri" but it doesn't change the font is selecting font supported ?

[cppdev123]

https://user-images.githubusercontent.com/66138068/172488828-f7285325-a1c9-4d65-a74f-d4fee5abf8f5.mp4

[tronical]

The default font on Windows will be Arial. Selecting the font family is supposed to work though (not in the online editor though).

[tronical]

Duplicate of #3742