logo Window layout

Page updated March 15, 2011
Page updated August 19, 2022

This pages explains how to get consistent window layout when you write a BaCon GUI application with HUG (Highlevel Universal GUI). You may design a window to look nice on your PC, but on a different PC with different screen DPI (Dots Per Inch) and resolution, and different fonts, the appearance of the application window may have deteriorated.

Changeable factors

There are various factors that can change the appearance of the window:

Xft.dpi You will find this value in /root/.Xresources. In Puppy Linux, EasyOS, and derivatives, it is also set by choosing the 'Desktop' category in the menu, then choose 'Set global font size'. Most Linux distributions have this set to 96. Increasing this causes text to render bigger on the screen.
The physical screen resolution and DPI, plus the resolution that X is set to, also affect how a window appears.
Text will render in a window with the fonts specified in the current GTK theme. If the current theme has a different font than the ones for which the window was designed, then the text may not fit the window properly

GUI applications coded with the GTK library have various ways in which widgets and text are rendered in a window. Broadly, there are two, a "packing" technique that draws each widget one at a time, or an "absolute coordinate" technique -- HUG uses the latter.
With the absolute coordinate layout, each widget is drawn at a fixed x/y position in the window.

Dots Per Inch

The Author's 'proxy-setup' application is used here to illustrate the layout issues and the solutions. Here is part of the main window:


Looks ok, however, if the size of the font is changed, by increasing that Xft.dpi value, or different physical screen, then the window could look like this:


However, there is a simple solution. Peter van Eerten, the creator of BaCon, introduced a DPI specification that automatically takes care of this. Put this line near the beginning of the program:
...where the value of 78 is the Xft.dpi value in /root/.Xresources when the Author designed the GUI. That is, it is the value for which the layout looks correct.

If the DPI value is changed, say increased to 96, instead of getting a messed up window as shown above, the window will automatically scale so as to render the text correctly:



GTK theme font

The same thing as shown above could also happen if a different GTK theme with larger font is chosen. Different users are going to have their own theme preference, but it isn't so good if a theme has bigger font sizes which cause the text window to be messed up.

There is also a simple solution to this. Peter introduced a feature that allows a font to be specified in the program, that overrides the GTK default. This will apply to all widgets. Put this near the beginning of the program:
...with whatever font you want. DejaVu Sans is a good choice, available in most Linux distributions.

If you want to override that global font setting with a per-widget font, use the FONT HUG function. For example, the Author wanted some widgets to be a monospace font:
httpproxy = ENTRY(http_proxy$,280,20)
ATTACH(mainwin, httpproxy, 120, 100)
FONT(httpproxy,"Monospace 13")
...so, this text-entry box will display with a monospaced font.

If you want to view the complete 'proxy-setup' application code, here it is with HTML colour syntax highlighting:


And here is the actual file:


Copyright Barry Kauler 2011,2022 bkhome.org All rights reserved.
The BaCon logo is
copyright Peter van Eerten, used with permission.