In title bar, Ñ, Ằ, ขึ้น and similar diacriticals are clipped in Linux

Contribute Feature
30

You can either

  1. make the container bigger (padding, line-height, other things of that nature)
  2. allow the letters to ignore the container dimensions with overflow

or

  1. make the letters smaller.

Out of those three, making the letters smaller is the easiest to implement, so let’s start there.

Try this first and if does not work for you I can try something else,

#topic-title h1 a,
.extra-info-wrapper .topic-link span {
    font-size: 90%;
}

And what that will do is make this (header title) go from ~21px to ~19px the font is still very legible and the diacritics are fixed - at least the ones I tested - like so:

before

Capture
Capture1071×118 11.8 KB

after

Capture2
Capture21064×119 11.5 KB

And the same CSS from above will also fix the topic tittle diacritics in the same manner.

So you go from clipped diacritics and a font size of ~24.5px to fixed diacritics and a font size of ~22px or this:

before

Capture3
Capture31160×128 9.29 KB

after

Capture4
Capture41176×129 8.98 KB

As far as I checked, this is not needed on mobile, but that might be to the limited varieties I’ve tested vs all the possibilities out there. Also, 90% is adjustable, if you happen to use a language that has extra, extra long letterboxes it can go down to 88% or even 86% and the font is still legible.

Try it and let me know if the problem still persists. Like I said, this is the easiest of the available options, so if it doesn’t work, we can try something else.

7 Likes