Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to adjust text font size relative to parent
Forum Update on Monday, May 27th 2025

How to adjust text font size relative to parent

Scheduled Pinned Locked Moved Solved QML and Qt Quick
2 Posts 1 Posters 1.0k 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.
  • N Offline
    N Offline
    NYBL
    wrote on last edited by NYBL
    #1

    Re: [solved] How to make Text font size to be auto adjusted

    QtObject{
    readonly property font defaultFont: Qt.font({
         pixelSize: 19
    })
    }
    
    Text {
        width: parent.width
        height: parent.height
        font: defaultFont
        font.pointSize: 100  // will cause an error
        minimumPointSize: 10
        fontSizeMode: Text.Fit
    }
    

    The refferenced topic shows how to fit a text inside a parent but wont cover if the font is a readonly property
    which is very useful to save your fonts in one place and copy theme threw the app..
    as you may know Text wont provide the maximum equivalent of minimumPointSize, so how to overcome this?

    1 Reply Last reply
    0
    • N Offline
      N Offline
      NYBL
      wrote on last edited by NYBL
      #2

      I have found two possible solution:

      1. instead of creating a font property we can create our custom Text and setting the font corresponding to the parent size like this:
      import QtQuick
      
      Text{
          property real pixelSize: Theme.fPixelSizeS
          property bool bold: false
          property string fontFamily: Theme.fFamily
          property real minPixelSize: 10
          property font _font
      
          _font.pixelSize: pixelSize
          _font.family: fontFamily
          _font.bold: bold
          color: Theme.textDefault
          font: _font
          anchors.verticalCenter: parent.verticalCenter
          wrapMode: Text.WordWrap
          fontSizeMode: Text.HorizontalFit;
          elide: Text.ElideMiddle
      }
      
      1. create a binding to the Qt.font function and provide our defaults as primitives like this:
      QtObject{id: defaults
          readonly property string fFamily: "Segoe UI Semibold"
         
      }
      
      Text {id: someText
          width: parent.width
          height: parent.height
          font: Qt.font({
               pixelSize: someText.height / 5,
               fontFamily: defaults.fFamily
          })
          minimumPointSize: 10
          fontSizeMode: Text.Fit
      }
      
      

      note that the second approach for some reason makes the console very chatty.

      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