# Letters getting cut off to the leftmost in posts
**URL:** https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681
**Category:** UX
**Created:** [27 februari 2018 om 17:30 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681 "2018-02-27T17:30:25Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Kumirei](https://meta.discourse.org/u/Kumirei)
#### Post date: [27 februari 2018 om 17:30 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/1 "2018-02-27T17:30:25Z")
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
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [27 februari 2018 om 17:34 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/3 "2018-02-27T17:34:53Z")
Do you see that problem here on or [try.discourse.org](http://try.discourse.org)? Do you see it on that site if you use [example.com/safe-mode](http://example.com/safe-mode)?
---
### Author:  [@Kumirei](https://meta.discourse.org/u/Kumirei)
#### Post date: [27 februari 2018 om 17:44 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/4 "2018-02-27T17:44:04Z")
Yep, same thing on here. As you see below it is consistent on all pages. The left A is getting cut off by a pixel.
Same comparison here on the meta:
 
Comparison on try:
 
Comparison in [safe mode](https://meta.discourse.org/t/53504?silent=true):
 
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27 februari 2018 om 18:25 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/5 "2018-02-27T18:25:31Z")
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.
---
### Author:  [@Kumirei](https://meta.discourse.org/u/Kumirei)
#### Post date: [7 maart 2018 om 17:40 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/6 "2018-03-07T17:40:42Z")
Sorry to bump this topic, but I found an example which makes it much clearer what is happening
`*j j*` becomes
_j j_
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [6 juni 2018 om 18:08 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/8 "2018-06-06T18:08:41Z")
> [@Kumirei](#):
>
> 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):
>
>  
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?)
> [@Kumirei](#):
>
> Sorry to bump this topic, but I found an example which makes it much clearer what is happening
>
> `*j j*` becomes
> _j j_
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.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [6 mei 2020 om 22:26 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/9 "2020-05-06T22:26:14Z")
Closing this out because it was fixed quite a while ago. There were some other clipping issues cause by `overflow: hidden` and that fix also solved this.
Overflow is still hidden, but it was moved and some padding was added, which gives text a little extra space in cases where it naturally overflows a little bit.
[https://github.com/discourse/discourse/commit/fa21b398755ccf3c523d0e0262567dbdc510de05](https://github.com/discourse/discourse/commit/fa21b398755ccf3c523d0e0262567dbdc510de05)
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [6 mei 2020 om 22:26 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/10 "2020-05-06T22:26:18Z")
---
### Author:  [@cvx](https://meta.discourse.org/u/cvx)
#### Post date: [7 mei 2020 om 18:26 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/12 "2020-05-07T18:26:32Z")
Btw. we have a similar issue with topic title. See: current (#1) vs an example without `overflow: hidden` in `h1` (#2)
#1
#2 
We do want to hide the overflow, so the best solution I had so far was to add a “positive padding, negative margin” combo on the X axis to give it a breathing room. But that’s a bit hacky. @awesomerobot?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [8 juli 2020 om 03:09 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/14 "2020-07-08T03:09:43Z")
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [27 juli 2020 om 21:53 UTC](https://meta.discourse.org/t/letters-getting-cut-off-to-the-leftmost-in-posts/81681/15 "2020-07-27T21:53:31Z")
The un-scrolled page title was a straightforward fix. That title can wrap to multiple lines, so overflow was only there to prevent long unborken words from breaking the width. Removing the overflow and adding `overflow-wrap: break-word;` will break words when there isn’t enough space.
When the title docks to the header on scroll we use `overflow: hidden` along with `text-overflow: ellipsis` to truncate titles that are longer than one line… we can’t as easily remove overflow there, so I added some padding and re-align to the left with a negative margin. Not the prettiest CSS, but it works.
[https://github.com/discourse/discourse/commit/89f6ff1574d15c9d654472f9cd3536d6da833182](https://github.com/discourse/discourse/commit/89f6ff1574d15c9d654472f9cd3536d6da833182)
* * *
A little more detail on _why_ this happens. Within a font there’s the concept of an em-box (also called an em-square). These boxes are the same size for each character and it serves as the base used for scaling, adjusting line-height, letter-spacing, etc.
Characters can extend outside of the em-box in any direction… sometimes it’s necessary for certain characters, sometimes it’s just what the font designer wanted to do. In the browser there’s no way to tell that this oveflowed content exists, so there’s nothing that can be done to account for it dynamically.
As far as I know the only options are to avoid overflow on text when possible or add a little additional padding when you can’t.