Html: em tag character overflowing bug

Question

Is there a workaround for the character overflow issue in html? This is only visible when there is a background-color and italic (em) tag is used for simple text.

Look for the "i" character when background in the picture. "i" did not fit in the background and has some of its portion overflowed onto right.

Code:

    aaaaa<em style="color:#ff0000;background-color:#c3ddfc;">hijyen bariyeri</em>, aaaaaaa

Answer 1

This is a feature, not a bug. The box of an element (which is what gets colored when you set a background color) is determined in a manner that does not account for the slanting of italic letters, for example. You can handle this by setting right padding, as @MarcB suggests in a comment, but there are complications. First, the amount of padding needed does not depend only on the font size (this dependence can be dealt with using the em unit) but also on the specific font face. The slanting angle varies by font design quite a lot, and so do the shapes of characters—e.g., slanting “f” has a much greater effect than slanting “e”. Second, when you add spacing after a letter followed by punctuation mark, as in the example, the word and the mark get separated in a typographically unpleasant way.

I would suggest thus that you include the punctuation mark inside the element; this might look illogical (the comma is not part of the emphasized expression), but it is typographically adequate. Quite often, this is sufficient for solving the problem. Example:

Özetle <em style=
"color:#ff0000; background-color:#c3ddfc;"
>hijyen bariyeri,</em> hiye

If the italicized word is not followed by a punctuation but a normal word space, consider setting right padding of about 0.2em, but decide on the specific value after some testing. Example:

Özetle <em style=
"color:#ff0000; background-color:#c3ddfc; padding-right: 0.2em"
>hijyen bariyeri</em> hiye

A value of 0.2em is typically suitable for fonts like Arial. For a font with no italic typeface, forcing browsers to produce “fake italic”, a value like 0.3em might be needed, since such synthetic slanting (which might be applied in your example) uses a large slanting angle to compensate for the lack of true italic. For a serif font, say Cambria or Times New Roman, 0.1em might be sufficient for most characters.