Plasma desktop & HD scaling tutorial

Updated: September 15, 2018

Say you have a small form-factor device with a high-resolution display. Case in point, my Slimbook Pro2 laptop, which comes with fourteen inches of equity and 1920x1080 pixel grid. This means things are rendered rather small, and if you wish to read or interact with the desktop environment and the applications in a meaningful way, you will strain your eyes - unless you're twenty and a developer, in which case you have bionic eyes.

Prompted by this serious ergonomic need, I started fiddling with different options and settings, to see if I could adjust the viewability in KDE, and make the small screen shows things in a slightly enlarged manner. This turned out to be a rather long and non-trivial exercise. In this guide, I will show you how to properly and elegantly scale the KDE desktop, GTK applications (both 2.0 and 3.0 editions), Firefox and Chrome browsers with tips that also apply to all operating systems and use cases, and then some. After me.

Teaser

Scale display

Plasma has a built-in feature to scale the display under its Settings menu. Select the scaling factor, restart the system (or the desktop if you will), and that's it. Only, no. Unfortunately, while the actual operation does work, it does not work well. One, the fonts are rendered with artifacts. Two, Gnome apps do not obey the scaling rules. As I've explained in my Slimbook & Kubuntu article, Plasma does not seem to handle scaling as smoothly as Unity or Gnome.

Scale display

Scaling factor

Bad artifacts

Alternative solution: fonts

Instead of scaling everything, I decided to just increase the font size by two points uniformly across the desktop. This worked better - smooth, clean looks plus well-rendered fonts. However, Gnome (Gtk) apps were still looking small. They were not obeying the changes. I realized that I would need to make custom tweaks for Gnome software. My first guinea pig was GIMP.

Increase font in Gnome programs under KDE

Believe it or not, I found an article from 2004 that showed how to change GIMP UI font size. Essentially, you need to open the ~/.gtkrc file, and edit the font directive gtk-font-name="Something Size". In my case, the font was set to 10 points, but since I've increased the font to 12 points in the desktop, I made the same change here, too.

include "/usr/share/themes/Breeze/gtk-2.0/gtkrc"
style "user-font"
{
font_name="Noto Sans Regular"
}
widget_class "*" style "user-font"
gtk-font-name="Noto Sans Regular 12"
gtk-theme-name="Breeze"
gtk-icon-theme-name="breeze"
gtk-fallback-icon-theme="gnome"
gtk-toolbar-style=GTK_TOOLBAR_ICONS
gtk-menu-images=1
gtk-button-images=1

And the GIMP font size no longer gimps!

GIMP fixed

Some GTK apps still do not scale ...

While the trick above did fix GIMP, it did not fix Gnome Screenshot, or as it turns out, the Software Source utility. This is an element of rather bad implementation. In Kubuntu, I fired up Discover, chose to edit Software Source, and this launched the very Ubuntu, very old-Gnome-Unity utility that you use to manage repos, updates, sources, and alike. The fact this tool is so powerful and yet does not integrate with the new Gnome Software Center or Discover is a sign of bigger problems. And specifically here, it was showing tiny on the full-HD desktop.

Scaling, Software utility not affected by changes

As it turns out, separate tweaks are needed for GTK-2.0 and GTK-3.0 apps. Our earlier change only affected GIMP, but not the other two programs mentioned earlier, as they are based on the newer framework. To that end, we need to open another configuration file ~/.config/gtk-3.0/settings.ini and make the same font change like earlier. Do not ask me why the two Gnome frameworks uses different locations and/or naming conventions, the latter being identical to Windows programs of yore. Anyway, the line to look for, something like:

[Settings]
gtk-font-name=Noto Sans 10
gtk-theme-name=Breeze
...

GTK-3.0 font size fix

To sum it up, we need two separate font tweaks, GTK-2.0 and GTK-3.0 apart. Moreover, the actual scaling is a much more complex thing. In non-Gnome desktops, you can only use full-integer scaling factors for GTK stuff, which means it only works well for big increments, like going from HD to UHD but not in between. This is a separate topic. However, it's another facet of this rather chaotic story.

Firefox

This is another big one. The browser menu, toolbars and address bar were all tiny. The displayed web pages were also small. Luckily, there's a seemingly easy way to render things larger in Firefox.

Firefox, UI too small

I don't know if you can "feel" the small size of UI elements, but it's there.

Go to about:config, and then search for: layout.css.devPixelsPerPx. Change this value from -1 (default) to any scaling factor you like, for instance 1.25. I found this to be a good value for my Slimbook. The improvements are immediate, the pages rendered well, but the menu and the address bar were still small.

Config override

userChrome.css overrides

I realized I would actually need to make Firefox UI overrides. This is done using the userChrome.css file. It does not exist by default, and you will need to create it manually. This file contains CSS declarations, i.e. treats the whole browser UI as one big page. The file is (or will be) located under:

~/.mozilla/firefox/<profile>/chrome/userChrome.css

Replace <profile> with your profile identifier, e.g. 123rfY6.default or similar. You do need some understanding of HTML and CSS to make changes in an effective way. However, if you are terrified, then just copy & paste the declarations below:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#urlbar {font-size: 14px !important;}

Firefox, address bar fix

Notice that the address bar is much bigger than the tab title.

This makes the address bar bigger (14 pixels). Use any value you need. Awesome. The menu is still small. Another piece of code, which you can place just below the snippet from earlier:

menubar, menubutton, menulist, menu, menuitem, textbox, toolbar, tree, tooltip, sidebarheader, statusbar, commonDialog, #abContactsPanel #toButton, #abContactsPanel #bccButton, #abContactsPanel #ccButton { font-size: 14px !important; }

Again, use any size value you like. And there you go, Firefox fixed!

Chrome

Similarly, Chrome looked small. Here, the changes need to be done in the startup phase. In other words, you change the flags with which Chrome starts. In Windows, this means editing the application shortcut. In Plasma, this means editing google-chrome.desktop file under /usr/share/applications. I have already shown you how to use and manipulate these files when we set up WINE shortcuts in the icons-only task manager in Plasma as well as configured multiple versions of the same app in the same manner.

You need to look for the line that reads Exec=. This is the executable line, which starts the browser with optional flags. We need to change the default value from: Exec=/usr/bin/google-chrome-stable %U to:

Exec=/usr/bin/google-chrome-stable --force-device-scale-factor=X %U

Chrome flags

Change X to whichever scaling value suits your eyes. Do note that Chrome may (or will) overwrite your settings on every update. So you will need to do this again occasionally, or keep a backup and just copy it over the desktop file whenever you notice your scaling has been changed back to default.

And we're done here, ladies and gents!

Conclusion

We have a fully working, comfortable Plasma desktop! The one question that remains is, what happens if you use an external monitor? Then, you do lose some of the flexibility that comes with native scaling, but until it's done more elegantly, with fewer artifacts, and also applies to Gtk apps, it's not the best solution around.

The set of workarounds that I've outlined in this article include many desktop- and distro- and system-agnostic tweaks, so they should come handy everywhere. We tried native scaling, and opted for font size increase instead. We also separately tweaked GTK-2.0 and GTK-3.0 app settings. We used CSS tweaks to make Firefox behave and display its UI to our liking. Likewise, we did the same thing with Chrome via a startup flag. Now we have a desktop that's pleasing on the eye and looks good in high-resolution on a small screen. Hopefully, this was a valuable lesson. See you around.

Cheers.

You may also like: