⚠️ Forum Maintenance: Feb 6th, 8am - 14pm (UTC+2)

[Solved] Styling text in Text element with HTML/CSS

  • Hello,
    I have a little problem which forced me to fiddle around quite a bit without having any useful results.

    What I want to achieve is e.g. the following:
    In the same QML Text element I want to have the first half of the text in the original font size and the second half should only be 50% of the font size. Is there any way to get this done without having a second Text element?

    I'm getting crazy with this problem that should be as simple as inserting a CSS font-size tag with the font size calculated to be 0.5 the pointsize ot the Text's font.pointSize property.

    Hopefully someone can he me with this.


  • As far i know the css styles into QML are limitated to some HTML elements.

    Check that "QML Text HTML documentation":http://qt-project.org/doc/qt-4.7/richtext-html-subset.html#id-c4f57a55-3668-4f53-8dfa-28f4d59a41c7

  • Thank you, I already checked this doc before and tried to use these tags in many combinations but neither of them worked. :(

  • And what is the problem on use 2 text elements anchored between themselves?

  • That's how I'll probably solve it in the end but I wanted to avoid to copy the Text's set of properties (or create a separate Component) just for a simple size change.

    In fact I wanted to know if it's technically possible and it's just me who is too stupid, or if it's really (which I simply don't want to believe) a QML limitation... :)

  • Hi,

    Here's an example that correctly changes the font size for me (it should work under QtQuick 1.0 as well). Is this the kind of thing you are after?

    @import QtQuick 2.0

    Rectangle {
    width: 400; height: 400
    Text { text: "Hello <span style="font-size:24px">world</span>"; textFormat: Text.RichText }


  • I already tried it with the span element and font-size, with the difference that I used Text.StyledText and QtQuick 1.1.

    I thought text which uses HTML stuff has to be StyledText, so what's the exact difference?

    Thanks a lot, it's good to know that this works for you, I will try it again as soon as I have some time.


  • Thanks Michael,

    it's indeed the StyledText format that made my approach unusable! With RichText it works like a charm.

    How can I close this thread?


  • Hi Bernnhard,

    Glad to hear you got it working with RichText. I believe the list included at http://doc.qt.nokia.com/4.7-snapshot/qml-text.html#textFormat-prop is the full set of supported tags for StyledText (StyledText supports a very limited subset of the most common tags, but is faster than RichText).

    You can add [Solved] to the title of this thread to mark it as closed.


  • Thanks Michael for the clarification, I thought it would be the other way around, dont't know why, but maybe the docs are a bit misleading / not clear enough in this aspect.


Log in to reply