Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-116180

QML - Text object - HTML rendering - bullet points vertical alignment & multiple font sizes

    XMLWordPrintable

Details

    • Windows

    Description

      I have the following QML code, which is rendering HTML using a `Text` QML object :

      import QtQuick 2.7
      import QtQuick.Controls 2.12
      
      Rectangle {
      color:"white"
      id: rect
      
      anchors.fill: parent
      
      Column {
      anchors.centerIn: parent
      
      Text {
      text: "<ul><li><span style=\"font-size:13px;font-weight:400;font-style:undefined;color:#58627D;letter-spacing:0px;line-height:16px;\">L</span><span style=\"font-size:13px;font-weight:400;font-style:undefined;color:#58627D;letter-spacing:0px;line-height:16px;\">wwwwwwww</span></li><li><span style=\"font-size:13px;font-weight:400;font-style:undefined;color:#58627D;letter-spacing:0px;line-height:16px;\">Lwwwwwwww</span></li><li><span style=\"font-size:13px;font-weight:400;font-style:undefined;color:#58627D;letter-spacing:0px;line-height:16px;\">Lwwwwwwww</span></li><li><span style=\"font-size:11px;font-weight:400;font-style:undefined;color:#58627D;letter-spacing:0px;line-height:13px;\">Lwwwwwwww</span></li><li><span style=\"font-size:18px;font-weight:300;font-style:undefined;color:#272D36;letter-spacing:0px;line-height:22px;\">Lwwwwwwww</span></li><li><span style=\"font-size:11px;font-weight:400;font-style:undefined;color:#58627D;letter-spacing:0px;line-height:13px;\">Lwwwwwww</span></li><li><span style=\"font-size:13px;font-weight:400;font-style:undefined;color:#58627D;letter-spacing:0px;line-height:16px;\">Lwwwwwwww</span></li><li><span style=\"font-size:18px;font-weight:300;font-style:undefined;color:#272D36;letter-spacing:0px;line-height:22px;\">Lwwwwwwww</span></li></ul>"
      textFormat: Text.RichText
      }
      }
      
      } 

      My problem is that the bullet points are aligned well for the macOS and WebAssembly builds, but not aligned well for Windows.
      I attach the screenshots for macOS, and Windows.

      Is there any way to fix this (with keeping the `Text` object so without moving to a `WebView` object)?

      macOS screenshots (where the same thing is working well) :

      Windows screenshots (where we have the issue) :

      Attachments

        1. example.html
          1 kB
        2. screenshot-1.png
          screenshot-1.png
          12 kB
        3. screenshot-2.png
          screenshot-2.png
          45 kB
        4. Screenshot 2023-08-17 at 15.49.08.png
          Screenshot 2023-08-17 at 15.49.08.png
          73 kB
        5. Screenshot 2023-08-17 at 15.49.13.png
          Screenshot 2023-08-17 at 15.49.13.png
          185 kB
        6. Screenshot 2023-08-17 at 15.49.18.png
          Screenshot 2023-08-17 at 15.49.18.png
          279 kB
        7. Screenshot 2023-08-17 at 15.49.43.png
          Screenshot 2023-08-17 at 15.49.43.png
          152 kB
        8. Screenshot 2023-09-26 at 14.41.12.png
          Screenshot 2023-09-26 at 14.41.12.png
          24 kB
        9. screenshot-3.png
          screenshot-3.png
          34 kB

        Issue Links

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

              esabraha Eskil Abrahamsen Blomfeldt
              csnt Csaba Szigeti
              Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

                Created:
                Updated:

                Gerrit Reviews

                  There are no open Gerrit changes