Vertically center text inside label in Gtk using python

Question

I'm trying to vertically center the text of a label inside a box. This is do code I'm trying:

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk

win = Gtk.Window()
win.set_default_size(200, 100)

box = Gtk.Box()
win.add(box)
lbl = Gtk.Label("FOO")
lbl.set_vexpand(True)
lbl.set_valign(Gtk.Align.CENTER)
# Set the background to make the problem visible
lbl.override_background_color(Gtk.StateFlags.NORMAL, Gdk.RGBA(red=1, green=0, blue=0))
box.add(lbl)

win.show_all()
win.connect('destroy', Gtk.main_quit)
Gtk.main()

As you can see, the label itself is centered perfectly fine inside the box, but the text inside the label is shifted slightly towards the top end of the label:

I'm not able to find anything about this. Programmatic as well as CSS-based solutions are highly appreciated.

Please create a minimal, executable program to make it easier to help you. If you are talking about pixel perfection, I am afraid that your result will depend on the font. — bohrax, May 31 '19 at 07:35
Thanks @bohrax I completed the example code. It could well be that I'm talking about pixel perfection. Would it be bad practice to manually set the font of GTK labels? — robfuscator, Jun 01 '19 at 10:13
CSS have a lot of advantages but will require tagging the visual elements beforehand if you want a smooth "theming" experience. For an application where visual appearance is important I would definitely recommend it. Note that there will be some trial and error involved, since the CSS support has not fully stabilized (last I checked), and some behavior is less than perfectly documented or simply have bugs. I wrote an answer that will hopefully help you on the way. — bohrax, Jun 03 '19 at 18:59

bohrax · Accepted Answer · 2019-06-03T18:39:33.983

I believe the problem is that you and the font creator have different opinions of what "centered" in the vertical sense means. Also think what will happen to the visual impression if you have characters like y and g. This will get even more confusing if you add international characters to the mix like Å or Ö.

Anyway, this answer uses CSS to create a configurable offset (padding-top), and will also give you freedom to change font. The 20 px value is obviously too much, but will give a clear visible evidence that it works.

style.css:

#custom_label {
    padding-top: 20px;
    background-color: red;
    font: Vera 20px;
}

test.py:

import gi

gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk

win = Gtk.Window()
win.set_default_size(200, 100)

box = Gtk.Box()
win.add(box)
lbl = Gtk.Label(u'FOO')
lbl.set_name('custom_label')
box.add(lbl)

style_provider = Gtk.CssProvider()
Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), style_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
with open("style.css") as f:
    style_provider.load_from_data(f.read())

win.show_all()
win.connect('destroy', Gtk.main_quit)
Gtk.main()

As a bonus, if you start your program with:

GTK_DEBUG=interactive python test.py

(assuming Linux, not sure how to do this in Windows), you will have an interactive way to change the CSS and other widget properties.

Thank you very much for the workaround! Can you also tell me how this will behave on different resolutions or DPI settings? — robfuscator, Jun 05 '19 at 16:35
@robfuscator I am not sure if Gtk treats `px` as a physical pixel or if it can use multiple physical pixels on a high resolution screen. As long as the font size is specified in the same unit I would imagine it still will work, but I really don't know for sure. — bohrax, Jun 05 '19 at 19:05
Alright, that would make sense. I'll try get hands on some big screen to test it and then update the thread. Thanks again. — robfuscator, Jun 06 '19 at 20:13

Vertically center text inside label in Gtk using python

1 Answers1