gtk.label

The [gtk.label.Label] widget displays a small amount of text.

As the name implies, most labels are used to label another widget such as a class@Button.

!An example GtkLabel

CSS nodes

label
├── [selection]
├── [link]
┊
╰── [link]

[gtk.label.Label] has a single CSS node with the name label. A wide variety of style classes may be applied to labels, such as .title, .subtitle, .dim-label, etc. In the [gtk.shortcuts_window.ShortcutsWindow], labels are used with the .keycap style class.

If the label has a selection, it gets a subnode with name selection.

If the label has links, there is one subnode per link. These subnodes carry the link or visited state depending on whether they have been visited. In this case, label node also gets a .link style class.

GtkLabel as GtkBuildable

The GtkLabel implementation of the GtkBuildable interface supports a custom <attributes> element, which supports any number of <attribute> elements. The <attribute> element has attributes named “name“, “value“, “start“ and “end“ and allows you to specify [pango.attribute.Attribute] values for this label.

An example of a UI definition fragment specifying Pango attributes:

<object class="GtkLabel">
 <attributes>
   <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
   <attribute name="background" value="red" start="5" end="10"/>
 </attributes>
</object>

The start and end attributes specify the range of characters to which the Pango attribute applies. If start and end are not specified, the attribute is applied to the whole text. Note that specifying ranges does not make much sense with translatable attributes. Use markup embedded in the translatable content instead.

Accessibility

[gtk.label.Label] uses the [gtk.types.AccessibleRole.Label] role.

Mnemonics

Labels may contain “mnemonics”. Mnemonics are underlined characters in the label, used for keyboard navigation. Mnemonics are created by providing a string with an underscore before the mnemonic character, such as "_File", to the functions [gtk.label.Label.newWithMnemonic] or [gtk.label.Label.setTextWithMnemonic].

Mnemonics automatically activate any activatable widget the label is inside, such as a [gtk.button.Button]; if the label is not inside the mnemonic’s target widget, you have to tell the label about the target using [gtk.label.Label.setMnemonicWidget].

Here’s a simple example where the label is inside a button:

// Pressing Alt+H will activate this button
GtkWidget *button = gtk_button_new ();
GtkWidget *label = gtk_label_new_with_mnemonic ("_Hello");
gtk_button_set_child (GTK_BUTTON (button), label);

There’s a convenience function to create buttons with a mnemonic label already inside:

// Pressing Alt+H will activate this button
GtkWidget *button = gtk_button_new_with_mnemonic ("_Hello");

To create a mnemonic for a widget alongside the label, such as a [gtk.entry.Entry], you have to point the label at the entry with [gtk.label.Label.setMnemonicWidget]:

// Pressing Alt+H will focus the entry
GtkWidget *entry = gtk_entry_new ();
GtkWidget *label = gtk_label_new_with_mnemonic ("_Hello");
gtk_label_set_mnemonic_widget (GTK_LABEL (label), entry);

Markup (styled text)

To make it easy to format text in a label (changing colors, fonts, etc.), label text can be provided in a simple markup format:

Here’s how to create a label with a small font:

GtkWidget *label = gtk_label_new (NULL);
gtk_label_set_markup (GTK_LABEL (label), "<small>Small text</small>");

(See the Pango manual for complete documentation] of available tags, func@Pango.parse_markup)

The markup passed to [gtk.label.Label.setMarkup] must be valid; for example, literal `<`, `>` and `&` characters must be escaped as <, >, and &. If you pass text obtained from the user, file, or a network to [gtk.label.Label.setMarkup], you’ll want to escape it with func@GLib.markup_escape_text or func@GLib.markup_printf_escaped.

Markup strings are just a convenient way to set the [pango.attr_list.AttrList] on a label; [gtk.label.Label.setAttributes] may be a simpler way to set attributes in some cases. Be careful though; [pango.attr_list.AttrList] tends to cause internationalization problems, unless you’re applying attributes to the entire string (i.e. unless you set the range of each attribute to [0, G_MAXINT)). The reason is that specifying the start_index and end_index for a [pango.attribute.Attribute] requires knowledge of the exact string being displayed, so translations will cause problems.

Selectable labels

Labels can be made selectable with [gtk.label.Label.setSelectable]. Selectable labels allow the user to copy the label contents to the clipboard. Only labels that contain useful-to-copy information—such as error messages—should be made selectable.

Text layout

A label can contain any number of paragraphs, but will have performance problems if it contains more than a small number. Paragraphs are separated by newlines or other paragraph separators understood by Pango.

Labels can automatically wrap text if you call [gtk.label.Label.setWrap].

[gtk.label.Label.setJustify] sets how the lines in a label align with one another. If you want to set how the label as a whole aligns in its available space, see the [gtk.widget.Widget.halign] and [gtk.widget.Widget.valign] properties.

The property@Gtk.Label:width-chars and property@Gtk.Label:max-width-chars properties can be used to control the size allocation of ellipsized or wrapped labels. For ellipsizing labels, if either is specified (and less than the actual text size), it is used as the minimum width, and the actual text size is used as the natural width of the label. For wrapping labels, width-chars is used as the minimum width, if specified, and max-width-chars is used as the natural width. Even if max-width-chars specified, wrapping labels will be rewrapped to use all of the available width.

Links

GTK supports markup for clickable hyperlinks in addition to regular Pango markup. The markup for links is borrowed from HTML, using the <a> with “href“, “title“ and “class“ attributes. GTK renders links similar to the way they appear in web browsers, with colored, underlined text. The “title“ attribute is displayed as a tooltip on the link. The “class“ attribute is used as style class on the CSS node for the link.

An example of inline links looks like this:

const char *text =
"Go to the "
"<a href=\"https://www.gtk.org\" title=\"<i>Our</i> website\">"
"GTK website</a> for more...";
GtkWidget *label = gtk_label_new (NULL);
gtk_label_set_markup (GTK_LABEL (label), text);

It is possible to implement custom handling for links and their tooltips with the signal@Gtk.Label::activate-link signal and the [gtk.label.Label.getCurrentUri] function.

Fluent builder for [gtk.label.Label]