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).

Prom

This is 'browser italic` rather than italic font...right? – Baudekin

My assumption is that to 'italicise' a non-italic font face the browser has to skew the glyph (not the letter block) which pushes it out of the actual 'letter block' area. Why is why one should use a proper font that has an italic version. – Baudekin

It seems like a transformation rather than pre-render indeed (for impact at least, needs to be tested on other font-families), but still the problem remains. If browser transformed font somehow, shouldn't it apply some corrections to the font' container as well? – Prom

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).

Larner

Yes, thank you. I'll wait a bit to see if anyone else have anything to add to this. – Prom

Paddings and fixed spaces were first things I thought about. Still need a way to calculate the exact width of a container box. I'll try to use canvas for it maybe. – Prom

Answer 2

I solved my similar case using overflow: visible - as a CSS property or as an element attribute.

Pillow