Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Poor quality colored emojis, how to fix that?



  • 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:

    638e65c1-3189-4a4e-8b45-6ac0f70ed016-image.png

    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?



  • font.hintingPreference: Font.PreferNoHinting
    


  • 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:
    font_test.png



  • 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?



  • 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.



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



  • @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.



  • font.hintingPreference: Font.PreferNoHinting
    


  • @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