This is done as follows:
All the messages to be translated must be enclosed in the _()
pseudo-function. Example:
.hello:before { content: _("Hello world!"); }
An @translation
at-rule pointing to a Java® property file must be added at the top of the CSS stylesheet. Example:
@translation url(hello_en.properties);
where file hello_en.properties
contains:
sayHello=Hello world!
The name of the Java property file must end with "_
", where "LL
.properties
" is a lower-case two-letter ISO 639 language code.LL
This language code specifies the language of the messages contained in the Java property file. This language is English (code "en
") in the case of the above example. Note that country variants (en-US
, en-GB
, fr-FR
, fr-CA
, etc) are not supported here.
A relative URL is resolved against the URL of the CSS style sheet. In the example above, file hello_en.properties
is expected to be found in the same directory as the CSS style sheet “including” it.
An additional Java property file must be created for each available language.
French example: hello_fr.properties
:
sayHello=Bonjour monde!
German example: hello_de.properties
:
sayHello=Hallo Welt!
These additional property files must use exactly the same property keys as those found in the reference property file.
The reference property file is the file included in the CSS style sheet by the means of the @translation
at-rule.
In the example above, the reference property file is hello_en.properties
. The author of this file has arbitrarily chosen to use property key "sayHello
" to identify message "Hello world!
" .
These additional property files may be found in the same directory as the reference property file or, alternatively, they may be top level items contained in a JAR
file referenced in the CLASSPATH
. Alternate location example:
$ jar tvf fr_translation.jar ... hello_fr.properties ... com/xmlmind/netutil/Messages_fr.properties
This alternate location is the one used by the "Translate XMLmind XML Editor" add-on.
Notes:
A Java property file automatically trims whitespace found before and after a message. That's why leading and trailing whitespace are not considered when searching the translation corresponding to a given message.
Example:
.hello2:before { content: url(left.png) _(" Hello world! ") url(right.png); }
In the example above, the author of the style sheets wants to have a space character before and after "Hello world!
". However in the _
message files, there is no need to add these leading and trailing space characters.LL
.properties
Reference English message file hello_en.properties
:
sayHello=Hello world!
French message file hello_fr.properties
:
sayHello=Bonjour monde!
Despite the fact that there is no space character before and after "Bonjour monde!
", when using a French locale, the CSS style sheet is equivalent to:
.hello2:before { content: url(left.png) " Bonjour monde! " url(right.png); }
In some cases, you'll want to translate strings found inside an XPath expression. Example:
.hello3:before { content: xpath("concat(../@title, ' should contain ', 'Hello world!')"); }
This is done as follows:
.hello3:before { content: xpath(_("concat(../@title, '%0', '%1')", " should contain ", "Hello world!")); }
with message file hello_en.properties
containing:
sayHello=Bonjour monde! requirement=should contain
When the _()
pseudo-function is passed more than one message:
All the message arguments are translated.
The first message translation is considered to be a template containing up to 10 variables: %0
, %1
, ..., %9
.
The message translations other than the first one are considered to be the values of variables %0
, %1
, ..., %9
.
The variables are substituted with their values in the template. The result of this substitution is the string passed to pseudo-function xpath()
.
This facility is mainly useful to cope with messages found inside XPath expressions, but you can also use it anywhere it helps. Example:
.hello4:before { content: _('Greetings %0 "%1"', " should contain ", "Hello world!"); }