Smartling's Global Delivery Network (GDN) allows you to control the style and layout of your localized sites by adding a language class to the body of translated pages that can be used to trigger locale-specific CSS on your source site. Whether you are designing a different look for your regional site, or need a solution for fixing layout issues such as text expansion/truncation on a localized page, you can implement customized CSS for any localized site in GDN by referencing the Smartling language class.
Translations into some languages tend to be longer than the source English text, so you may wish to allow for multi-line wrapping to better fit the translated text; for character-based languages, you may need to increase line height; for a particular region, you may want to replace an image with an alternative one with translated or more culturally appropriate content.
Smartling Language Class
Smartling adds a class in the format smartling-{language code} to the <body> tag of each webpage on a localized website in GDN, specific to the site's language, for example:
<body class="smartling-fr"> (French site)
<body class="smartling-es"> (Spanish site)
To customize CSS for a language, you can simply add additional CSS entries that cascade from the Smartling language class (body element), for example:
Some German page:
<body class="smartling-de">
<div class="welcome">
<p id="greet">Guten Tag!</p>
</div>
...
</body>
To set the line height of the p element, add the following CSS:
.smartling-de .welcome #greet { line-height: 80px; }
In the example, the line height change will only be effective on the German site (de), and will override the line-height property of the p element with id "greet".
Not sure if your site requires localized CSS? Use Pseudo Translation to simulate what your translated site will look like.