4

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.

1 Answer 1

6

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

3
  • good sln!, The only issue is each <div> comes in a new line, or? Mar 21, 2018 at 6:47
  • @MohammadKanan Using <span> tag shows the text inline. I thought <div> looks better...just personal preference.
    – JustWe
    Mar 21, 2018 at 6:52
  • Its funny because I recall answering a similar question and I remember I got it to work, but I couldn't find the answer. The user might have been removed, and with it the answer.
    – dtech
    Mar 21, 2018 at 10:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.