In title bar, Ñ, Ằ, ขึ้น and similar diacriticals are clipped and also when wrapped at the end of long titles Ñ, Ằ, ขึ้น


(sujato) #21

Hence the word “seem”. :wink:

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.


(sujato) #22

So, about that “seem”.

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.


(Mittineague) #23

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


(sujato) #24

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