Page Comparison

About language codes and text direction

The 2015 templates support content internationalization by enabling the content provider to identify the language and text direction of elements on a web page. In most cases, language is identified by a two-letter code. In some cases, longer language codes are needed to provide added specificity (e.g., distinguishing between multiple dialects of a given language on the same page). Text direction is identified as either 'ltr' (left-to-right) or 'rtl' (right-to-left).

More information regarding language codes, the authorities that maintain them, and their proper selection can be found in the W3C's article Declaring Language in HTML.

Internationalization vs. translation

Please note that internationalization is not equivalent to translation. The 2015 template do not translate between languages; the content provider is responsible for the proper use, grammar, and spelling of all text, English and non-English alike.

Setting internationalization

Internationalization can be applied to text, images, pages, and folders:

There are two situations in which you can set the language and direction of elements: via datadef form elements and via wysiwyg.

Via form elements

The following datadef form elements are are reused in many places in the 2015 templates for the purposes of internationalization:

Via wysiwyg

Unfortunately, Cascade does not provide any easy way to indicate language or text direction for elements in a wysiwyg. The only way to do so is to edit the underlying html directly to add the appropriate html attributes:

1. Toggle the 'Edit HTML source' option in the wysiwyg toolbar.  Locate the non-English element.
2. For text...
   
   1.  ensure that the non-English text is contained in its own element. For example, 
      <p>This is English, <span>esto es Español.</span></p>
      In the above, note that the entire Spanish portion is wrapped in its own html element (in this case <span>), which separates it from the English portion. If the non-English text is not wrapped in its own element, you will need to add the element yourself.
   2. Add the lang and dir attributes as necessary. The above example would then look like:
       <p>This is English, <span lang="es" dir="ltr">esto es Español.</span></p>
      The dir attribute isn't needed here the the above example (since left-to-right is the default document direction), but I included it to illustrate its use. 
3.  For non-text elements (images, etc.), add the lang and dir attributes as necessary. For example, an image marked up as:
   <img src="university-of-avignon.jpg" alt="Université d'Avignon et des Pays de Vaucluse" />
   Would then become:
   <img src="university-of-avignon.jpg" alt="Université d'Avignon et des Pays de Vaucluse" lang="fr" dir="ltr"/>