Mixed language text, CSS font set order & inline box issues

In Firefox 3.04 and Safari 3.2 on Mac, Japanese text can appear to break out of the top of it’s inline box when the inline box has a background color. This is triggered by having an English font earlier in the font set than the first Japanese font (eg for old-style figures), however not all fonts will trigger the problem. For problematic fonts, the first available font in the font set appears to set the baseline for all subsequent text to use, even if the block contains inline boxes that use other fonts with completely different baseline positions (eg Japanese has no descenders).

2008-11-23 Update: Seems this is really dependent on fonts used; in Firefox 3.04 Times New Roman, Georgia, Helvetica Neue, Arial, Lucida Grande and Verdana don’t have this problem, but Times, Hoefler Text and Helvetica do. In Safari 3.2 only Hoefler Text has this problem, with the other fonts above being ok. Using a problematic font after a safe font in the font set is fine. I’d love to know what differentiates the two groups of fonts, and what the hell makes some fonts behave differently…

Inline box heights for elements of font-size:32px, by font and browser (display problems indicated by italics)
FontFirefox 3.04Safari 3.2
Verdana40px39px
Trebuchet MS40px39px
Lucida Grande38px38px
Helvetica Neue38px37px
Baskerville37px37px
Helvetica33px37px
Times32px37px
Times New Roman36px36px
Georgia38px36px
Arial36px36px
Hoefler Text33px32px

2008-11-24 Update: The example <p>, <span> and <a> tags are set to font-size: 32px; line-height: 48px;. In Firefox the inline boxes are 38px when no font is specified (#1). For non-problematic fonts the inline boxes are 40px (Verdana), 38px (Georgia, Helvetica Neue, Lucida Grande), or 36px (Times New Roman, Arial), all centered in a 48px block box. For problematic fonts the inline boxes (area covered by background) are 33px (Hoefler Text, Helvetica) or 32px (Times). However while these are also centered in the 48px high <p>, their outline boxes actually extend 4-5px above the background color.

In Safari the example inline boxes are 38px when no font is specified (#1). For non-problematic fonts they’re 39px (Verdana), 38px (Lucida Grande), 37px (Times, Helvetica, Helvetica Neue), and 36px (Times New Roman, Georgia, Arial). And for the problematic font Hoefler Text they’re 32px.

I guess the different inline box heights are coming from the font metrics. I’m still unsure of why some fonts display this problem.

2008-11-25 Update: Added Baskerville and Trebuchet MS to the motley assortment.

2008-12-03 Update: Another interesting difference is when an English font is first in the font stack, Safari displays double-byte numbers using the English font but stretched horizontally, rather than falling back to the Japanese font. Also, when only a Japanese font is specified for single-byte numerals, the user default font is used instead, even though Japanese fonts also have single-byte numeral glyphs. Firefox displays the examples as expected.

  1. User default font (no font family specified)

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  2. English then Japanese {font-family} font set

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  3. Japanese then English {font-family} font set

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  4. English then Japanese {font-family}; Times New Roman

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  5. English then Japanese {font-family}; Times

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  6. English then Japanese {font-family}; Georgia

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  7. English then Japanese {font-family}; Baskerville

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  8. English then Japanese {font-family}; Hoefler Text

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  9. English then Japanese {font-family}; Helvetica

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  10. English then Japanese {font-family}; Helvetica Neue

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  11. English then Japanese {font-family}; Arial

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  12. English then Japanese {font-family}; Lucida Grande

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  13. English then Japanese {font-family}; Trebuchet MS

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  14. English then Japanese {font-family}; Verdana

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  15. English then Japanese {font-family}; Helvetica, Helvetica Neue

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  16. English then Japanese {font-family}; Helvetica Neue, Helvetica

    Some English text

    １文の日本語のテキスト

    English日本語日本語English

  17. Numbers; Single- vs double-byte

    0123-4567-89—single-byte, E then J

    ０１２３-４５６７-８９—double-byte, E then J

    0123-4567-89—single-byte, J only

    ０１２３-４５６７-８９—double-byte, J only

    Double-byte numbers should be 1em wide (English hyphens used for both)

Thoughts

Expected result: inline box background matches area covered by outline, and both enclose all glyphs.

Actual result: In Firefox 3.04 glyphs for some fonts (Helvetica, Times, Hoefler Text) extend outside the area painted by the inline box’s background, while remaining inside the inline box’s outline. This is visible as a transparent strip between the gray background and outline box at the top of Japanese text, eg in #2.

In Safari 3.2 while the outlines and inline box backgrounds match, Japanese glyphs extend outside the containing inline box for Hoefler text, and on hover any link text outside the inline box doesn’t change color. Again this is most noticeable at the top of the Japanese text in #2.

My use case for this is I’d like to use background color and/or outline for link states (eg a:hover). The current workaround is to use only ‘safe’ fonts (Verdana, Georgia, Helvetica Neue, Lucida Grande, Times New Roman, Arial, although there may be others). Potential solutions for the other fonts could be for Firefox to let inline box background color area match the area covered by outline, or for Safari to increase the inline box height generated solely from {font-family} and glyph substitution to enclose all characters.

Ref: While CSS2.1; 15.3 Font family no longer contains the text, CSS2; 15.2.2 Font family specifically mentions this use:

For example, text that contains English words mixed with mathematical symbols may need a font set of two fonts, one containing Latin letters and digits, the other containing mathematical symbols. Here is an example of a font set suitable for a text that is expected to contain text with Latin characters, Japanese characters, and mathematical symbols:

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

The glyphs available in the "Baskerville" font (a font that covers only Latin characters) will be taken from that font, Japanese glyphs will be taken from "Heisi Mincho W3", and the mathematical symbol glyphs will come from "Symbol". Any others will come from the generic font family 'serif'.

Note also that in Firefox when a Japanese font is listed first (#3) there is a gap between the English text outline and inline box background.

I’d appreciate any feedback by Twitter: @boblet