Elements of your original website may contain images with text embedded within the image, such as buttons, tabs or navigation sections. It may be appropriate to create images containing translated text for each of your alternative language websites. For example, your website might have a button with the text “Search” embedded within the button graphic, and for your French site, you may wish to create a version of the button image with the text “Recherché”.
For most GDN sites, all translatable content is captured by default. However, it is possible to set up your site defaults to capture no content and mark only the content you want to be translated. In this case, you can use the class translate or set the HTML5 attribute translate to yes.
HTML
<div>
<p>Default behavior applies, this content is not translated.</p>
</div>
<div class="translate">
<p>This content will be captured for translation</p>
</div>
Translate text in buttons, tabs, and, navigation using CSS
CSS is often used to render buttons, tabs and navigation items with the appropriate images. For example, a <button> element might include a class such as:
HTML
<button type="submit" id="search"></button>
with a CSS entry including:
CSS
#search { background: url(/search_button.gif); }
In a case like this, you can simply use the language-specific CSS to use a different image; for example:
CSS
.smartling-fr #search { background: url(/fr_search_button.gif); }
Handling the Form and Input Elements
Smartling will not translate <form> or <input> values by default because the application may expect certain values, but you can override this behavior for elements such as buttons or default values in search input fields. Elements that use the <form> or <input> class must also include the class “translate” for Smartling to identify this for translation; for example:
HTML
<input type="submit" value="Submit" name="btnSubmit" id="btnSubmit" />
to be translated, will require:
HTML
<input type="submit" class="translate" value="Submit" name="btnSubmit" id="btnSubmit" />
You may want to separate the value from the display by converting buttons or other elements that use the <input> tag to the <button> class. Smartling will automatically capture button text for translation without any additional tagging:
HTML
<button type="submit" value="submit">OK</button>