\n English, it could be that non-English language visitors are
\n using tools like Google Translate to view your content in their language<\/a>.
\n This traffic should show up in your analytics dashboard, so you can get an idea of how many
\n visitors are not viewing your site in the way it’s intended.)<\/em>\n<\/p>\n
More languages != more HTML templates<\/h2>\n
\n We can’t recommend this enough: reuse the same template for all language versions, and always try
\n to keep the HTML of your template simple.\n<\/p>\n
\n Keeping the HTML code the same for all languages has its advantages when it comes to maintenance.
\n Hacking around with the HTML code for each language to fix bugs doesn’t scale\u2013keep your page code
\n as clean as possible and deal with any styling issues in the CSS. To name just one benefit of
\n clean code: most translation tools will parse out the translatable content strings from the HTML
\n document and that job is made much easier when the HTML is well-structured and valid.\n<\/p>\n
How long is a piece of string?<\/h2>\n
\n If your design relies on text playing nicely with fixed-size elements, then translating your text \n Variable word lengths cause particular issues in form labels and controls. If your form layout \n Also avoid fixed-height columns\u2013if you’re attempting to neaten up your layout with box backgrounds \n Source editing for bidirectional HTML can be problematic because many editors have not been built \n Our own day-to-day usage has shown the following editors to currently provide decent solutions for \n When designing for RTL languages you can build most of the support you need into the core CSS and \n Some key styling issues to watch out for: any elements floated right will need to be floated left \n We generally use the following approach, including using a class on the body tag rather than a Elements:<\/p>\n Left-to-right (default) styling:<\/p>\n Right-to-left styling:<\/p>\n \n (See this in action in \n One final note on this subject: most of the time your content destined for right-to-left language \n In cases where you don’t have an HTML container to hook the dir attribute into, such as title Example usage in JavaScript code:<\/p>\n \n (For more detail, see the W3C’s articles on \n If you’ve never worked with non-Latin character sets before (Cyrillic, Greek, and a myriad of \n Check that your editor and browser encodings are set to UTF-8 (recommended) and consider adding a \n Lastly, a practical tip on naming conventions when creating several language versions. Using a \n Using a conventional standard will help users understand your site’s structure as well as making \n See previous Webmaster Central posts for advice about URL structures and other issues surrounding \n That’s a summary of the main challenges we wrestle with on a daily basis; but we can vouch for the
\n might wreak havoc. For example, your left-hand side navigation text is likely to translate into
\n much longer strings of text in several languages\u2013check out the difference in string lengths
\n between some English<\/a>
\n and
\n Dutch<\/a> language
\n navigation for the same content. Be prepared for navigation titles that might wrap onto more than
\n one line by figuring out your line height to accommodate this (also worth considering when you
\n create your navigation text in English in the first place).\n<\/p>\n
\n displays labels on the left and fields on the right, for example, longer text strings can flow
\n over into two lines, whereas shorter text strings do not seem associated with their form input
\n fields\u2013both scenarios ruin the design and impede the readability of the form. Also consider the
\n extra styling you’ll need for right-to-left (RTL) layouts (more on that later). For these reasons
\n we design forms with labels above fields, for easy readability and styling that will translate
\n well across languages.\n<\/p>\n![\"Screenshots](\"https:\/\/alienroad.com\/wp-content\/uploads\/kb-gorsel\/g-fff0ba2bc5e5.png\")
<\/p>\n
\n that match in height, chances are when your text is translated, the text will overrun areas that
\n were only tall enough to contain your English content. Think about whether the UI elements you’re
\n planning to use in your design will work when there is more or less text\u2013for instance,
\n horizontal<\/a> vs.
\n vertical<\/a> tabs.\n<\/p>\nOn the flip side<\/h2>\n
\n to support the Unicode bidirectional algorithm
\n (more research on the problems and solutions<\/a>).
\n In short, the way your markup is displayed might get garbled:\n<\/p>\n
\n bidirectional editing: particularly Coda, and also Dreamweaver, IntelliJ IDEA and JEditX.\n<\/p>\n
\n use the directional attribute of the html<\/code> element (for backwards compatibility) in
\n combination with a class on the body<\/code> element. As always, keeping all styles in one
\n core stylesheet makes for better maintainability.\n<\/p>\n
\n and vice versa; extra padding or margin widths applied to one side of an element will need to be
\n overridden and switched, and any text-align attributes should be reversed.\n<\/p>\n
\n html[dir=rtl]<\/code> CSS selector because this is compatible with older browsers:\n<\/p>\n
\n English<\/a> and
\n Arabic<\/a>.)\n<\/p>\n
\n pages will be bidirectional rather than purely RTL, because some strings will probably need to
\n retain their LTR direction\u2013for example, company names in Latin script or telephone numbers. The
\n way to make sure the browser handles this correctly in a primarily RTL document is to wrap the
\n embedded text strings with an inline element using an attribute to set direction, like this:\n<\/p>\n
\n elements or JavaScript-generated source code for message prompts, you can use this equivalent to
\n set direction where ‫<\/span> and ‬\u202c<\/span> are Unicode control
\n characters for right-to-left embedding:\n<\/p>\n
\n creating HTML for Arabic, Hebrew and other right-to-left scripts<\/a>
\n and
\n authoring right-to-left scripts<\/a>.)\n<\/p>\nIt’s all Greek to me…<\/h2>\n
\n Asian and Indic), you might find that both your editor and browser do not display content as
\n intended.\n<\/p>\n
\n <span><\/code> element and the lang<\/code> attribute of the html<\/code>
\n element to your HTML template so browsers know what to expect when rendering your page\u2013this has
\n the added benefit of ensuring that all Unicode characters are displayed correctly, so using HTML
\n entities such as é<\/code> (\u00e9) will not be necessary, saving valuable bytes! Check
\n the W3C’s tutorial on character encoding<\/a>
\n if you’re having trouble\u2013it contains in-depth explanations of the issues.\n<\/p>\nA word on naming<\/h2>\n
\n standard such as the
\n ISO 639-1 language codes<\/a>
\n for naming helps when you start to deal with several language versions of the same document.\n<\/p>\n
\n it more maintainable for all webmasters who might develop the site, and using the language codes
\n for other site assets (logo images, PDF documents) is handy to be able to quickly identify files.\n<\/p>\n
\n working with multi-regional websites<\/a>
\n and
\n working with multilingual websites<\/a>.\n<\/p>\n
\n fact that putting in the planning and work up front towards well-structured HTML and robust CSS
\n pays dividends during localization!\n<\/p>\n