Tweaking the CSS stylesheet

I totally agree ! And I really appreciate your work. What I said is just a proposal resulting from the experiences I made the last days. I just modified to 0.9em and the result was a UI totally messed up. I had some previous experience using CSS, but last time I used it is some years ago. So I had to (re)learn and remember a lot of things. My fear is that users with less pre-experience on CSS will be massive confused if they get a totally messed up UI by just changing one single parameter : what the f… is this !? … and will quickly give up. Therefore I shared my experiences here. Another article about the discussion on using rem or em, and the pros and cons, can be found on REM vs EM – The Great Debate | Zell Liew .

Thank you, and please contiunue your great job !

1 Like

And thanks for sharing that. Most users will not change CSS and default CSS works great on many systems (seems that systems with Gtk+ 3.22 have some font glitches). So this problem is quite minor I think. Anyway, that doesn’t mean of course this can’t be improved. Maybe, use rem will help solve some glitches (or not).

On my monitor the “darktable-elegant-grey” style shows reddish artefacts in small fonts e.g. within the filmic box (see the “middle grey luminance” text below):

crop_1

As the standard darktable font works fine I copied “darktable-elegant-grey.css” and “darktable.css” to my personal themes- folder. I then renamed “darktable-elegant-grey.css” to “darktable-grey.css”. In “darktable-grey.css” I changed line 21:

OLD: @import url(“darktable-elegant-dark.css”);
NEW: @import url(“darktable.css”);

“darktable-grey” now uses the standard font with grey settings:

crop_2

Not as elegant :wink: but ok for me.

Greets,
Jürgen

This is probably the way your system is set to render fonts… The equivalent of clear type needs to be applied, but I don’t remember what it is called off the top of my head.

And that’s not as elegant as we make it. So it’s the way your OS render it that’s not good. Which following ones do you have ?

  • OS release ?
  • Gtk version used ?
  • If on Linux, which desktop environment ?
  • Default OS font and font size ?

And could you test by using darktable-elegant-grey.css (default one so your OLD line) and change on darktable.css theme line 163 from 1.0em to 1.0rem ? And post here what that renders ?

Hi, my OS is Win10, editing line 163 does not change anything. I have to apologize, but don´t have any clue which GTK is used. How can I find that ?

May be it is simply the res of my monitor that´s not sufficient for this font (1680 x 1050 ).

Greets
Jürgen

Don’t care about Gtk version if you are on Windows. I don’t use Windows so can’t help more here.
Thanks for testing change on line 163. I was quite sure that will not change anything but in case of…

I had a similar problem years ago (2013 I think) on an old windows xp system. There were settings (about settings -> screen settings -> advanced or similar) to tweak the way fonts are rendered and how anti aliasing should be applied (or not). I have a dim reminder that this improved the situation a bit, but the result was not satisfying. I remember that I had to install a third party tool (don’t remember the name, too long ago) which allowed further tweakings (for example the algorithm used for anti aliasing) and this helped more.
I moved to linux some month later (best decision of my life… :smile: ). So unfortunately I can’t tell you how to tweak this parameters in Windows 10. But I’m quite shure there are settings for this. Use a search engine to search for keywords like fonts rendering anti aliasing ClearType… You will get numerous results which can help you along.
Sorry, that’s not very precise, but as already stated before, I’m not using windows anymore.

1 Like

Thanks @Nilvus and @pehar for your replies! I think I can live with the standard font:

Just a thing about those using darktable on KDE. I’ve just read that from the last KDE Plasma 5.18 LTS release : “GTK application fonts and icons now respect your Plasma settings for improved visual integration.”

That’s just confirm that KDE doesn’t render correctly fonts for Gtk apps (so darktable) on previous 5.18 release. So that should be better with that last release. Most of the times of what I see when helping KDE users to have better font rendering was to adjust anti-aliasing options (for some cases I see, it’s quite similar for Windows).

dt 3.1.0+1383
Several changes have been implemented in the sylesheets during the last weeks. I did some tweeks to make the components of the sidebars smaller. At one point I’m struggeling : I want to shrink the font-size of the labels of the bauhaus-sliders (shown in green in the screenshot).

bauhaus-slider
I have found no way so far to do so. Which property has to be changed in the CSS stylesheet ? Or is it impossible to tweek this labels independent of the other parts of the sliders because they are hardcoded as part of the sliders ?

The following seems to work for me

#iop-plugin-ui
{
  font-size: 0.7em;
}

If you can work out how to run it, GTK+ Inspector is a useful tool for working out how to identify individual UI elements.

1 Like

Thank you very much, #iop-plugin-ui was the component I was looking for. With font-size: 0.9em everything is well balanced now.
I heard about GTKInspector before, but I was not aware that it is already installed. I only had to activate it (enabling keybindings for DEBUG mode). Very useful tool to identify UI items and their hierarchie. Thanks again for this tip and your support.

1 Like

If you haven’t spotted it the latest master has a new option in the ‘general’ section of the preferences dialog where you can key small CSS tweaks, allowing you to still use a core darktable theme without having to set up your own. That’s what I used to test the suggestion above.

Yes, I realized that the preferences section has been revised completely. And I did some tests with the new tab for the CSS tweaks. But my interventions go deeper, so I created my own styles darktable-small.css and darktable-elegant-grey-small in ~.config/darktable/themes based on the original files.
In the new preferences TAB is a button save theme tweaks. Where are the tweaks saved ? In darktablerc ?

They’re saved in user.css in the same directory as darktablerc.

Aaah, I see. Wouldn’t it be more consistent to put this file into ~.config/darktable/themes where all the other personal stylesheets are located ?

No - it’s not complete so it shouldn’t be selectable as a theme. It’s applied in addition to the selected theme. Its main purpose is small tweaks (the sort of things that used to be items within the preferences window itself). For example I use it to decrease the margin around images in the lighttable view.

But tomorrow I could choose to switch to another theme and my own tweaks would not be lost.

Resurrecting the old theme…
I also have annoying reddish artifacts on DT fonts as @pass712 pointed out, especially on thin vertical glyphs. Most other apps render fonts significantly better. One of my guesses is that truetype’s lcd filter has hard times trying to remove artifacts when text is white on gray, or I’ve something misconfigured (or both).
Fiddling with this I realized that I’ve no idea how DT renders the fonts, because there are plenty of rendering engines on Linux: Pango, Cairo, Xft from dino’s age, Splash, you name it. Gtk has it’s own rendering (I belive still based on Xft), all of which have different ability for rendering fonts, especially for lcd filtering. As far as I have full control over how fonts are rendered on my system (within the boundaries freetype sets, of course), I wander If I can improve it somehow. So far I’m just using Iosevka Fixed font family that is less prone to exhibit artifacts. Which is not a solution, thought.
I also notices some weird things that puzzled me further.

  1. On some letters the red stripes appear on both sides of vertical lines, what is something I don’t understand: as far as I understand subpixel rendering, it may show up only on the left (assuming r,g,b subpixel ordering), the other side should be blue))) Which makes me think that something is probably wrong with my truetype setup.
  2. When I took a screenshot to post it here, saved it in .png and zoomed, I did not see any color cast, i.e. the color cast seem to exist only on the screen, but not in rendered bitmap. What makes me suspect that my monitor may be involved somehow. I did not find any “improvers” I can switch off except the sharpness slider.

Currently my font rendering set up to use infinality ultimate mode, which is maybe not the best idea since v40 hinting mode is available. Any suggestions?
P.S. And please, if somebody is aware what stack DT uses to render fonts, share your wisdom. Just to direct my further digging…

What font are you using?