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.
Cerrando esto porque se solucionó hace bastante tiempo. Había algunos otros problemas de recorte causados por overflow: hidden y esa solución también resolvió este caso.
El overflow sigue oculto, pero se movió y se añadió algo de relleno, lo que le da al texto un poco más de espacio en casos donde se desborda naturalmente un poco.
Queremos ocultar el desbordamiento, así que la mejor solución que he encontrado hasta ahora fue añadir una combinación de “relleno positivo, margen negativo” en el eje X para darle un poco de espacio. Pero es un poco truculento. @awesomerobot?
El título de la página sin hacer scroll fue una solución sencilla. Ese título puede envolver en varias líneas, por lo que el overflow solo estaba allí para evitar que palabras largas sin espacios rompan el ancho. Eliminar el overflow y agregar overflow-wrap: break-word; hará que las palabras se rompan cuando no haya suficiente espacio.
Cuando el título se fija al encabezado al hacer scroll, usamos overflow: hidden junto con text-overflow: ellipsis para truncar títulos que son más largos que una línea… no podemos eliminar el overflow tan fácilmente allí, así que agregué algo de relleno y re-alineé a la izquierda con un margen negativo. No es el CSS más bonito, pero funciona.
Un poco más de detalle sobre por qué ocurre esto. Dentro de una fuente existe el concepto de caja em (también llamada cuadrícula em). Estas cajas tienen el mismo tamaño para cada carácter y sirven como base para escalar, ajustar la altura de línea, el espaciado entre letras, etc.
Los caracteres pueden extenderse fuera de la caja em en cualquier dirección… a veces es necesario para ciertos caracteres, a veces es simplemente lo que el diseñador de la fuente quiso hacer. En el navegador no hay forma de saber que existe este contenido desbordado, por lo que no se puede hacer nada para tenerlo en cuenta dinámicamente.
Por lo que sé, las únicas opciones son evitar el desbordamiento en el texto cuando sea posible o agregar un poco de relleno adicional cuando no se pueda.
