Correct use of QFontMetrics.leftBearing for drawing Hindi characters using QRawFont

SGaist

Hi,

Can you provide a minimal compilable example that reproduces that ?

Can you check whether it's still the case with Qt 6 ?

TheCrowKaka

@SGaist I have modified the wigglywidget example of Qt. So i am giving here the sources of the two files which i have modified.. not giving the other file sources.
WigglyWidget.h file

#ifndef WIGGLYWIDGET_H
#define WIGGLYWIDGET_H

#include <QBasicTimer>
#include <QRawFont>
#include <QPainterPath>
#include <QWidget>

//! [0]
class WigglyWidget : public QWidget
{
    Q_OBJECT

public:
    WigglyWidget(QWidget *parent = nullptr);

public slots:
    void setText(const QString &newText) { text = newText; update();}

protected:
    void paintEvent(QPaintEvent *event) override;
    void timerEvent(QTimerEvent *event) override;

private:
    QBasicTimer timer;
    QString text;
    int step;
};
//! [0]

#endif

WigglyWidget.cpp file


#include "wigglywidget.h"

#include <QFontMetrics>
#include <QPainter>
#include <QTimerEvent>

//! [0]
WigglyWidget::WigglyWidget(QWidget *parent)
    : QWidget(parent), step(0)
{
    setBackgroundRole(QPalette::Midlight);
    setAutoFillBackground(true);
//    setFont(QFont("Devanagari Sangam MN");
    QFont newFont("Devanagari Sangam MN");// = font();
    newFont.setPointSize(newFont.pointSize() + 20);
    setFont(newFont);

//    timer.start(60, this);
}
//! [0]

//! [1]
void WigglyWidget::paintEvent(QPaintEvent * /* event */)
//! [1] //! [2]
{
    quint32 mychar[3];
    int numgly;
    QRawFont *myFont = new QRawFont;
    *myFont = QRawFont::fromFont(font());
    QFontMetricsF myfontmetrics(font());

    for(int i=0;i<text.length();i++)
    {
        QChar mytempchar = text.at(i);
        bool myres=false;
        while(!myres)
            myres = myFont->glyphIndexesForChars(&mytempchar,1,mychar,&numgly); // get the glyph index
        QPainterPath charpath = myFont->pathForGlyph(mychar[0]);    // get the glyph path for character.
        qreal widt = (myfontmetrics.horizontalAdvance(mytempchar)+(myfontmetrics.leftBearing(mytempchar)>0?0:myfontmetrics.leftBearing(mytempchar))
                +(myfontmetrics.rightBearing(mytempchar)>0?0:myfontmetrics.rightBearing(mytempchar)));

    }

    static constexpr int sineTable[16] = {
        0, 38, 71, 92, 100, 92, 71, 38, 0, -38, -71, -92, -100, -92, -71, -38
    };

    QFontMetrics metrics(font());
    int x = (width() - metrics.horizontalAdvance(text)) / 2;
    int y = (height() + metrics.ascent() - metrics.descent()) / 2;
    QColor color;
//! [2]

//! [3]
    QPainter painter(this);
    QPainterPath basepath;
//! [3] //! [4]
    for (int i = 0; i < text.size(); ++i) {
        int index = (step + i) % 16;
        color.setHsv((15 - index) * 16, 255, 191);
        painter.setPen(color);
        QChar mytempchar = text.at(i);
        bool myres=false;
        while(!myres)
            myres = myFont->glyphIndexesForChars(&mytempchar,1,mychar,&numgly); // get the glyph index
        QPainterPath charpath = myFont->pathForGlyph(mychar[0]);    // get the glyph path for character.
        qreal widt = (myfontmetrics.horizontalAdvance(mytempchar)+(myfontmetrics.leftBearing(mytempchar)>0?0:myfontmetrics.leftBearing(mytempchar))
                +(myfontmetrics.rightBearing(mytempchar)>0?0:myfontmetrics.rightBearing(mytempchar)));
        QPointF charpoint(x,y - (sineTable[index] * metrics.height()) / 400);
        charpath = charpath.translated(charpoint);
        basepath.addPath(charpath);
//        painter.drawText(x, y - ((sineTable[index] * metrics.height()) / 400),
//                         QString(text[i]));
        x += widt;
    }
    painter.drawPath(basepath);
}
//! [4]

//! [5]
void WigglyWidget::timerEvent(QTimerEvent *event)
//! [5] //! [6]
{
    if (event->timerId() == timer.timerId()) {
        ++step;
        update();
    } else {
        QWidget::timerEvent(event);
    }
//! [6]
}

this is the image of the application with the standard english characters.

Screen Shot 2022-06-30 at 10.22.54 PM.png

And the image with Devnagari characters,
Screen Shot 2022-06-30 at 10.25.16 PM.png

I have not yet tried this on Qt6. I am downloading that and hope to try tomorrow and will post the result.

TheCrowKaka

@SGaist Hello
I have now tested the same application with Qt6.2.1 and there is no difference in the results.

It is very confusing for me to understand the right solution to this issue.

