css - html italic letters protrude from their container (and may be cut by the next container' background)

Question

To illustrate the problem (background has an alpha 0.2 for presentation purposes): http://jsfiddle.net/Novado/enhuc4jv/1/

<span style="font-family: impact; font-size: 500pt; font-style: italic;">
    <span style="border: 1px dotted #000;background-color: rgba(10, 10, 10, 0.2);"><span style="border: 1px solid red;color: red;background-color: rgba(200, 0, 0, 0.2);">World</span>&nbsp;&nbsp;</span><span style="border: 1px dotted green; background-color: rgba(200, 0, 0, 0.2);"><span style="border: 1px solid blue; color: blue;background-color: rgba(0,0,200,0.2);">World</span>&nbsp;&nbsp;</span>
</span>

Lack of break-symbols is intentional: html-code is back-end-generated and font-styles may vary. Sadly I can't post images yet. If you delete "nbsp;"-symbols in the example, you will see that the last letter of the first word will be partually cut by the next container' background.

All I found on the issue (well, somewhat) is this link: http://www.positioniseverything.net/explorer/italicbug-ie.html

It is normal that some letters (like 'j', 'f', especially in their italic form) protrude from their container box (if no padding is present.)

But why is that exactly? As far as I understand it - it's a html standard, but I can't find the exact document nor can I find the reasoning behind this behaviour...

Can someone please explain why is this behaviour considered normal? And is there a good solution for "background-cuts-letters" issue? Coz every WYSIWYG I saw are also affected by this, but I can't seems to find anyone complaining (well, maybe I just suck at search queries, who knows).

Answer 1

The document cited correctly describes that letters may extend past the borders of their container box, especially in italic typefaces. This is a matter of typography, so it is not specified in HTML or CSS specifications, though some CSS material might refer to it. The container box is just a typographer’s playground, and he may decide to cross the borders at times. The height of the container box is the font size, its width is the advance width of the glyph, and these quantities are used by programs when they lay out text; they do not restrict the glyphs.

This is even more so when fake italic (synthetic italic, algorithmically slanted text) is used, and this happens when you use Impact and ask for italic. There is no italic typeface for it, i.e. italic forms of glyphs designed by a typographer, so a browsers needs to ignore your request or to produce fake italic. Since the shapes of letters do not change, except via the slanting, the slanting angle must be fairly large to make “italic” look different from normal. And the amount of slanting makes it more probable to cross the right border of the container box.

In classic typography, such issues can be addressed by adding some spacing when needed. This is difficult to automate and hence mostly not done these days. In CSS, you could use padding-right, but you naturally need to wrap a word or a letter in an element (normally span) so that you have something to apply the styling to, e.g.

 <span style="padding-right: 0.08em">World</span>

or

 <i style="padding-right: 0.08em">World</i>

This is cumbersome, of course, especially since the amount of spacing needs to depend on the last letter (and on the font and maybe on the first letter of the next word). Alternatively, you could use fixed-width spaces, such as  , which corresponds to the methods used in lead typography (a narrow piece of metal was placed after printing letters), but this is not flexible and not reliable (the widths of those characters actually vary by font).