17. Multilingual content

Section outline

• Select section 1. Fundamentals

  Collapse Expand

  1. Fundamentals

  Collapse all Expand all

  Moodle can basically handle multiple languages. So-called “language packs” are used for this purpose.
  
  However, these language packs only apply to texts that are an integral part of the learning platform, such as menu labels or automatic texts. And their display depends on several settings. I will try to break all of this down in this course so that all users are able to create multilingual posts, content, or even entire courses: 

  • Select activity 1.1 Available language packs

    1.1 Available language packs

    A language pack contains all the texts that are used by default on a “blank” Moodle site: These include, for example, the menu items "Home" and “My courses,” or the automatic naming of buttons, e.g., “Add section,” and much more.

     Three languages are currently available: German, English, and French.

     In the English language pack, the above examples are called "Home", "My Courses" and "Add section", and in French « Accueil », « Mes cours » and « Ajouter une section » :

    

    

    

    These language packs can, of course, only cover standard texts.
    User-generated texts are (unfortunately) not translated automatically. The corresponding options for this are described in sections 2 to 7. 
  • Select activity 1.2 Sprachauswahl der Bedienoberfläche

    1.2 Language selection for the user interface 

    All users can change the language of the Moodle interface. Depending on whether you’re logged in or not, it works slightly differently.

    Not logged in:
    For visitors who aren’t logged in, there’s a button in the header at the top right that lets you switch the language. On mobile devices (right), it may look a bit different:

    

    Logged in:
    After a successful login, the language selection moves into the user menu:

    

     You can test how it works in this course, because it’s available in three languages.

    This language selection affects all texts that have multiple language versions. If there’s no translated text available in the target language you chose, the default language (here: German) is shown.
  • Select activity 1.3 Language settings in the user profile

    1.3 Language settings in the user profile

    Besides the interface setting, there’s a user-specific preference you can set in your own settings: At https://moodle.thga.de/user/language.php or via User menu > Settings > Select language, you can set a preferred language.

    

    If no language is enforced (see section 1.4), Moodle is displayed in the preferred language—in short: your personal language preference overrides the interface setting from section 1.2.

  • Select activity 1.4 Automatic language detection

    1.4 Automatic language detection

    Moodle also tries to derive the default language from your browser settings. You might know this from websites that offer an automatic translation when the display language and your browser settings don’t match.

    This feature is a global Moodle setting that can only be managed by administrators. But since it plays a role in the hierarchy of language settings, it’s mentioned here for completeness.

  • Select activity 1.5 Course language settings

    1.5 Course language settings

    Of course, teachers should be able to decide the language of their own courses themselves. There’s a course setting for that, which people with editing permissions can find under Settings > Appearance > Force language.

    

    A language enforced via the course setting overrides the user preference (section 1.3) and the interface setting (section 1.2).

  • Select activity 1.6 How the different language settings relate

    1.6 How the different language settings relate

    1. By default, Moodle is displayed in German.
    2. The interface language setting (section 1.2) is available to every visitor—whether they have an account or not, and whether they’re logged in or not—so you can generally view the site in a language different from the default.
       If no course setting is applied, courses are also displayed in the selected language, as long as texts are available in that language.
    3. The user preference (section 1.3) is basically a permanent version of the interface setting and overrides the default (here: DE). This means the Moodle interface is always shown in the user’s preferred language. Since the setting is user-specific, it only applies to logged-in users.
       This setting also generally applies to all courses you open, as long as texts exist in the target language and no course language is enforced.
    4. At this point—if no interface language has been chosen manually and no user preference has been set—Moodle tries to determine a “matching” language via the browser settings.
    5. A course language set by the teacher, for example, is not affected by any of the other options. It would be kind of pointless if an English course that is meant to be run exclusively in English for didactic reasons were suddenly displayed in German or French because of a user preference or interface setting.

    The following figure is intended to illustrate the relationship:

    

