Adobe

decor

Web Platform Team Blog

Making the web awesome

CSS Localization

Background

The Adobe Web Platform team is quite multilingual – we have native speakers of Catalan, Chinese, Dutch, English, French, German, Hungarian, Italian, Japanese, Romanian, Russian and Tamil included in the team. So we find it particularly taxing for everyone to have to code entirely in English. We have a new proposal for the CSS Working Group that is a small step towards addressing this annoyance.

Proposal

CSS Localization allows you to code in CSS in your native language. A new @⚐ rule (needing no localization itself) sets the language used for selectors, declarations, and values so that you never have to refer to an body element or a border property by their English names again.

Here’s an example of the new @⚐ rule with some localized CSS:

@⚐ français;

corps {
  fond: rouge;
  bord: solide noir 1px;
  taille-de-la-police: énorme;
}

Hopefully, the rest of the web platform stack will follow suit with localization strategies of their own. We are looking forward to advancing this new idea through the standards process. Please take a look at our unofficial draft specification!

4 Comments

  1. April 01, 2013 at 5:03 am, Chris Adams said:

    I think you need to make @⚐ support multiple values for web developers who work on Canadian government sites and are required to use both English and French.

    • April 01, 2013 at 5:23 am, Alan Stearns said:

      Good point. Perhaps multiple values would use the union of terms from the languages on the list, or each individual declaration could be checked against the list as in a fallback.

      • April 02, 2013 at 2:32 am, Gaël said:

        Why not something standard already, just like @⚐ fr-FR ? This allows sub-languages and is understandable for everyone. fr-CA is for Canadian French for example.

        This idea seems realy great, but a translation mechanism would be essential for maintainabilty process !!

  2. April 01, 2013 at 7:13 am, Melanie Archer said:

    I see real opportunity for CSS pre-processors here, especially dealing with regional accents and dialects. Imagine having to write “content: ‘you';” only once, then having that rendered appropriately into “content: ‘y\’all';” or “content: ‘youse';” for you. We live in exciting times!