438314 - SUMO should have locale dependent CSS file

Status: RESOLVED INCOMPLETE

Description

[dynamis (Tomoya ASAI)]

Current SUMO use common CSS files for all locales (languages) but in some language (at least Japanese) the style is not enough beautiful with the language.

Concerning Japanese, for example we should use sans-serif since Japanese text (Kanji, hiragana etc) are much complex than alphabet and small text written with serif are not easy to read on the computer screen.

We should be able to write locale dependent CSS and SUMO page should include them according to the locale of the page.

Comment 1

[David Tenser [:djst]]

This sounds more like a global mozilla.com theme issue, since other pages would likely benefit from this as well. Cc'ing John Slater for input and Stephen Garrity and Brian Krausz for implementation details, if this is something we want.

Comment 2

[Steven Garrity [:sgarrity]]

Adding per-locale CSS files is something we may need for Mozilla.com, but it's not a short-term goal that I'm aware of (Pascal?).

Comment 3

[Pascal Chevrel:pascalc]

Apart from maybe RTL languages, which may deserve a separate stylesheet to deal with their specificity, I don't think that we should have per locale stylesheets as this is going to be difficult to maintain over time and many display problems are often not limited to one locale but to a set of locales.

We can do per locale styling with classic CSS like :
html[lang="ja'] body {}

This is not IE6 compatible though, but it is I think easier to maintain over time and IE6 users are in dwindling numbers so it looks like the right soliution over time IMO.

Comment 4

[dynamis (Tomoya ASAI)]

In Japan there are still many IE6 users. Auto update from IE6 to IE7 is started in Feb 2008 (in US it's started in Nov 2006). We must support Japanese IE6.
# Browser share for www.mozilla-japan.org site is:
# * Firefox: 58.1%
# * IE: 33.2%
# ** IE6: 18.7%
# ** IE7: 13.6%

We must not use [lang="ja'] at least for Japanese now.
And, diff of css between mozilla.com and mozilla-japan.org are not small.
http://mozilla.l10n.jp/~dynamis/sumo/mozilla.jp/index.full_files/intl-ja-screen.css
http://mozilla.l10n.jp/~dynamis/sumo/mozilla.jp/index.full_files/intl-ja-print.css
plus, some diff are exist in other css files.

So, to make SUMO design consistent with Mozilla Japan site, we should be able to add locale specific css file, at least for Japanese I think. 

Comment 5

[David Tenser [:djst]]

How many IE6 users are there today in Japan? I like Pascal's suggestion better than building in support for per-locale stylesheets as that will be a complicated story.

Comment 6

[Kohei Yoshino [:kohei] (Bugzilla UX) (FxSiteCompat)]

IE6 market share is still 20-25% in Japan.

As dynamis mentioned in comment 0, Japanese serif fonts for Windows are not anti-aliased and not appropriate to display text on screen.

We use the following style on mozilla.jp:

/*
 * Japanese fonts:
 *   Mac, English: Lucida Grande
 *   Mac, Japanese: ヒラギノ角ゴ Pro W3 (Hiragino Kaku Gothic Pro)
 *   Windows Vista, English & Japanese: メイリオ (Meiryo)
 *   Windows XP, English: Verdana
 *   Windows XP, Japanese: ＭＳ Ｐゴシック (MS PGothic)
 *   Linux, English: DejaVu Sans, Bitstream Vera Sans
 *   Linux, Japanese: IPAPGothic
 */

* { font-family: "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Verdana, "ＭＳ Ｐゴシック", "MS PGothic", IPAPGothic, sans-serif !important; }

Comment 7

[Paul Craciunoiu [:paulc]]

This is partly implemented already (we have a header for en-US locale for kb articles). Perhaps we should move this to the forum and ask for feedback? Or is there already enough feedback to start implementation?

I've also read an interesting article about 'CSS variables', we may use that for basic styling:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-add-variables-to-your-css-files/

Comment 8

[Paul Craciunoiu [:paulc]]

This bug would also require an interface of sorts to allow locale leaders to add locale-specific CSS... The CSS variables approach will probably be best, but it will be significant work to integrate over all our stylesheets and with caching, etc.