Important: Please read the Qt Code of Conduct -

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

  • 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
            anchors.fill: parent
            color: "black"
                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:

    alt text

    Does anyone know what I am doing wrong?


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

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

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

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

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

Log in to reply