Search code examples
qtfontsformattingqmlrichtext

Multiple font sizes in a single QML Text element

I've been trying to get a Text element to display text of varying size via some rich text formatting:

  Text {
    font.pointSize: 30
    text: 'T' +
          '<font size="40px">T</font>' +
          '<font size="10px">T</font>' +
          '<font size="5px">T</font>' +
          '<font size="40pt">T</font>' +
          '<font size="10pt">T</font>' +
          '<font size="5pt">T</font>' +
          '<font size="1">T</font>' +
          '<font size="2">T</font>' +
          '<font size="3">T</font>' +
          '<font size="4">T</font>' +
          '<font size="5">T</font>' +
          '<font size="6">T</font>' +
          '<font size="-1">T</font>' +
          '<font size="-2">T</font>' +
          '<font size="-3">T</font>' +
          '<font size="-4">T</font>' +
          '<font size="-5">T</font>' +
          '<font size="-6">T</font>' +
          '<font size="20%">T</font>' +
          '<font size="60%">T</font>' +
          '<font size="130%">T</font>'
  }

Unfortunately, as made evident by the end result, it seems that only size 1 to 7 and -1 to -2 works as expected, everything else has zero effect. enter image description here

What I want in particular is text that is significantly smaller than the set value of 30pts, around 10 or so would be ideal, however I cannot get that low using any of the few options that worked.

Edit: I was able to get the desired size difference by changing the base size and using size 7 for the "normal" and size -2 for the small text, but nonetheless, I will leave the question in the event someone has a generic solution to get arbitrary sizing.

Solution

  • You trying to use the Text.RichText style text, so need do like this:

    Text {
    textFormat: Text.RichText
    text: " <html>
                <div style='font-size: 5px;'>T</div>
                <div style='font-size: 10px;'>T</div>
                <div style='font-size: 20px;'>T</div>
                <div style='font-size: 30px;'>T</div>
            </html>"
}

    I think your HTML text shall be detected as Text.StyledText, that is in the style of HTML 3.2. it supports limited font-size property of HTML tag:

    <font color="color_name" size="1-7"></font>

    Text.RichText supports a larger subset of HTML 4, as described on the Supported HTML Subset page.

    The HTML 4 supports the CSS property in below:

    font-size [ small | medium | large | x-large | xx-large ] | pt | px