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.
Clôture de ce ticket car le problème a été résolu il y a quelque temps. D’autres problèmes de recouvrement étaient causés par overflow: hidden, et cette correction a également résolu celui-ci.
L’overflow reste masqué, mais il a été déplacé et un peu de padding a été ajouté, ce qui offre au texte un peu d’espace supplémentaire dans les cas où il déborde naturellement légèrement.
Nous souhaitons masquer le débordement, donc la meilleure solution que j’ai trouvée jusqu’à présent consiste à ajouter une combinaison de « padding positif, marge négative » sur l’axe X pour lui laisser de la respiration. Mais c’est un peu bidouillé. @awesomerobot ?
Le titre de la page non défilée a été corrigé de manière simple. Ce titre peut se répartir sur plusieurs lignes, donc le débordement n’était présent que pour empêcher les longs mots non coupés de dépasser la largeur. Supprimer le débordement et ajouter overflow-wrap: break-word; permettra de couper les mots lorsqu’il n’y a pas assez d’espace.
Lorsque le titre s’ancre à l’en-tête au défilement, nous utilisons overflow: hidden avec text-overflow: ellipsis pour tronquer les titres plus longs qu’une ligne… nous ne pouvons pas aussi facilement supprimer le débordement ici, j’ai donc ajouté un peu de remplissage et réaligné à gauche avec une marge négative. Ce n’est pas le CSS le plus élégant, mais cela fonctionne.
Un peu plus de détails sur pourquoi cela se produit. Dans une police, il existe le concept de boîte em (aussi appelée carré em). Ces boîtes ont la même taille pour chaque caractère et servent de base pour l’échelle, l’ajustement de la hauteur de ligne, l’espacement des lettres, etc.
Les caractères peuvent dépasser de la boîte em dans n’importe quelle direction… parfois c’est nécessaire pour certains caractères, parfois c’est simplement ce que le concepteur de la police a voulu faire. Dans le navigateur, il n’y a aucun moyen de détecter l’existence de ce contenu débordant, donc rien ne peut être fait pour en tenir compte dynamiquement.
Pour autant que je sache, les seules options sont d’éviter le débordement du texte lorsque c’est possible ou d’ajouter un peu de remplissage supplémentaire lorsque ce n’est pas possible.
