Align text and image in TextArea (rich-text formatting)

[Schluchti]

Hi,

I am trying to vertically align text and a picture inside a TextArea. In order to embed the image in the TextArea I am using rich-text formatting. The following code snippet illustrates this:

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 500
    height: 500

    Rectangle{
        anchors.fill: parent
        color: "black"
        TextArea{
            width: parent.width
            text: "<p>This is a really really really really long text with a smiley <img src=\"qrc:/sunglasses.svg\" align=\"middle\" height=25 width=25>. And the really really really long text continues</p>"
            textFormat: TextEdit.RichText
            wrapMode: Text.WordWrap
            color: "white"
        }
    }
}

Unfortunately text and image are not correctly vertically aligned, see:

Does anyone know what I am doing wrong?

Bernhard

[Eeli K]

@Schluchti See "Supported HTML Subset" in the Qt GUI documentation. I suppose that's valid for QML text components, too.

[Schluchti]

@Eeli-K thanks for your answer, but I think I don't get the point. I already looked into the mentioned documentation but couldn't find anything useful that would help me with my alignment problem. But maybe I am overlooking something in the documentation.

[Eeli K]

@Schluchti Sorry, now I see the post wasn't very informative. I should have said it's not possible with that HTML subset. Maybe you can use WebView, but then you are tied to platform-dependent implementations which may differ on HTML rendering.

[Schluchti]

Aaah ok, I misinterpreted that on my side ;)

Unfortunately a WebView isn't an option, as I would also need the rich-text formatting to format entries inside a ListView. Therefore I would like to use a Text component instead of a WebView as it needs way less resources.

Does anyone have another idea?

[literA2]

@Schluchti have you tried using the verticalAlignment property and set it to TextEdit.AlignVCenter.