Home / ubuntu / Questions / 1290570
Accepted
kenn
Asked: 2020-11-09 01:28:27 +0800 CST

mate-panel clock applet non monospace font causes wiggling in notification area

  • 772

I'm running Ubuntu 20.04 mate desktop. I am customizing the mate-panel. I wanted to use the following digital font and I added the following style to ~/.config/gtk-3.0/gtk.css

#clock-applet-button.flat.toggle > box.horizontal > label {
    font-weight: normal;
    color: white;
    font-family: DS-Digital;
    font-weight: bold;
    font-size: 18px;
    /*padding-right: 10px;
    padding-left: 10px; */
    /*letter-spacing: 3px;*/
    /*margin: 8px; 
    margin-left: 14px;
    margin-right: 14px;*/
    padding: 0 15px 0 15px;
    font-stretch: ultra-condensed;
    outline-offset: 100px;
    background-color: red;
    /*border-left-width: 50px;
    border-right-width: 50px;*/
    /*outline-width: 20px;*/     
}

It's wiggling when numbers condensed, for example its width changes when clock digits counts from 00 to 01

I recorded it enter image description here

I tried adding margins, padding but they didn't work. Is there a trick to fix it using gtk css?

fonts css gtk3 mate

1 Answers

  1. Best Answer

    The property you are looking for is

    min-width: value

    This will stop the box from going below a set value in width.

    Here you can see the documentation, box properties can be found in table 7.

    To address your issue with the numbers still resizing, this is related to the font you chose. In the link you give you can see the number 1 is only half the width of the other numbers.

    To edit the .ttf file of a font you can use some thing like fontforge from the repos, it should be a simple task.

    sudo apt install fontforge
    • 4