• Select section 2. Providing your own texts in multiple languages

  Collapse Expand

  2. Providing your own texts in multiple languages

  To offer your own course content in multiple languages, a few things are needed in addition to the translation itself:

  1. A special course filter must be enabled (usually enabled by default), and
  2. the different language versions of the text need to be stored accordingly.

  • Select activity 2.1 Enable the filter

    2.1 Enable the filter

    The filter is required for multilingual Moodle courses. There are two of them: an older one called “Multi-language content”, which is needed for the HTML version (see section 2.3), and another one called “Multi-language content v2”, which is needed for the editor plugins (see section 2.2). Both are enabled by default.

    If you have editing permissions, you can find the filters under > More > Filters > Multi-language content or Multi-language content (v2): 

    

    

     

  • Select activity 2.2 Editor plugins

    2.2 Editor plugins

    Once the filters are enabled, the available editors include a function for entering multilingual content. Both the Atto editor ...

    

    ... and the TinyMCE editor will then provide a corresponding button:

    

    Using these buttons, you can mark text sections for the respective languages:

    

    You can create these language sections either as empty placeholders by simply clicking the button and selecting a language, or apply them to existing text. In that case, select the text first; when you click a language, the selected text will be wrapped in the yellow markers.

    The filter “understands” the shortcode and language tag {m lang de | en | fr}, so that

    • when using the language switcher,
    • when a user preference is set, or
    • when a different browser language is detected,

    the selected / desired language is shown and all others are hidden.

  • Select activity 2.3 HTML mode

    2.3 HTML mode

    An older and slightly more complicated method is to enter the different texts directly in the page code.
    However, this requires some basic HTML knowledge.

  • Select activity Excursus: HTML vs. WYSIWYG

    Excursus: HTML vs. WYSIWYG

    At the end of the day, Moodle is just a website written in HTML (HyperText Markup Language, info). HTML is a markup language, meaning a way of structuring documents in which both the actual content and properties, relationships, and formatting are described within the same document.

    An example:

    <h3>&Uuml;berschrift</h3>
    <p>Dies ist der Text, mache Worte sind <strong>speziell formatiert</strong>.</p>

    In the HTML snippet above, an element of type headline with hierarchy level 3 (= h3) is created. Its beginning is marked by an opening tag (<h3>) and its end by the matching closing tag (</h3>). The content of the element is “Überschrift”, where German umlauts may - depending on the character encoding of the document - be written using the (outdated) entity notation (Ü = &Uuml;).
    
    This is followed by a paragraph (<p>...</p>), in which another string is formatted in bold (<strong>).

    All websites you see in your browser work exactly like this. Your browser is just kind enough to render the HTML code, meaning it does not show the raw HTML but instead displays the headings, paragraphs, and bold text as such.

    Moodle editors, however, work in WYSIWYG mode, i.e. they try to generate standards-compliant HTML in the background from the text you enter. So if you format a text as a list using the editor buttons, for example:
    

    • List item 1
    • List item 2
    • List item 3

    it will appear like that in the editor input area. In the background, however, it is saved as an unordered list (<ul>...</ul>) with several list items (<li>...</li>)

    <ul>
       <li>List item 1</li>
       <li>List item 2</li>
       <li>List item 3</li>
    </ul>

  • Select activity View and edit HTML

    All available text editors can be switched to HTML mode: in the Atto editor, use the </> button in the lower toolbar row; in the TinyMCE editor, go to > View > Source code.

    

    

    In the HTML mode now displayed, the different languages are entered as follows: Each language must be wrapped in a <span> element that specifies

    • that the "multilang" filter should be applied, and
    • which language the text in that element is written in.

    An English text would therefore be written as 

    <span class="multilang" lang="en">
      ... English text goes here
    </span>

    a German text as

     <span class="multilang" lang="de">
      ... German text goes here
    </span>

    and a French text accordingly as 

    <span class="multilang" lang="fr">
      ... French text goes here
    </span>

    The filter “understands” the attribute class="multilang" and the language attribute (lang="de | en | fr"), so that
    

    • when using the language switcher,
    • when a user preference is set, or
    • when a different browser language is detected,

    the selected / desired language is shown and all others are hidden.

    A practical workflow seems to be:
    

    1. first write the entire text (source or WYSIWYG),
    2. then copy it and paste it again with enough spacing (blank lines) in between,
    3. and only at the end insert the <span> tags in the source code.

    This is not exactly user-friendly, but it works 😏

• Select section 3. Naming courses, sections, and content

  Collapse Expand

  3. Naming courses, sections, and content

  Besides the text fields edited with the editor, there are of course many other text elements. For example, course titles, section names, and activity names are entered in input fields without an editor. Both methods for storing multiple languages also work there.

  For example, this course is called

  17. {m lang de}Mehrsprachige Inhalte{m lang}{m lang en}Multilingual content{m lang}{m lang fr}Contenus multilingues{m lang}

  Alternatively, the “older” technique would also work, and the title could be written as

  17. <span class="multilang" lang="de">Mehrsprachige Inhalte</span><span class="multilang" lang="en">Multilingual content</span><span class="multilang" lang="fr">Contenus multilingues</span>

  However, that version is a bit less handy, and there is a greater risk of hitting the character limit of the input fields because it is simply longer. The numbering (here: "17." + [space]) can be left outside, by the way, since it applies to all languages.

  The same works for sections and for naming materials or activities: