CSS fallback not working properly

[Kae]

To display Chinese Ext-B characters properly, we have the following CSS to implement a fallback system:

Code: Select all

* {

  font-family: "Times New Roman", "細明體-ExtB" "MingLiU-ExtB", "細明體", "MingLiU", "Serif";

}

However, the Chinese text fails to fallback to MingLiU for some reason. It still displays the text, though it is not in the mentioned font.

[adrian]

Hi,

Please note that the fallback system for font-family is at font level, not at text level. This means that each font in the list is checked for availability by the renderer (Oxygen Author or web browser). If it is not available, the next font is checked and so on until one available font is found. If the font is available, it will be used for all text even if that font cannot display some of your text.

See the specs:
http://www.w3.org/TR/CSS2/fonts.html
and the w3schools page for pointers:
http://www.w3schools.com/cssref/pr_font_font-family.asp

So, in your case 'Times New Roman' is always (almost) available and used, so it never falls back to any other font.
As recommended on the w3schools page, start with a more specific font that you want (MingLiU-ExtB or MingLiU), but may not always be available and end with a more generic font that is acceptable (Serif). If 'Times New Roman' cannot represent your Chinese text, it shouldn't even be on that list.


If you want to use different fonts for different types of text, you'll have to add markup in your XML/HTML document to differentiate between those types of text. Then you can use in the CSS different rules (and fonts) for each type of text depending on the markup.

Regards,
Adrian

[HomeGoods]

When designing CJK documents in CSS, it is a common practice to put a Latin-based font first. So that the Latin-based and the CJK characters are rendered with the best suited fonts.
It relies on the fallback which works on popular web browsers but, as Kae wrote, does not work on oXygen.

[adrian]

Hi,

The reason this fallback works in popular browsers is that they usually support CSS3 and in the CSS3 standard this fallback works as you want.
The original poster requested support for the CSS3 behavior in Oxygen on another topic:
Support for CSS3 standard in font switching/fallback
I've also logged your request for this improvement.

Oxygen is right now (v15.2) at CSS Level 2 and 2.1 support with some limited CSS3 support. More details are available in the manual:
Oxygen XML Editor - User Manual - CSS Support in Author

Regards,
Adrian

[HomeGoods]

The order of "Latin-based 1st and then CJK" has been widely used long since, I think, before CSS3.
Quick glancing at CSS2.1 also appears to support the per-character method:

15.2 Font matching algorithm
...
2.At a given element and for each character in that element, ...
...
4.If there is a matching font face, but it does not contain a glyph for the current character, ...

http://www.w3.org/TR/CSS2/fonts.html

I'm not a CSS specification expert, though.

[HomeGoods]

Actually, it was more clearly written in the CSS2 specification:

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

http://www.w3.org/TR/2008/REC-CSS2-2008 ... amily-prop

[adrian]

Hi,

You are right. I misread the specification.
The CSS2 specs are a lot more clear. Even CSS1 describes the same font fallback behavior with the same example.

Anyway, the request is logged on our issue tracking tool. I've mentioned the CSS specification aspect.

Regards,
Adrian

[HomeGoods]

Thank you, Adrian.
Hope the request is considered for a future version seriously. Many times I can't read text in the Author mode due to the current behavior, and I have to work around it by adding "@media oxygen { font-family: ... }" to override the style temporarily.