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.
Chiudo questa issue perché è stata risolta parecchio tempo fa. C’erano altri problemi di clipping causati da overflow: hidden e quella correzione ha risolto anche questo.
L’overflow rimane nascosto, ma è stato spostato e aggiunto un po’ di padding, il che dà al testo un po’ di spazio extra nei casi in cui naturalmente trabocca leggermente.
Vogliamo nascondere l’overflow, quindi la migliore soluzione che ho trovato finora è stata aggiungere una combinazione di “padding positivo, margine negativo” sull’asse X per dargli un po’ di respiro. Ma è un po’ una soluzione di ripiego. @awesomerobot?
Il titolo della pagina non scorrevole era una correzione semplice. Quel titolo può andare a capo su più righe, quindi l’overflow era presente solo per evitare che parole lunghe senza spazi spezzassero la larghezza. Rimuovendo l’overflow e aggiungendo overflow-wrap: break-word;, le parole verranno interrotte quando non c’è abbastanza spazio.
Quando il titolo si aggancia all’intestazione durante lo scorrimento, utilizziamo overflow: hidden insieme a text-overflow: ellipsis per troncare i titoli più lunghi di una riga… non possiamo rimuovere l’overflow così facilmente in quel caso, quindi ho aggiunto un po’ di padding e riallineato a sinistra con un margine negativo. Non è il CSS più elegante, ma funziona.
Un po’ più di dettagli sul perché questo accade. All’interno di un font esiste il concetto di em-box (chiamata anche em-square). Queste box hanno la stessa dimensione per ogni carattere e servono come base per il ridimensionamento, l’aggiustamento dell’altezza di riga, la spaziatura delle lettere, ecc.
I caratteri possono estendersi oltre l’em-box in qualsiasi direzione… a volte è necessario per certi caratteri, altre volte è semplicemente ciò che il progettista del font ha voluto fare. Nel browser non c’è modo di rilevare l’esistenza di questo contenuto in overflow, quindi non è possibile fare nulla per tenerne conto dinamicamente.
Per quanto ne sappia, le uniche opzioni sono evitare l’overflow sul testo quando possibile o aggiungere un po’ di padding aggiuntivo quando non si può.
