K.Mulier K.Mulier - 3 months ago 40
Python Question

QLabel font differs when inserting a short HTML text

I have noticed that the font size of a

QLabel()
in a PyQt GUI is not very consistent. Let's take a look at the following example. I've written a complete python file for a quick test. It will pop up a Qt window with two labels:

from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
import sys
import os

'''---------------------------------------------------------------------'''
''' '''
''' T E S T I N G '''
''' '''
'''---------------------------------------------------------------------'''


class TestWindow(QMainWindow):
def __init__(self):
super(TestWindow, self).__init__()

# 1. Set basic geometry and color.
# --------------------------------
self.setGeometry(100, 100, 800, 600)
self.setWindowTitle('Hello World')
palette = QPalette()
palette.setColor(QPalette.Window, QColor(200,200,200))
self.setPalette(palette)
self.show()

# 2. Create the central frame.
# ----------------------------
self.centralFrame = QFrame(self)
self.centralFrame.setFrameShape(QFrame.NoFrame)
self.centralLayout = QVBoxLayout()
self.centralFrame.setLayout(self.centralLayout)
self.centralLayout.setSpacing(5)
self.centralLayout.setContentsMargins(20,20,20,20)
self.setCentralWidget(self.centralFrame)

# 3. Do the test.
# ----------------
# TEST CASE 1
# The label with html
self.infoLbl = QLabel()
self.infoLbl.setTextFormat(Qt.RichText)
self.infoLbl.setFrameShape(QFrame.StyledPanel)
self.infoTxt = \
'<html> \
<head> \
</head> \
<body> \
<font size="10"> \
<p style="margin-left:8px;">My html text, font = 10pt</p> \
</font> \
</body> \
</html> '
self.infoLbl.setText(self.infoTxt)
self.infoLbl.setMaximumHeight(50)
self.infoLbl.setMaximumWidth(500)

# TEST CASE 2
# The label with a normal string
self.normalLbl = QLabel()
self.normalLbl.setFrameShape(QFrame.StyledPanel)
self.normalLbl.setText('My normal text, font = 10pt')
font = QFont()
font.setFamily("Arial")
font.setPointSize(10)
self.normalLbl.setFont(font)
self.normalLbl.setMaximumHeight(50)
self.normalLbl.setMaximumWidth(500)

# 4. Add both labels to the central layout.
# ------------------------------------------
self.centralLayout.addWidget(self.infoLbl) # <- The label with html snippet
self.centralLayout.addWidget(self.normalLbl) # <- The normal label
self.centralLayout.addWidget(QLabel()) # <- Just a spacer


if __name__== '__main__':
app = QApplication(sys.argv)
QApplication.setStyle(QStyleFactory.create('Fusion'))
testWindow = TestWindow()
app.exec_()
app = None


If you run this code, this is what you get:

Font size issue in QLabel

Why are the font sizes in both labels not equal?

For completeness, this is my system:


  • Operating system: Windows 10, 64-bit

  • Python version: v3 (anaconda package)

  • Qt version: PyQt5


Answer

The font tag is still fully supported in both Qt4 and Qt5. The fact that it has been made obsolete by the current HTML standard is irrelevant, because Qt has only ever supported a limited subset of HTML4.

The real problem with the example is due to a misunderstanding of the size attribute. This does not specify a point size. Rather, it specifies either, (a) a fixed value in the range 1-7, or (b) a plus/minus value relative to the basefont size. So all it can ever do is make the font "smaller" or "larger", and the exact results will depend entirely on the rendering engine.

To set an exact point-size, use the css font-size property:

<p style="font-size:10pt">My html text, font = 10pt</p>

NB: see the CSS Properties Table for a list of all the css properties supported by Qt's rich-text engine.