As indicated in the previous post, this post will explain the new positioning code in rofi and sizing units.

Positioning Rofi on the monitor

In the new theme format you set these properties on the window widget.

The first, position, determines where rofi is placed on the monitor, the second what point of the rofi window connects there. This sounds complicated, but it ain’t.

position setting

The position setting determines the place of the window on the monitor.

The position setting supports the following values:

• north
• northeast
• northwest
• south
• southeast
• southwest
• east
• west
• center

This is depicted in the diagram below:

anchor setting

The anchor sets what point of the rofi window is placed at the specified position.

The anchor settings supports the same values as the position setting.

If you want the middle of the rofi window to be always located at the center of the monitor set both position and anchor to center.

If the rofi window resizes, its center will stay at the center. If you set the anchor to north the top of the rofi window is at the center of the monitor, and the window will grow down.

If you set the anchor and position to south, rofi is located at the bottom center and the window grows up.

Note that if you set the anchor to south and the position to north the rofi window will be placed above the monitor and might not be visible.

In another blog post we will explain how the dynamic sizing behaviour of rofi can be tweaked or disabled.

So the following theme setting will place the top of the rofi window in the center of the monitor:

#window {
    position: center;
    anchor: north;
}

As depicted here, RED is the position (center of screen), GREEN is the position on rofi window (north):

Quick hint, if you want to quickly test out changes to the theme, without editing the file, run rofi like:

rofi -show run -theme-str "#window { position: center; anchor: north;}"

Sizing units

Rofi supports three different sizing units:

• px: Screen pixels.
• em: Relative to text width.
• % : Percentage of the monitor size.

Screen Pixel

Screen pixels is pretty straight forward. You can specify the size in points. If you do not specify a unit in the theme, it will always assume it is in pixels.

px should always be specified in whole numbers, f.e. 10px.

EM: Relative to text width

This one is a bit more tricky, it tries to size it relative to the font width. Currently em is linked to the font specified on the window.

This works really well when you have theme used on monitors with different DPI settings.

em can be specified as a fraction, so 0.1em is valid.

Note, While it is possible to set different fonts on different GUI elements. (This will be discussed in future blog posts.) However to keep things simple, it is always related the font specified on the window.

%: Percentage off the monitor size.

The % indicates a percentage of the monitor size. If the size is used horizontal, it is a percentage of the monitor width, if the size is used vertically, it is percentage of the height of the monitor. This is very useful for fullscreen themes. You can have a nice 10% margin around the edges. It will nice adjust to the different monitors and ratios.

% can be specified as a fraction, so 10.5% is valid.

If you specify: margin: 10% on a 1920x1080 monitor, this means margin of 192 pixels left and right, and 108 top and bottom.

Example

#window {
    margin: 10%;
}
#window mainbox box {
    spacing: 0.3em;   
}
#window mainbox listview element {
    padding: 3px;
    border-radius: 4px;
}