Размер шрифта на основе размера виджета в Gtk 3.0

Question

У меня есть метка в Gtk 3.0 (с использованием Vala), которая имеет стиль CSS. Я хотел бы масштабировать размер шрифта на основе размера виджета, чтобы шрифт заполнял виджет/метку, но никогда не становился слишком большим.

Каков наилучший способ сделать это с использованием подхода CSS? Прямо сейчас я устанавливаю шрифт на

font-size: 5em 

но насколько я могу судить, это не масштабируется с разрешением экрана.

Например, на более низкое разрешении экрана, я получаю это (обратите внимание отрезанные часы):

Ранее мы использовали абсолютное масштабирование (см это диф для удивительно краткого explanation) но мы хотели бы придерживаться CSS.

(more context если вы заинтересованы)

Answer 1

Если вы установите размер шрифта в СЭМ или%, она будет основываться на размер шрифта по умолчанию. Фокус в том, чтобы изменить размер шрифта по умолчанию в соответствии с размером окна. Подключитесь к окну configure_event и установите новый размер шрифта по умолчанию при изменении размера окна.

Вот упрощенный пример:

const string WINDOW_CSS_TEMPLATE = "#mywindow { font-size: %fpx; }"; 
const string APPLICATION_CSS = "#mywindow .label { font-size: 5em; }"; 

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

    var win = new Gtk.Window(); 
    win.name = "mywindow"; 
    win.default_width = 800; 
    win.default_height = 600; 
    var label = new Gtk.Label("Some text"); 
    label.halign = Gtk.Align.END; 
    label.valign = Gtk.Align.END; 
    win.add(label); 
    win.destroy.connect(Gtk.main_quit); 

    var win_provider = new Gtk.CssProvider(); 
    Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), 
     win_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); 

    var app_provider = new Gtk.CssProvider(); 
    try { 
     app_provider.load_from_data(APPLICATION_CSS, -1); 
    } catch (Error e) { 
     Process.exit(1); 
    } 
    Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(), 
     app_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION); 

    win.configure_event.connect((event) => { 
     try { 
      // Replace this with your desired calculation of the base font size 
      var target_size = (double) event.height/600.0 * 12.0; 
      var css = WINDOW_CSS_TEMPLATE.printf(target_size); 
      win_provider.load_from_data(css, -1); 
     } catch (Error e) { 
      Process.exit(1); 
     } 
     return Gdk.EVENT_PROPAGATE; 
    }); 

    win.show_all(); 
    Gtk.main(); 
} 

Это заботится только о высоте окна, так что вы получите unreadably крошечную метку при изменении размеров окна, чтобы быть гораздо шире, чем это высоко, но вы можете подключить любые вычисления для вас.

Answer 2

Вы должны установить

font-size: 5% 

в файле CSS