QLabel text alignment with rich text and <tt>

2
votes

I have a QLabel that's displaying rich text (i. e. a subset of HTML supported by Qt) and uses the <tt> tag (for monospaced font). This seems to mess up the vertical alignment of the whole label text (not just the monospaced part).

As an example, here are 9 QLabels in a grid layout. The text of the center label is "Text<tt>Label</tt>", while the text of the other labels is "TextLabel". The text of the center label is aligned 3 pixels lower than the others.

Screenshot

Needless to say, this messes up the layout and causes annoying layout changes when the text is changed to a value that doesn't contain any monospaced font.

How can I get the text to align with the other labels?

Qt 5.5.1 on Ubuntu 16.04 with Gnome 3.18.2.

1
qtlayout

1 Answers

1
votes

TL;DR: Using <span style="font-family: monospace">...</span> instead of <tt>...</tt> fixed the issue for me.

Looking at the following screenshot, my impression is that this is an issue related to the Courier New font:

  • The blue label (top) has its font set to Courier New. It has additional space above the text.
  • The red label (center) uses <tt> as in the question. Qt chooses Courier New as a font and it has additional space above the text.
  • The green label (bottom) uses font-family: monospace as described above (for the "Label" part of the text); Qt chooses a different monospaced font (not sure which one) and spacing is fine.

enter image description here