4

I'm a Vala/Gtk newbie and I'm trying to change the font size of a Gtk.Label, but I can't find a good way to do it.

I find out that I can use the markup like this :

    var welcome_message = new Gtk.Label ("<span size='17000'>Hello</span>");
    welcome_message.set_use_markup (true);

But it seems a little hackish. What is the right way to do it ?

Olivier Lasne
  • 679
  • 6
  • 12
  • possible duplicate of [How can I change the font size in GTK?](http://stackoverflow.com/questions/1269326/how-can-i-change-the-font-size-in-gtk) – Jens Mühlenhoff Feb 07 '15 at 12:45
  • That other question refers to GTK 2 only. (I've tagged it as such.) CSS is the correct answer to this question. – ptomato Feb 11 '15 at 08:05

2 Answers2

13

Thanks lethalman and nemequ.

I think it might help someone so here is a little example of how to use css with Vala.

using Gtk;

public class StyleApp1 : Gtk.Window
{
    public StyleApp1() 
    {

        this.title = "Style app example";
        this.set_border_width (10);
        this.set_position (Gtk.WindowPosition.CENTER);

        this.set_default_size (350, 200);
        this.destroy.connect (Gtk.main_quit);

        var screen = this.get_screen ();
        var css_provider = new Gtk.CssProvider();

        string path = "styleapp1.css";

        // test if the css file exist
        if (FileUtils.test (path, FileTest.EXISTS))
        {
            try {
                css_provider.load_from_path(path);
                Gtk.StyleContext.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);
            } catch (Error e) {
                error ("Cannot load CSS stylesheet: %s", e.message);
            }
        }

        var box = new Gtk.Box (Gtk.Orientation.VERTICAL, 10);
        this.add (box);

        var label = new Gtk.Label ("Thank you");
        box.add (label);

        var label2 = new Gtk.Label ("Stackoverflow");
        label2.get_style_context().add_class("my_class");
        box.add (label2);
    }
}

static int main(string[] args) {
    Gtk.init(ref args);

    StyleApp1 win = new StyleApp1();
    win.show_all();

    Gtk.main();
    return 0;
}

and the styleapp1.css file :

GtkWindow {
    font-size: 17px;
}

.my_class {
    color: pink;
}

NB : if you use add_provider instead of add_provider_for_screen. You have to use add_provider for every widget that you want to customize.

Olivier Lasne
  • 679
  • 6
  • 12
1

You could try with css, I think lately this is the preferred way. Give your label a class, then load a css. If you are going to change the font size of a label, I bet you are also going to customize other things so the css may be useful for you.

lethalman
  • 1,976
  • 1
  • 14
  • 18
  • I agree, CSS is a good way to go. You can also use pango attributes, but it's not really any less hackish than markup: `Pango.AttrList attrs = new Pango.AttrList (); attrs.insert (Pango.attr_scale_new (Pango.Scale.LARGE)); label.attributes = attrs;` – nemequ Feb 09 '15 at 20:44