Alignment of images in rich text

bepaald

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?

Thanks!

JonB

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

bepaald

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.

JonB

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