Hi,

While trying to get some chinese characters to render properly I ran into an issue with princexml.
I have installed the arphic fonts and this works correctly when using css like "font-family: verdana, sans-serif" or "font-family: verdana, AR PL UKai CN".
However it fails when only using "font-family: verdana", this is not expected since all browsers render it fine.

My initial work-around was using a @font-face rule like this:

@font-face
{
    font-family: verdana;
    src: local("AR PL UKai CN"), local("AR PL KaitiM GB"); /* Chinese */
}

However this caused all verdana text to be rendered in the ukai font. To mitigate this issue I tried to use the unicode-range css property.

@font-face
{
    font-family: verdana;
    src: local("AR PL UKai CN"), local("AR PL KaitiM GB"); /* Chinese */
    unicode-range: U+4E00-9FCC, U+3000-303F, U+FF00-FFEF;
}

However this caused all "normal" text to be rendered in Times new roman instead of Verdana.
This feels as a bug, as I only expect it to influence characters specified in the unicode-range.
I tried to add an extra rule to use the local Verdana font

@font-face
{
    font-family: verdana;
    src: local("AR PL UKai CN"), local("AR PL KaitiM GB"); /* Chinese */
    unicode-range: U+4E00-9FCC, U+3000-303F, U+FF00-FFEF;
}

@font-face
{
    font-family: verdana;
    src: local("Verdana")
}

However this caused a 'cyclic @font-face redirect to "Verdana"' warning and still resulted in using Times new roman.

My final workaround was to directly refer to location of the font on our servers, this works but it feels as a very dirty hack:

@font-face
  {
    font-family: verdana;
    src: local("AR PL UKai CN"), local("AR PL KaitiM GB"); /* Chinese */
    unicode-range: U+4E00-9FCC, U+3000-303F, U+FF00-FFEF;
  }

  @font-face
  {
    font-family: verdana;
    font-weight: bold;
    src: url("/data/www/fonts/verdanab.ttf");
  }

  @font-face
  {
    font-family: verdana;
    font-weight: normal;
    src: url("/data/www/fonts/verdana.ttf");
  }

  @font-face
  {
    font-family: verdana;
    font-style: italic;
    src: url("/data/www/fonts/verdanai.ttf");
  }

Is there a better way to solve this? (ideally this should work as in all browsers, so without specifying any @font-face rule)

If you specify "Verdana, sans-serif" then it should work, as Prince uses AR PL UKai CN for the sans-serif font family by default.

Hi Mike,

That is true, however this is not enough in our case as we don't control the css (our clients can upload their own css) we can only add rules in the default css which is also included.
So if the uploaded css contains rules with "font-family: verdana" and html has chinese characters it will be rendered correctly in the browser, but not in princexml.

Ideal situation:
it should work without extra css
issues: does not work

Acceptable solution 1:
one extra @font-face rule with unicode-range property
issues: causes other font (Time new Roman) to be used outside the specified unicode range

Acceptable solution 2:
two extra @font-face rules, one with unicode-range property and one with src: local("verdana")
issues: causes warning 'cyclic @font-face redirect to "Verdana"' and uses another font instead (Times new Roman)

Currently I can work around it with the last four @font-face rules of my first post, but this is not an ideal situation as it depends on the absolute location of the fonts on our servers + I have to specify each font variant (regular, bold,italic, bold+italic etc) separate.

If sans-serif is not specified, then Prince will fallback to serif. Currently, serif uses AR PL UMing CN for Chinese text. Do you have this font installed? You could change it to AR PL UKai CN by editing the default fonts.css if you prefer.

Ah great, indeed the UMing fonts are not installed, but with this I only need to add 1 @font-face rule:

@font-face
  {
    font-family: serif;
    src: local("AR PL UKai CN"), local("AR PL KaitiM GB"); /* Chinese */
  }

That's a much nicer solution, thanks!

What about the issue with the unicode-range is that how it is supposed to work according to the standards, or is this a bug in prince?

In Prince, once you have one @font-face rule for Verdana it won't check the system font. You might be able to make it work by using two rules, like this:

@font-face {
    font-family: Verdana;
    src: local("Verdana")
}

@font-face {
    font-family: Verdana;
    unicode-range: ...;
    src: local("AR ...")
}

The order of the rules is significant, although in this case it might not matter due to the unicode-range property.

But adding the Chinese font to the serif default font family is probably a better solution, as it will work for other non-Verdana fonts as well.