Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Alignment of images in rich text
Forum Updated to NodeBB v4.3 + New Features

Alignment of images in rich text

Scheduled Pinned Locked Moved Unsolved General and Desktop
4 Posts 2 Posters 2.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    bepaald
    wrote on last edited by
    #1

    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:
    0_1530088032400_qt-textalign.png

    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!

    JonBJ 1 Reply Last reply
    0
    • B 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:
      0_1530088032400_qt-textalign.png

      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!

      JonBJ Offline
      JonBJ Offline
      JonB
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0
      • B Offline
        B Offline
        bepaald
        wrote on last edited by bepaald
        #3

        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:
        0_1530106505600_qt-textalign2.png

        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.

        JonBJ 1 Reply Last reply
        0
        • B 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:
          0_1530106505600_qt-textalign2.png

          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.

          JonBJ Offline
          JonBJ Offline
          JonB
          wrote on last edited by JonB
          #4

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

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved