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

**URL:** https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303
**Category:** Feature
**Created:** [2 augustus 2017 om 10:01 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303 "2017-08-02T10:01:48Z")
**Posts on this page:** 11
**Page:** 2

<div class="post-metadata">

### Author: ![sujato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sujato/32/114616_2.png) [@sujato](https://meta.discourse.org/u/sujato)
#### Post date: [12 augustus 2017 om 12:11 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/21 "2017-08-12T12:11:00Z")

</div>

> [@gerhard](#):
>
> I wouldn’t go so far

Hence the word “seem”. 😉

I just changed the title again to test another case, when the title is wrapped. This only happens in the regular view, not when it’s in the title bar. For me, the clipping does not occur on the wrapped lines, only on the first line. So that’s good.

For more general usage, though, extra line height is required for tall scripts, as the diacriticals can not only disappear, but also clash. As a more long term idea, perhaps a theme or option for tall scripts would be useful, and show an interest in reaching out to people who don’t use Roman scripts. It would take careful testing through the whole interface, though.

---

<div class="post-metadata">

### Author: ![sujato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sujato/32/114616_2.png) [@sujato](https://meta.discourse.org/u/sujato)
#### Post date: [15 augustus 2017 om 00:44 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/22 "2017-08-15T00:44:06Z")

</div>

> [@sujato](#):
>
> It doesn’t seem to create any problems.

So, about that “seem”.

 ![Screenshot from 2017-08-15 07-25-44](https://global.discourse-cdn.com/meta/original/3X/0/c/0c5ccec05c2beb254e9daaf2e14e601cca260b9c.png)

Now we know what `overflow:hidden` was for, so that’s a plus!

Anyway, the problem remains: using `line-height: 1.1em` and `overflow:hidden` you’re essentially instructing the browser to clip tall diacriticals. Using `overflow:visible` to overcome this is a hack; the correct way is to set a suitable line-height.

I realized that my own understanding of this issue was lacking, so for my own edification i put together a little file to test this issue. Hopefully it might be of use to others.

I just used a few texts that I happened to have to hand, so this is by no means authoritative. This sample includes Thai, Myanmar, Sinhala, Devanagari, Tibetan, Tamil, Arabic, and Vietnamese.

While there will be some difference across browser and OS, I think the biggest source of variation is in the fonts. They handle these issues very differently, so to be confident, you’d have to use @font-face.

In the cases I have tested, all of these scripts display clipping problems at a line height of 1.1. Setting line-height to a minimum of 1.6 solves this.

Note that using Noto Sans, there is clipping even of the standard Roman descenders at line-height of 1.1.

[Here is the HTML file for testing.](https://discourse.suttacentral.net/uploads/default/original/2X/f/f337a93169bdd8c26248f15e18d8fa486544ee83.zip)

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [15 augustus 2017 om 02:57 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/23 "2017-08-15T02:57:03Z")

</div>

In addition to trying `overflow` have you tried `overflow-y: visible` ?

There would still be the potential for “escaping the container” problems but it might work OK

---

<div class="post-metadata">

### Author: ![sujato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sujato/32/114616_2.png) [@sujato](https://meta.discourse.org/u/sujato)
#### Post date: [15 augustus 2017 om 03:35 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/24 "2017-08-15T03:35:18Z")

</div>

Thanks for the tip. This works, except it adds a nice little scrollbar to the right of the title (at least in Chrome). :sadpanda:

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [12 april 2018 om 08:05 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/25 "2018-04-12T08:05:37Z")

</div>

Are you still seeing this today @sujato?

---

<div class="post-metadata">

### Author: ![sujato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sujato/32/114616_2.png) [@sujato](https://meta.discourse.org/u/sujato)
#### Post date: [13 april 2018 om 00:38 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/26 "2018-04-13T00:38:36Z")

</div>

Yep, still the same. But thanks for asking!

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [13 april 2018 om 03:57 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/27 "2018-04-13T03:57:44Z")

</div>

Sorry, it’s been hard to prioritize this since it is no-repro outside of Linux on the desktop. If you could repro on Windows or Mac that’d help.

---

<div class="post-metadata">

### Author: ![sujato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sujato/32/114616_2.png) [@sujato](https://meta.discourse.org/u/sujato)
#### Post date: [13 april 2018 om 07:13 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/28 "2018-04-13T07:13:39Z")

</div>

No worries, I’m happy to see it getting some attention again.

The problem was already reproduced in the thread above, in Mac:

> [@In title bar, Ñ, Ằ, ขึ้น and similar diacriticals are clipped in Linux](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/4):
>
> Just to be complete, here are the characters unclipped: Ñ, Ằ, ขึ้น This is how it renders for me (Safari, Mac) [29] Compared to the screenshot, they indeed have more ‘stuff’ above the characters.

And Windows:

> [@In title bar, Ñ, Ằ, ขึ้น and similar diacriticals are clipped in Linux](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/12):
>
> That’s strange. I see a difference on Windows 10 and Chrome 60. Without overflow: visible: [image] With overflow: visible: [image] But, yeah, there’s no reason for hysteria wink

I also had a friend send me some screenshots of different browsers on Windows 10, in Chrome:

 ![Screenshot%20(5)](https://global.discourse-cdn.com/meta/original/3X/a/3/a31b7ebb30f0f2ecb92f1aa6a6bc9e9116c06c71.png)

 ![Screenshot%20(6)](https://global.discourse-cdn.com/meta/original/3X/6/d/6d013b92399f62dd918c62f4aa81ce192d20cd32.png)

Firefox:

 ![Screenshot%20(3)](https://global.discourse-cdn.com/meta/original/3X/e/6/e693720a5cb721322e24ddd02ffa04eaff57bb9c.png)

 ![Screenshot%20(4)](https://global.discourse-cdn.com/meta/original/3X/9/b/9be4c22ce9364e0528d8cb19a3c3211d4cbce28e.png)

and Edge:

 ![Screenshot%20(1)](https://global.discourse-cdn.com/meta/original/3X/a/2/a2d8748d0d8dfae04735a45db1d89a6a145e1d13.png)

 ![Screenshot%20(2)](https://global.discourse-cdn.com/meta/original/3X/d/8/d840f19ad1aa0ac233510ad6c53b5334e94fb1e6.png)

As you can see, they pretty much all suffer the clipping problem, both in the title bar and in the uncontracted thread heading. The only exception is the thread heading on Edge.

And just to let you know, despite the suggestions by several kind people in the thread, I was never able to find a satisfactory CSS solution.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [13 april 2018 om 07:55 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/29 "2018-04-13T07:55:55Z")

</div>

Hmm, I wonder if @lll could assist? There should be a CSS solution possible.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [14 april 2018 om 03:38 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/30 "2018-04-14T03:38:07Z")

</div>

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,

```plaintext
#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](https://global.discourse-cdn.com/meta/original/3X/7/3/738ed038f7f30b4345d13f93f3fc1c415380266e.PNG)

**after**

 ![Capture2](https://global.discourse-cdn.com/meta/original/3X/e/5/e5681a8c430d4bf72c2f0510f07fd4b096bce5cf.PNG)

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](https://global.discourse-cdn.com/meta/original/3X/6/6/6655998bcba3cd5eccde9681b483198bd34da35f.PNG)

**after**

 ![Capture4](https://global.discourse-cdn.com/meta/original/3X/e/d/edbf1ca547d80b7457acb465fcfb428bbea01e65.PNG)

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.

---

<div class="post-metadata">

### Author: ![sujato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sujato/32/114616_2.png) [@sujato](https://meta.discourse.org/u/sujato)
#### Post date: [14 april 2018 om 05:50 UTC](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303/31 "2018-04-14T05:50:29Z")

</div>

Cheers, thanks, that works! The simplest solution wins again.

[Previous page](https://meta.discourse.org/t/in-title-bar-n-and-similar-diacriticals-are-clipped-in-linux/67303.md?page=1)
