html tags + arabic + Qt

[BlueIceCream]

Hello,

I am confusing with some strange things when using html tags with Arabic text.

For first for render text in Qlabel i use code:

QChar data[] = {1576,1616,1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};
 
    QString p(data,35);
 
    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

QChar data[] = {1576,1616,1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};

    QString p(data,35);

    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

To copy to clipboard, switch view to plain text mode 

The output:
query1.png
there is all right and rendering is properly.

So i am using, for example, <em>arabic symbol</em> and write this code:

// 60,101,109,62   is <em> tag
  // 60,47,101,109,62 is </em> tag
 
            QChar data[] = {60,101,109,62,1576,1616,60,47,101,109,62,
                    1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};
 
    QString p(data,44);
 
    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

// 60,101,109,62   is <em> tag
  // 60,47,101,109,62 is </em> tag

            QChar data[] = {60,101,109,62,1576,1616,60,47,101,109,62,
                    1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};

    QString p(data,44);

    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

To copy to clipboard, switch view to plain text mode 

The output:
query2.png

also for this example <span style="color:red">arabic symbol</span>

QChar data[] = {
                    // <span style="color:red">
                    60,115,112,97,110,32,115,116,121,108,101,
                    61,34,99,111,108,111,114,58,114,101,100,34,62,
 
                    1576,1616,
 
                    60,47,115,112,97,110,62, //</span>
 
                    1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};
 
    QString p(data,66);
 
    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

QChar data[] = {
                    // <span style="color:red">
                    60,115,112,97,110,32,115,116,121,108,101,
                    61,34,99,111,108,111,114,58,114,101,100,34,62,

                    1576,1616,

                    60,47,115,112,97,110,62, //</span>

                    1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};

    QString p(data,66);

    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

To copy to clipboard, switch view to plain text mode 

The output:
query3.png

example for only first symbol

QChar data[] = {
                    // <span style="color:red">
                    60,115,112,97,110,32,115,116,121,108,101,
                    61,34,99,111,108,111,114,58,114,101,100,34,62,
 
                    1576,
 
                    60,47,115,112,97,110,62, //</span>
 
                    1616,1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};
 
    QString p(data,66);
 
    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

QChar data[] = {
                    // <span style="color:red">
                    60,115,112,97,110,32,115,116,121,108,101,
                    61,34,99,111,108,111,114,58,114,101,100,34,62,

                    1576,

                    60,47,115,112,97,110,62, //</span>

                    1616,1587,1618,1605,1616,
                    1649,1604,1604,1617,1614,1607,1616,
                    1649,1604,1585,1617,1614,1581,1618,
                    1605,1614,1648,1606,1616,1649,1604,
                    1585,1617,1614,1581,1616,1610,1605,1616};

    QString p(data,66);

    ui->label->setFont(QFont("Scheherazade",45));
    ui->label->setText(p);

To copy to clipboard, switch view to plain text mode 

The output:

query4.png

Why when using html tags rendering is wrong? i check (color and em) in libreoffice with this font and all ok. But qt can't rendering it properly. Need help.

PS. The task is rendering highlighted Arabic text on Qt widgets (QLabel, QTextEdit, etc.)

[BlueIceCream]

Problem was solved.

For correct rendering you must using &#x200D (zero-width joiner Unicode character).

<p>عرب&#x200d;<span style="color: Red;">&#x200d;ي</span></p>

You have to use it twice: at end of highlighted character and at start of other word's part. So character in word is connecting with special invisible character that hasn't width. When they rendering, render engine use connected form of Arabic letters. Because zwj hasn't width word not breaks.