Question

For some reason, this rule is applied in Chrome on Mac, but not on Windows. The arrows at the bottom of the page should be italicized, but it only works on Mac.

You can see the example here: http://jansensan.net/clients/float4/allianz-global-assistance/true-stories.html

You can see the CSS here: http://jansensan.net/clients/float4/allianz-global-assistance/assets/css/main.css

Look for the .buttonLabel class.

Just before you mention that it may work in IE or Firefox, these browsers are irrelevant to this project. The HTML output is into a custom Webkit integration that behaves identically to Chrome.

Is there something obvious that I overlooked? Thanks for any help!

Answer 1

The reason appears to be that you are trying to italicize a character that has no italic version, i.e. it looks the same in an italic font as in a normal (upright) font. This is normal for special characters; using italic basically means using specially designed glyphs for letters and maybe for some other characters.

The relevant markup here seems to be

<div class="buttonLabel label">&lt;</div>

and the relevant CSS code

.buttonLabel
{
font-family: Verdana, sans-serif;
font-style: italic;
}

(Contrary to the question heading, I can’t find any reference to Helvetica or Arial in the CSS code. And I can’t find any arrows, just LESS THAN and GREATER THAN characters.)

In Verdana, the italic glyph for “<” is the same as the normal glyph. Ditto in Arial. In some other fonts, it might look different, though this should be regarded as a typographic flaw. Some fonts, such as Arial Unicode MS, do not have an italic version at all. Some browsers and other programs may (erroneously) apply artificial “italic” to such fonts, by algorithmically slanting normal glyphs.

The solution depends on what you are after. I cannot see a reason to try to italicize “<” or “>”, but if you wish to get some distorted slanted versions of such characters, using images is the practical solution.