Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Font size on a 125% display



  • Hi there,

    My app is nicely shown on a Windows10 100% display. I have some of the labels and button's text that are displayed with a specific font size (bigger, set to 12 points).

    In a 125% display, it's all wrong. The texts are way too big and don't fit their layout.

    I had a look at this: https://doc.qt.io/qt-5/highdpi.html but I don't get what I'm supposed to do.

    Any help would be appreciated!

    Thanks,
    Arnaud



  • Your text is in point size, which will change its pixel size with dpi, but the frame size is in pixel size.
    So you can

    1. Use pixel size for text font, too.
    2. Calculate frame size according to dpi dynamically.
    3. Disable auto scaling by Qt::AA_DisableHighDpiScaling.

  • Lifetime Qt Champion

    What Qt version do you use? Do you have a minimal, reproducible example to show to problem?



  • Hi Christian. here is the smallest example possible:
    Mainwindow.cpp:

      ui->setupUi(this);
        m_frame = new QFrame(this);
        m_frame->setMaximumSize(200,200);
        m_frame->setMinimumSize(200,200);
        QString strFrameStylehseet =
                "QFrame{border: 6px solid transparent; border-radius: 8px;background-color: #002d59;} \
                QFrame:hover{border: 6px solid #002d59; border-radius: 8px; background-color: #002d59;} \
                QFrame:disabled{border-radius: 8px;background-color: #505050;} \
                QPushButton {	font-size: 12pt;border-radius: 2px;	color: #002d59;	background-color: white;	border: none;} \
                QPushButton:hover:!pressed{	background-color: #edf2f5;}QPushButton:hover:pressed {background-color: rgba(128, 150, 172);} \
                QPushButton:disabled {color:#747474;}QFrame > QLabel {	color: white;}";
    
        m_frame->setStyleSheet(strFrameStylehseet);
       
        m_layout = new QVBoxLayout(m_frame);
        m_frame->setLayout(m_layout);
    
        m_icon = new QLabel(m_frame);
        m_icon->setScaledContents(true);
        m_icon->setAlignment(Qt::AlignCenter);
        m_icon->setText("[ICON]"); //it's supposed to be a QPixmap, but for the exemple it's a text
        m_icon->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
        m_icon->setMinimumSize(60, 60);
        m_icon->setMaximumSize(60, 60);
    
        m_text = new QLabel(m_frame);
        m_text->setAlignment(Qt::AlignCenter);
        m_text->setWordWrap(true);
        QFont font = m_text->font();
        font.setPointSize(11); //here is the font size change
        m_text->setFont(font);
        m_text->setText("Text with display issue. Here is a short yet multilines description.");
    
        m_button = new QPushButton("Button", m_frame);
        m_button->setFixedHeight(50);
        m_button->setCheckable(true);
        m_button->setIconSize(QSize(32,32));
        m_button->setFocusPolicy(Qt::NoFocus);
        m_button->setMinimumSize(0,35);
    
        //this HBoxLayout allows to center the icon
        m_hlayout = new QHBoxLayout(m_frame);
        m_hlayout->addStretch();
        m_hlayout->addWidget(m_icon);
        m_hlayout->addStretch();
    
        m_layout->addLayout(m_hlayout);
        m_layout->addWidget(m_text);
        m_layout->addStretch();
        m_layout->addWidget(m_button);
    
        ui->centralWidget->layout()->addWidget(m_frame);
    

    Mainwindow.h:

    #include <QMainWindow>
    #include <QFrame>
    #include <QMouseEvent>
    #include <QVBoxLayout>
    #include <QLabel>
    #include <QPushButton>
    #include <QSpacerItem>
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    private:
        Ui::MainWindow *ui;
        QFrame *m_frame = nullptr;
        QVBoxLayout *m_layout = nullptr;
        QHBoxLayout *m_hlayout = nullptr;
        QLabel *m_icon = nullptr;
        QLabel *m_text = nullptr;
        QPushButton *m_button = nullptr;
    };
    

    Here are the results:
    On 100% display:
    8e30e9e3-0f90-416c-a807-c6d7d1ba5dea-image.png

    On a 125% display:
    0b42006a-8476-493c-985e-4b97271d9b9c-image.png

    It probably comes from my fixed frame size (200x200) but if I could simply ignore the 125% and display it as a 100% it would be ok for me.

    Hope you can help me,

    Arnaud


  • Lifetime Qt Champion

    If you use fixed layouts it's likely that your texts don't fit into them. Don't use fixed layouts. You will likely have the same problems with 100% when you translate the text into another language.



  • Christian,

    Thanks for this advice. However how am I supposed to keep the same square aspect without fixing the frame size ? How to keep the width and height the same ?



  • Your text is in point size, which will change its pixel size with dpi, but the frame size is in pixel size.
    So you can

    1. Use pixel size for text font, too.
    2. Calculate frame size according to dpi dynamically.
    3. Disable auto scaling by Qt::AA_DisableHighDpiScaling.

  • Lifetime Qt Champion

    @duarna said in Font size on a 125% display:

    However how am I supposed to keep the same square aspect without fixing the frame size ?

    See QWidget::heightForWidth()



  • Thank you all, I'll deal with it !


Log in to reply