Qt World Summit: Submit your Presentation

Alignment of images in rich text

  • Re: Align text and image in TextArea (rich-text formatting)
    Re: QTextEdit align inline image with text

    Trying to embed small images (emoji) inside rich text (QTextDocument with html set), I find the emoji are aligned with the text in a strange way. Looking at the supported subset of CSS properties (https://doc.qt.io/qt-5/richtext-html-subset.html), I see the vertical-align property is supported. Does this only work for text? I created a small example program expecting to see results similar to what is shown on this site: Aligning inline images with the vertical-align property, but instead got this:

    As can be seen, the alignment property seems to do nothing (I added the green line after the screenshot was taken by the way), except when vertical-align=middle is specified, and even then the result is not correct as far as I know. Is this expected behavior, am I screwing up somehow, or is it a bug?

    Are there any workarounds? I would like the images to have their middle-lines aligned with the middle lines of the text (the x-heigth). Searching these forums I found two similar questions that are yet unsolved, maybe those topic creators have found solutions?


  • @bepaald
    Two thoughts for you to try:

    • I don't suppose it'll make any difference, but what about putting the img's height setting into the style instead of as a direct attribute, just in case?

    • I'd start by getting the HTML right in a standalone HTML file viewed in your browser, before seeing what the problems with QSS might be.

  • Hi! Thanks for your response!

    Putting the height in the style does not seem to work. It is also not listed in the 'supported html subset' page I linked in my first post, so I guess it makes sense. The property is ignored and the result is the same.

    Creating a tiny (though strictly not valid) html file, I get much more promising results:

    I clearly see different image alignments in all the lines. The only slightly strange thing is that sub looks the same as bottom, but that may be normal behavior.

  • @bepaald
    Have you tried using the verticalAlignment property and set it to TextEdit.AlignV... in code? Tells you whether the widget can do it or it's a stylesheet limitation?

Log in to reply