Font size on a 125% display

duarna

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

Bonnie

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

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

Christian Ehrlicher

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

duarna

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:

On a 125% display:

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

Christian Ehrlicher

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.

duarna

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 ?

Bonnie

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

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

Christian Ehrlicher

@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()

duarna

Thank you all, I'll deal with it !