投稿で左端の文字が切り取られる問題

I hope none of you recognize me from my last bug report, I have a history of noticing stupid details…

I just noticed that letters are getting cut off to the leftmost in posts. At first I thought I was going crazy, but upon closer inspection it turned out I was somewhat sane.

Have a look at these two letters:

A A

Notice that the left leg of the first A is not quite as thick at the bottom as the left leg of the second? I won’t blame you if you don’t. Here’s a closeup (images captured on the forum of which I am a member):

image image

Now, this is even more noticable if you have a theme with white text
image

This is so frustrating now that I know it’s there. Hopefully someone clever will be equally frustrated and have a look at it.

The rest of the letters, if you want to have a look at them

A A
B B
C C
D D
E E
F F
G G
H H
I I
J J
K K
L L
M M
N N
O O
P P
Q Q
R R
S S
T T
U U
V V
W W
X X
Y Y
Z Z

「いいね!」 7

Do you see that problem here on or try.discourse.org? Do you see it on that site if you use example.com/safe-mode?

「いいね!」 1

Yep, same thing on here. As you see below it is consistent on all pages. The left A is getting cut off by a pixel.

Same comparison here on the meta:

image image

Comparison on try:

image image

Comparison in safe mode:

image image

「いいね!」 4

Good catch, it’s incredibly slight. Looks as though the overflow: hidden; on .cooked is what’s causing it to be cut off, but I’m not entirely sure why the text would be overflowing by 1px to begin with… will investigate.

「いいね!」 12

Sorry to bump this topic, but I found an example which makes it much clearer what is happening

*j j* becomes
j j

「いいね!」 9

Small update on this, I tested it out a little bit more (in Chrome on Windows 10) and it’s definitely an issue that’s more pronounced on Windows specifically… and if you change the width of your browser window sometimes it happens, sometimes it doesn’t. I don’t really see it on my screen in OSX.

Seems like that would have something to do with subpixel rendering… I think the only way to solve that would be to add a small amount of padding to the left side of .cooked or remove the overflow: hidden (it’s there to protect content like images in deeply nested lists from overflowing the post container, but we might be able to apply it only to the nested containers?)

This issue is a little different. When a font is italicized, it overflows outside of its reserved space (and also its parent div) - so it’s getting cut off by our same overflow: hidden rule.

「いいね!」 9

この件は、すでに以前に修正されたためクローズします。overflow: hidden に起因する他のクリッピング問題もいくつかありましたが、その修正によってこの問題も解決しました。

オーバーフローは依然として非表示ですが、位置が変更され、パディングが追加されました。これにより、テキストが自然に少しはみ出る場合でも、若干の余白が確保されるようになりました。

「いいね!」 6

余談ですが、トピックのタイトルにも同様の問題があります。参照:現在の状態(#1)と h1overflow: hidden を含まない例(#2

#1


#2

オーバーフローを非表示にしたいので、現時点で思いついた最善の解決策は、X 軸方向に「プラスのパディングとマイナスのマージン」の組み合わせを追加して余白を持たせることです。ただし、これは少しハック的な手法です。@awesomerobot さん、どうでしょうか?

「いいね!」 7

スクロール前のページタイトルは、単純な修正でした。そのタイトルは複数行に折り返されるため、オーバーフローは長い単語が幅を壊さないようにするためだけに存在していました。オーバーフローを削除し、overflow-wrap: break-word; を追加することで、スペースが足りない場合に単語を折り返すことができます。

タイトルがスクロール時にヘッダーにドッキングする際には、1 行を超えるタイトルを切り詰めるために overflow: hiddentext-overflow: ellipsis を併用しています。そこではオーバーフローを簡単に削除できないため、パディングを追加し、負のマージンで左に再配置しました。CSS としてはあまり綺麗ではありませんが、機能します。

https://github.com/discourse/discourse/commit/89f6ff1574d15c9d654472f9cd3536d6da833182


なぜこれが起こるのか、もう少し詳しく説明します。フォント内には「em ボックス」(em スクエアとも呼ばれる)という概念があります。これらのボックスは各文字で同じサイズであり、スケーリング、行の高さ調整、文字間隔の調整などの基準として機能します。

文字は em ボックスのどの方向にもはみ出すことがあります。これは特定の文字にとって必要な場合もあれば、単にフォントデザイナーがそうしたいと考えた場合もあります。ブラウザ側では、このオーバーフローしたコンテンツが存在することを検知する方法がないため、動的に対応することはできません。

私の知る限り、可能な選択肢は、可能であればテキストのオーバーフローを避けるか、避けられない場合は少し余分なパディングを追加することだけです。

「いいね!」 6