Poor quality colored emojis, how to fix that?

jeanmilost

I'm using Qt Quick to create an application which shows messages. Some of them contain emojis, and this is an important feature the application should support. These emojis must be colored, drawing them in black&white isn't enough.

I can use the colored emojis in my text without problems, by using the "Segoe UI Emoji" font family. However they appear jagged, their rendering quality is very poor, and unfortunately this isn't acceptable for my clients. This way I cannot distribute my application.

However, I tried all the possible options I know to increase the drawing quality, none of them have improved anything.

Here is a sample of the code I use in my qml files:

Text
{
    id: itemTextID
    width: parent.width - 20
    text: "I don't know 🙂😉 I forgot!"
    renderType: Text.NativeRendering
    textFormat: TextEdit.RichText
    wrapMode: Text.WordWrap
    font.family: "Segoe UI Emoji"
    font.pixelSize: 18
    anchors.margins: 10
    anchors.left: parent.left
    anchors.top: parent.top
    color: "#101010"
}

Below is a screenshot of the rendering I get, and what I expect:

The black&white version seem to not present this issue. I also tried to change the OpenGL configuration (all I known), but no way.

So is there a way to improve the colored emojis rendering quality? If yes, what should I do to achieve that?

fcarney

font.hintingPreference: Font.PreferNoHinting

fcarney

What platform are you on? It looks fine on Linux. Maybe I am not get the same font set?

Edit:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: window

    visible: true
    width: 640
    height: 480
    title: qsTr("Font Testing 😀")

    Column {
        spacing: 5
        Text {
            width: 10
            text: window.title
            font.family: "Segoe UI Emoji"
            font.pointSize: 20
            //font.pixelSize: 36 // no effect

            //renderType: Text.NativeRendering // no effect
        }
        Text {
            id: itemTextID
            //width: 20 //parent.width - 20
            text: "I don't know 🙂😉 I forgot!"
            renderType: Text.NativeRendering
            textFormat: TextEdit.RichText
            wrapMode: Text.WordWrap
            font.family: "Segoe UI Emoji"
            font.pixelSize: 36 //18
            //anchors.margins: 10
            //anchors.left: parent.left
            //anchors.top: parent.top
            color: "#101010"
        }
    }
}

Output:

jeanmilost

Ah well seen, I forgot to specify it. I'm on Windows 10 Pro, version 1909.

My feeling is that the issue may come from a bad Direct2D configuration in the Qt code (I already got so bad quality while I tried to draw texts directly with Direct2D in the past, before tweaking the rendering options). However I still not found a way to improve that in my Qt Quick application, as I said above, even after tweaking the Qt rendering options (at least those I known) so any help would be welcome.

Or should I consider that it's a bug and report it to Qt?

fcarney

What happens if you put this in main?:

QCoreApplication::setAttribute(Qt::AA_UseDesktopOpenGL);

I have this before we instance QApplication for a project we run in Windows.

fcarney

Nevermind, it didn't help. I tested same project in windows and it looks bad there.

jeanmilost

@fcarney said in Poor quality colored emojis, how to fix that?:

What happens if you put this in main?:
QCoreApplication::setAttribute(Qt::AA_UseDesktopOpenGL);

I confirm, this changed nothing on my side too, unfortunately.

fcarney

font.hintingPreference: Font.PreferNoHinting

jeanmilost

@fcarney said in Poor quality colored emojis, how to fix that?:

font.hintingPreference: Font.PreferNoHinting

Wow excellent! This resolved my issue. Thank you very much