帖子中最左侧的字母被截断

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)与 h1 中未设置 overflow: hidden 的示例(#2)的对比:

#1


#2

我们确实希望隐藏溢出内容,因此目前我能想到的最佳方案是在 X 轴上采用“正内边距 + 负外边距”的组合,为其留出呼吸空间。但这有点取巧。@awesomerobot,你怎么看?

7 个赞

未滚动时的页面标题修复起来很简单。该标题可以换行显示,因此之前设置溢出隐藏只是为了防止长单词因无法换行而撑破宽度。移除溢出设置并添加 overflow-wrap: break-word; 后,当空间不足时单词就会自动换行。

当页面滚动导致标题吸附到页眉时,我们使用 overflow: hidden 配合 text-overflow: ellipsis 来截断超过一行的标题……在这种情况下我们无法轻易移除溢出设置,因此我添加了一些内边距,并通过负边距将其重新左对齐。虽然 CSS 写法不算美观,但确实有效。


再详细说明一下 为什么 会出现这种情况。在字体中,存在“em 框”(也称为 em 方块)的概念。这些框对每个字符大小相同,是缩放、调整行高、字间距等操作的基准。

字符可以向任何方向延伸到 em 框之外……有时这是某些字符所必需的,有时仅仅是字体设计师的有意为之。在浏览器中,无法检测到这种溢出内容的存在,因此无法动态地对其进行适配处理。

据我所知,目前的选项只有:在可能的情况下避免文本溢出,或者在无法避免时添加一些额外的内边距。

6 个赞