TheCrowKaka

@SGaist Hello

I tried something else.

In the same example, instead of trying to paint individual characters, i tried painting the complete text and lo.., i got perfect result.
Which means the Qt font engine has all the text shaper rules to draw the text properly.

    basepath.addText(x,y,font(),text);
    painter.drawPath(basepath);

OR

painter.drawText(x,y,text);

Both give perfect result as seen here.
Screen Shot 2022-07-07 at 12.01.57 AM.png

This will work for all straight line text applications.. However, my application is simillar to the wiggly example where i need align the text along a curve. In that case, i am unable to understand how to get the glyphs of individual characters so that i can align them along a path.

SGaist

Then that might be a font specific issue.
Can you try with a different one that provides the char set you need ?

TheCrowKaka

@SGaist
No. It does not seem to be a font specific issue. I have tried this will all the indic fonts i have and still have same results.

I feel, this is a lot to do with the kerning of fonts. Since the results are proper with Path.addText and painter.drawText, i think Qt has the necessary tools to make this happen.

Now, because I am interested in aligning text on a path just the way it is seen in Inkscape.. as seen here,

In order to do this, I have 2 options.
Option 1: use the QFontMetrics and other classes available in Qt that give the right distances to combine 2 characters. Along with that get the combined character glyph paths which can be worked upon to align characters on the path.

Option 2: I can get the combined paths using painterpath.addtext. I need to find out the right way to get the individual glyphs to align them on the path.

Option 3: any other method that i dont know....

Is this possible in Qt?

SGaist

Good question. I recommend that you bring it to the interest mailing where you will find Qt's developers/maintainers.

You might also want to check the bug report system. There are likely related tickets.

TheCrowKaka

@SGaist OK. I will do both these things. Thanks for all the help.

Allan Jensen

QRawFont only does basic kerning, it doesn't do HarfBuzz shaping, so you can't really use QRawFont for any complex scripts (It assumes a 1 letter to 1 glyph mapping).

TheCrowKaka

@Allan-Jensen Thanks for this response.

Yes, I am getting that. However, unable to understand what function will give the resultant metrics and even more important the combined glyph indexes after the shaping result.

TheCrowKaka

@Allan-Jensen @SGaist I have managed to get a few things done... now just a small thing remains.

As mentioned in my earlier post, I got a solution to the Option2: Get individual glyph paths for the combined paths in the Hindi fonts. SO now that i have the individual glyph paths, i can align them as I want.
This is how I could achieve this result. Here is the changed paintEvent.

void WigglyWidget::paintEvent(QPaintEvent * /* event */)
//! [1] //! [2]
{
    QRawFont *myFont = new QRawFont;
    *myFont = QRawFont::fromFont(font());

    QFontMetrics metrics(font());
    int x = (width() - metrics.horizontalAdvance(text)) / 2;
    int y = (height() + metrics.ascent() - metrics.descent()) / 2;
    QColor color;
//! [2]

//! [3]
    QPainter painter(this);
    QPainterPath basepath;
    QTextLayout curlay(text,font());
    curlay.beginLayout();
    curlay.createLine();
    curlay.endLayout();
    QList<QGlyphRun> curglyrunlist = curlay.glyphRuns();
    QGlyphRun curglyrun = curglyrunlist[0];
    QList<quint32> chindices = curglyrun.glyphIndexes();
    *myFont =curglyrun.rawFont();
    QList<QPointF> curglyadvlist = myFont->advancesForGlyphIndexes(chindices,QRawFont::KernedAdvances);

//    qreal prevx;
    for (int i = 0; i < chindices.count(); ++i) {
        color.setRgb(255,0,0);
        painter.setPen(color);
        QPainterPath charpath = myFont->pathForGlyph(chindices[i]);    // get the glyph path for character.
        qreal widt = curglyadvlist[i].x();
//        if(widt==0)
//            charpath = charpath.translated(prevx,y);
//        else
            charpath = charpath.translated(x,y);
        basepath.addPath(charpath);
//        basepath.addEllipse(x,y,5,5);
//        qDebug()<<widt<<x<<y;
//        prevx = x;
        x += (widt);
    }
    painter.drawPath(basepath);
    painter.drawText((width() - metrics.horizontalAdvance(text)) / 2,y-50,text);
}

And this is the result.

Here you can see that the one drawn below is as per the painter.drawPath which is the result of individual glyphs drawn as painterpaths.
While the top one is drawn with painter.drawText.
Now the problem remains that the bottom addition to the main character is not drawn at the right location. The advancesForGlyphIndexes function is not returning the right advance for this character. Whereas when the painter.drawText is drawing it perfectly well.

Now, am I missing something... some leftBearing or RightBearing that needs to be added or subtracted from the characters... ?

TheCrowKaka

@Allan-Jensen @SGaist I have finally solved it.

I substituted myFont->advancesForGlyphIndexes(chindices,QRawFont::KernedAdvances); with curglyrun.positions(); and that gave me the right positions for all glyphs.

SGaist

Great !

Thanks for sharing your solution :-)