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
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.
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.
Fechando isso porque foi corrigido há bastante tempo. Havia alguns outros problemas de recorte causados por overflow: hidden e essa correção também resolveu isso.
O overflow continua oculto, mas foi movido e foi adicionado algum padding, o que dá ao texto um pouco mais de espaço em casos em que ele naturalmente transborda um pouco.
Queremos ocultar o overflow, então a melhor solução que encontrei até agora foi adicionar uma combinação de “padding positivo, margem negativa” no eixo X para dar um espaço de respiro. Mas isso é um pouco hacky. @awesomerobot?
O título da página sem rolagem foi uma correção simples. Esse título pode quebrar em várias linhas, então o overflow estava lá apenas para evitar que palavras longas sem quebra desconfigurassem a largura. Remover o overflow e adicionar overflow-wrap: break-word; fará com que as palavras sejam quebradas quando não houver espaço suficiente.
Quando o título se fixa ao cabeçalho durante a rolagem, usamos overflow: hidden junto com text-overflow: ellipsis para truncar títulos maiores que uma linha… não podemos remover o overflow tão facilmente ali, então adicionei um pouco de padding e realinhei à esquerda com uma margem negativa. Não é o CSS mais bonito, mas funciona.
Um pouco mais de detalhes sobre por que isso acontece. Dentro de uma fonte, existe o conceito de uma caixa em (também chamada de quadrado em). Essas caixas têm o mesmo tamanho para cada caractere e servem como base para dimensionamento, ajuste de altura de linha, espaçamento entre letras, etc.
Os caracteres podem se estender para fora da caixa em em qualquer direção… às vezes é necessário para certos caracteres, outras vezes é apenas o que o designer da fonte quis fazer. No navegador, não há como detectar que esse conteúdo com overflow existe, então nada pode ser feito para levar isso em conta dinamicamente.
Pelo que sei, as únicas opções são evitar overflow em textos quando possível ou adicionar um pouco de padding extra quando não for possível.
