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.
تم إغلاق هذه المشكلة لأنها تم حلها منذ فترة طويلة. كانت هناك بعض مشاكل التداخل الأخرى الناتجة عن overflow: hidden، وقد حل هذا الإصلاح تلك المشكلة أيضًا.
لا يزال التدفق مخفيًا، لكنه تم نقله وتمت إضافة بعض الحشو، مما يمنح النص مساحة إضافية قليلاً في الحالات التي يتجاوز فيها النص حدوده بشكل طبيعي قليلاً.
نريد إخفاء التدفق الزائد، لذا أفضل حل توصلت إليه حتى الآن هو إضافة مجموعة من “حشوة إيجابية، هامش سلبي” على المحور السيني لمنحه مساحة للتنفس. لكن هذا حل غير أنيق بعض الشيء. @awesomerobot؟
كان عنوان الصفحة قبل التمرير إصلاحًا مباشرًا. يمكن أن ينحني هذا العنوان إلى سطور متعددة، لذا كان التدفق الزائد موجودًا فقط لمنع الكلمات الطويلة غير المقسمة من كسر العرض. إزالة التدفق الزائد وإضافة overflow-wrap: break-word; سيقوم بكسر الكلمات عندما لا يكون هناك مساحة كافية.
عندما يرسو العنوان في الرأس أثناء التمرير، نستخدم overflow: hidden مع text-overflow: ellipsis لاختصار العناوين التي تزيد عن سطر واحد… لا يمكننا إزالة التدفق الزائد هناك بسهولة، لذا أضفت بعض الحشو وأعدت المحاذاة إلى اليسار باستخدام هامش سلبي. ليس هذا تنسيق CSS الأنيق، لكنه يعمل.
تفاصيل أكثر قليلاً عن لماذا يحدث هذا. داخل الخط، يوجد مفهوم مربع الإيم (يُسمى أيضًا مربع الإيم). هذه المربعات لها نفس الحجم لكل حرف وتُستخدم كأساس للتوسع، وتعديل ارتفاع السطر، والمسافة بين الحروف، وما إلى ذلك.
يمكن أن تمتد الأحرف خارج مربع الإيم في أي اتجاه… أحيانًا يكون ذلك ضروريًا لبعض الأحرف، وأحيانًا يكون مجرد ما أراد مصمم الخط فعله. في المتصفح، لا توجد طريقة لمعرفة وجود محتوى زائد عن الحد، لذا لا يمكن فعل أي شيء لحساب ذلك ديناميكيًا.
حسب علمي، الخيارات الوحيدة هي تجنب التدفق الزائد على النص عندما يكون ذلك ممكنًا، أو إضافة بعض الحشو الإضافي عندما لا يكون ذلك ممكنًا.
