Letters getting cut off to the leftmost in posts

[Kumirei]

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):

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

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

[pfaffman (Jay Pfaffman)]

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?

[Kumirei]

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:

Comparison on try:

Comparison in safe mode:

[awesomerobot (Kris)]

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.

[Kumirei]

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

*j j* becomes
j j

[awesomerobot (Kris)]

@Kumirei

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):

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?)

@Kumirei

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

*j j* becomes
j j

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.

[awesomerobot (Kris)]

이미 꽤 전에 수정되었으므로 이 이슈를 닫습니다. overflow: hidden으로 인해 발생한 다른 클리핑 문제들이 있었고, 해당 수정이 이 문제도 함께 해결했습니다.

오버플로우가 여전히 숨겨져 있지만, 위치가 이동되었고 일부 패딩이 추가되어, 텍스트가 자연스럽게 약간 오버플로우되는 경우 텍스트에 약간의 여분을 제공합니다.

FIX: topic admin menu was clipped on short posts due to overflow hidden

[cvx (Jarek Radosz)]

참고로, 주제 제목에서도 비슷한 문제가 있습니다. 현재 상태(#1)와 h1에 overflow: hidden이 없는 예시(#2)를 비교해 보세요.

#1

#2

오버플로를 숨기는 것은 원하므로, 지금까지 제가 찾은 최선의 해결책은 X축에 “양수 패딩, 음수 마진” 조합을 적용하여 여백을 확보하는 것이었습니다. 하지만 이 방법은 다소 해킹적인 느낌입니다. @awesomerobot님, 어떻게 생각하시나요?

[awesomerobot (Kris)]

스크롤되지 않은 상태의 페이지 제목은 간단한 수정으로 해결할 수 있었습니다. 해당 제목은 여러 줄로 줄바꿈될 수 있으므로, overflow 속성은 긴 단어가 줄바꿈되지 않아 폭을 깨뜨리는 것을 방지하는 용도로만 사용되었습니다. overflow를 제거하고 overflow-wrap: break-word;를 추가하면 공간이 부족할 때 단어를 잘라줄 수 있습니다.

스크롤 시 제목이 헤더에 도킹되면 한 줄보다 긴 제목을 잘라내기 위해 overflow: hidden과 text-overflow: ellipsis를 함께 사용합니다… 여기서 overflow를 쉽게 제거할 수 없으므로, 일부 패딩을 추가하고 음수 마진으로 왼쪽 정렬을 다시 적용했습니다. 가장 아름다운 CSS는 아니지만, 동작은 합니다.

Prevent topic title from clipping some characters due to overflow

---

이것이 발생하는 _이유_에 대해 조금 더 자세히 설명하겠습니다. 폰트 안에는 em-box(또는 em-square라고도 함)라는 개념이 있습니다. 이 박스는 각 문자마다 동일한 크기를 가지며, 크기 조절, line-height 조정, letter-spacing 등에 사용되는 기준이 됩니다.

문자는 em-box 밖으로 모든 방향으로 확장될 수 있습니다… 어떤 문자에는 이것이 필수적인 경우도 있고, 단순히 폰트 디자이너가 그렇게 하기를 원한 경우도 있습니다. 브라우저에서는 이러한 overflow된 콘텐츠의 존재를 알 수 있는 방법이 없으므로, 이를 동적으로 고려할 수 있는 조치가 없습니다.

제 지식 범위 내에서 가능한 유일한 옵션은 가능한 한 텍스트의 overflow를 피하거나, 피할 수 없는 경우 약간의 추가 패딩을 추가하는 것입니다.