Fixed Single line quotes text getting clipped

This is both font-specific and device-/OS-/font-rendering-approach-specific. This is an example of a case that we can change without a huge visual change (we need 1px bottom padding on the .quote element), but it does show another case that can't be changed without affecting other things. Here, the text is actually being drawn outside the bounding box of the element containing. This can be seen pretty clearly with a lower case "j" at the beginning of the quote block:
If you're on iOS you'll see the first one is cut off. OS X might do the same though I haven't double checked. Windows certainly doesn't. The only way to fix that would be to drop overflow hidden (which we need for other reasons) or to add extra left padding, which would throw off balance. (The overflow hidden is applied on the .quote element for a reason so moving it up a level to the element with padding would achieve a slightly different result.)

Going to call it fixed, but noting that we probably can't prevent this in every case.
 
Back
Top Bottom