We've launched a new support center at help.smartling.com. This site will continue to be maintained into January 2017. Please update your bookmarks.

How to Specify a Language-Specific CSS

The following article applies to Global Delivery Network project types. 

The Smartling service adds a specific class to the <body> tag of each language website, specific to that language. The added class is in the format “smartling-[language code]”; for example:

<body class=”smartling-fr”>  (for French)

<body class=”smartling-ru”> (for Russian)

<body class=”smartling-es”>  (for Spanish)

This class allows you to create language-specific CSS entries. For example, some languages may require more letters — and more width — to communicate the same message, so you may wish to allow for multi-line wrapping to better fit the translated letters, or for or character-based languages, you may want to increase the line spacing. 

For a particular language, you may wish to replace an image with an alternative image containing translated or  more culturally appropriate content.

For any of these examples, you can simply add additional CSS entries that will cascade from the overall body class, such as:

.smartling-fr .someclass { font-size: 12px; }


.smartling-fr .someID { font-size: 12px; }

In this case, the class “someclass” or "someID" will only be effective on the French site (fr), and will override the font-size attribute for the class “someclass” or "someID" appearing on other sites, including the original language website.

Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request
Powered by Zendesk