Table of Contents

24.6.2.5 Project 5 - I18N

The `webapp5i` project suggests a way to deliver web pages in different languages that were created on the basis of the Webpage class. In the project, these are German, English and Italian. A special property of the web browser is used so that the web application can decide in which language and with which number and date format to respond. This is the preferred language, which typically corresponds to the locale of the operating system. This preference is communicated to the web server for each request as an attribute of the accept language, which enables the web application to send a customised response. The Gambas Request class of the gb.web component makes the Accept-Language available as the “Language” property of the web application and can therefore set the System.Language directly (System.Language = Request.Language). This sets the Gambas web application to the locale of the requesting browser, which not only adapts number and date formats/expressions to the requesting browser, but also selects the translation, which can be created in the usual form in the IDE in the translation dialogue.

For example, a website with a database report is displayed in Italian:

BILD DB-REPORT

Figure 24.6.2.5.1: (SQLite) database report (excerpt)

You can see in the above figure that the following parts of the website have been translated:

24.6.2.5.1 Note

The starting point for all translations into German and Italian is a website consisting of several web pages in English (en_GB) based on the Webpage class.

24.6.2.5.1.1 Translation dialogue

To work with the translation dialogue, you must first specify the options in the project properties,

The native approach is to first mark up the (English) texts to be translated in the source text editor in the usual way as with (“Time”) and then translate them into the desired target languages in the translation dialogue.

Example 1

<%
Main.SiteList = [("Home"), ("Time"), ("Date"), ("Multimedia"), ("DBReport"), ("Imprint")]
%>

Example 2

<%
'-- Determining the identifiers for the column headings
    aFieldNamesDisplayed = ["ID", ("Firstname"), ("Surname"), ("City"), ("ZIP"), ("Street"), ("Birthday"),("Phone"), ("Mobile"), "EMail"]
%>

Example 3

 <nav class="site-nav">
   <button class="menubutton" onclick="this.classList.toggle('showmenu')">
     <% Print ("Menu") %>
   </button>
   <ul><% Print sNavItems %></ul>
 </nav>

Comment

24.6.2.5.2 Translations

In the following sections, the HTML and Gambas source texts of the web pages of the `webapp5i` project are presented and commented on. Aspects of the translation of texts are described first and foremost. The source texts are therefore only given in the extracts relevant to the translations.

24.6.2.5.2.1 Webpage Main

The webpage Main.webpage is also the most important template file in the `webapp5i` project. You can find detailed information on the template in chapter '24.6.2.3.2 Template notes'.

 [1] <%
 [2]     Dim sLang, sLangHTML As String
 [3]
 [4] '-- The browser tells the server which language (locale) it is set to via Request.Language.
 [5]     System.Language = Request.Language ' Example: de_DE.UTF-8
 [6]
 [7]     Main.CurrentSiteList = [("Home"), ("Time"), ("Date"), ("Multimedia"), ("DBReport"), ("Imprint")]
 [8]
 [9]     Select System.Language
 [10]       Case "de_DE.UTF-8", "de_CH.UTF-8"
 [11]         sLang = "de"
 [12]       Case "it_IT.UTF-8"
 [13]         sLang = "it"
 [14]       Case "en_GB.UTF-8"
 [15]         sLang = "en"
 [16]       Default
 [17]         sLang = "en"
 [18]     End Select
 [19]
 [20]     If sLang Then
 [21]        sLangHTML = "<html lang=" & "\"" & sLang & "\"" & ">"
 [22]     Else
 [23]        sLangHTML = ""
 [24]     Endif
 [25]
 [26]     If Not Request.Query Then
 [27]        Main.CurrentSite = Main.CurrentSiteList[0]
 [28]     Else
 [29]        If InStr(Request.Query, "=") Then
 [30]           Main.CurrentSite = Split(Request.Query, "=")[1]  ' Example: `Start` for `de_DE.UTF-8`
 [31]        Endif
 [32]     Endif
 [33]   %>
 [34]
 [35]   <!DOCTYPE html>
 [36]     <% Print sLangHTML %>
 [37]
 [38]     <!-- BEGIN SITE-HEAD  ------------------------------------------------------- -->
 [39]       <head>
 [40]         <meta charset="UTF-8">
 [41]         ...
 [42]         <!-- The title of the web page is displayed in the browser tab!
 [43]         <title><%=Main.CurrentSite%></title>
 [44]     ...
 [45]     <!-- END SITE-HEAD  --------------------------------------------------------- -->
 [46]
 [47]     <body onload="JSTimer1();">
 [48]       <<IncHeader>>
 [49]       <<IncNavigation>>
 [50]       <br>
 [51]       <main>
 [52]         <<IncContent>>
 [53]       </main>
 [54]       <<IncFooter>>
 [55]     </body>
 [56]   </html>

Comment

24.6.2.5.2.2 Webpage IncHeader

In the webpage IncHeader, only the slogan of the website is to be translated in the translation dialogue:

 [1] <!-- BEGIN: SITE-HEADER -->
 [2]   <header class="site-header">
 [3]     <img class="site-logo" src="./icons/logo3_256x256.svg" alt="Gambas-Logo">
 [4]     <div class="slogan">
 [5]       <p>
 [6]         <% Print ("Create web pages with Gambas-Webpage") %>
 [7]       </p>
 [8]     </div>
 [9]   </header>
 [10] <!-- END: SITE-HEADER -->

Comment

24.6.2.5.2.3 Webpage IncFooter

There is currently nothing to translate on the IncFooter webpage:

 [1] <!--BEGIN SITE-FOOTER -->
 [2]   <footer class="site-footer">
 [3]     <p style="display:inline; padding: 0 0 0 1rem;">
 [4]       <img src="./icons/clock_white_510.svg" alt="CurrentTime" width="16" height="16">
 [5]     </p>
 [6]     <p id="set_time"></p>
 [7]     <p>
 [8]       <a href="#top">
 [9]         <img src="./icons/top_white.314.svg" alt="ToTop" width="16" height="16">
 [10]       </a>
 [11]     </p>
 [12]   </footer>
 [13] <!-- END SITE-FOOTER -->

Comment

24.6.2.5.2.4 Webpage IncHome

For very long text passages, such as in the start webpage or in the webpage with the imprint, it is a good plan to translate the entire page completely and to select the translations in a select-case control structure depending on the value of the System.Language variable:

 [1] <%
 [2]   Select System.Language
 [3]   Case "de_DE.UTF-8" %>
 [4]   <h1>Willkommen</h1>
 [5]     <section>
 [6]       <!-- Bild mit Größenangaben und Bild-Unterschrift -->
 [7]       <figure>
 [8]         ...
 [9]         <figcaption>The founder of the Gambaflex company</figcaption>
 [10]       </figure>
 [11]       <h2>Firmengeschichte</h2>
 [12]       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
 [13]       <h3>Der Neuanfang</h3>
 [14]       ...
 [15]     </section>
 [16]   <%
 [17]   Case "it_IT.UTF-8" %>
 [18]   <h1>Benvenuti</h1>
 [19]     <section>
 [20]       <!-- Immagine con informazioni sulle dimensioni e didascalia dell'immagine -->
 [21]       <figure>
 [22]         ...
 [23]         <figcaption>Il fondatore dell'azienda Gambaflex</figcaption>
 [24]       </figure>
 [25]       <h2>Storia dell'azienda</h2>
 [26]       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
 [27]       <h3>Il nuovo inizio</h3>
 [28]       ...
 [29]     </section>
 [30]   <%
 [31]   Default %>
 [32]   <h1>Welcome</h1>
 [33]     <section>
 [34]       <!-- Image with size information and image caption -->
 [35]       <figure>
 [36]         ...
 [37]         <figcaption>The founder of the Gambaflex company</figcaption>
 [38]       </figure>
 [39]       <h2>History of the company</h2>
 [40]       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
 [41]       <h3>The new start</h3>
 [42]       ...
 [43]     </section>
 [44] <% End Select %>

24.6.2.5.2.5 Webpage IncImprint

The webpage IncImprint is also completely translated and the translations are again selected in a select-case control structure depending on the value of the variable System.Language!

 [1]   <%
 [2]   Dim sCopyright As String
 [3]
 [4]   Select System.Language
 [5]     Case "de_DE.UTF-8"
 [6]     sCopyright = File.Load("./.public/text_modules/de_copyright.html") %>
 [7]       <h1>Impressum</h1>
 [8]       <p>Angaben gemäß §5 Telemediengesetz (TMG)</p>
 [9]       Bruno Bär<br>
 [10]       Bodenstein-Strasse 122<br>
 [11]       10404 Berlin<br>
 [12]       <br>
 [13]       <h3>Erreichbarkeit</h3>
 [14]       ...
 [15]       <h3>Hinweise zum Urheberrecht</h3>
 [16]       <p><%=sCopyright%></p>
 [17]       ...
 [18]       <br>
 [19]   <%
 [20]     Case "it_IT.UTF-8"
 [21]     sCopyright = File.Load("./.public/text_modules/it_copyright.html") %>
 [22]       <h1>Imprint</h1>
 [23]       <p>Informazioni secondo il §5 di Telemedia Act (TMA)</p>
 [24]       Bruno Bär<br>
 [25]       Bodenstein-Strasse 122<br>
 [26]       10404 Berlin<br>
 [27]       <br>
 [28]       <h3>Accessibilità</h3>
 [29]       ...
 [30]       <h3>Note sul copyright</h3>
 [31]       <p><%=sCopyright%></p>
 [32]       ...
 [33]       <br>
 [34]     <%
 [35]     Default
 [36]     sCopyright = File.Load("./.public/text_modules/en_copyright.html") %>
 [37]       <h1>Imprint</h1>
 [38]       <p>Information according to §5 Telemedia Act (TMA)</p>
 [39]       Bruno Bär<br>
 [40]       Bodenstein-Strasse 122<br>
 [41]       10404 Berlin<br>
 [42]       <br>
 [43]       <h3>Accessibility</h3>
 [44]       ...
 [45]       <h3>Notes on copyright</h3>
 [46]       <p><%=sCopyright%></p>
 [47]       ...
 [48]       <br>
 [49]   <% End Select %>

Comment

Nella misura in cui in questo sito web vengono citati termini protetti dal diritto dei marchi, marchi protetti (parole e/o immagini) o nomi di prodotti protetti, segnaliamo espressamente 
che la denominazione di questi marchi, nomi e termini serve esclusivamente alla descrizione editoriale o all'identificazione dei prodotti e/o dei produttori citati o delle tecnologie e 
degli usi descritti. Tutti i diritti sui marchi protetti e/o sui nomi dei prodotti citati in questo libro online sono di proprietà dei rispettivi titolari dei diritti e vengono qui 
espressamente riconosciuti. Tutti i marchi e le marche citati negli articoli dei singoli capitoli ed eventualmente protetti da terzi sono soggetti senza limitazioni alle disposizioni 
della legge sui marchi rispettivamente in vigore e ai diritti di proprietà dei rispettivi titolari registrati. La menzione di nomi di prodotti, di prodotti e/o dei rispettivi 
produttori ha scopo puramente informativo e non costituisce pubblicità. Se, contrariamente alle nostre intenzioni, dovessero essere violati i diritti di terzi, vi prego di comunicarmelo senza alcun costo.

This procedure with the (longer, translated) texts to be inserted into an existing website would also work well for a news website, where you could publish the latest information promptly.

24.6.2.5.2.6 Webpage IncNavigation

The special feature with regard to translations in the IncNavigation webpage is that you only translate one text directly in the translation dialogue, but adopt existing translations for the menu entries:

 [1] <%
 [2]   Dim sLink, sNavItems As String
 [3]   Dim i As Integer
 [4]
 [5]   For i = 0 To Main.CurrentSiteList.Max
 [6]     If Main.CurrentSiteList[i] = Main.CurrentSite Then
 [7]        sLink = Application.Root & "?" & "site=" & Main.CurrentSite
 [8]        sNavItems &= "<li class=" & Chr(34) & "site-current" & Chr(34) & "><a href=" & Chr(34) & sLink & Chr(34) & ">" & Main.CurrentSite & "</a></li>" & gb.Lf
 [9]     Else
 [10]        sLink = Application.Root & "?" & "site=" & Main.CurrentSiteList[i]
 [11]        sNavItems &= "<li><a href=" & Chr(34) & sLink & Chr(34) & ">" & Main.CurrentSiteList[i] & "</a></li>" & gb.Lf
 [12]     Endif
 [13]   Next
 [14] %>
 [15] <nav class="site-nav">
 [16]    <!-- Switching with the Toogle button between horizontal and vertical menu at SCREEN < 600px -->
 [17]    <button class="menubutton" onclick="this.classList.toggle('showmenu')">
 [18]      <% Print ("Menu") %>
 [19]    </button>
 [20]    <ul>
 [21]      <% Print sNavItems %>
 [22]    </ul>
 [23] </nav>

Comment

HH-MENÜ

Figure 24.6.2.5.2: Vertical menu in German language

24.6.2.5.2.7 Webpage IncTime

In the webpage IncTime, the text `Current time:` in the translation dialogue in the IDE is only translated into the target languages in line 4:

 [1] <!-- BEGIN: INSERT CURRENT TIME -->
 [2]   <div class="thin-box">
 [3]     <figure>
 [4]       <h2><% Print ("Current time:") %></h2>
 [5]       <h3 id="set_time"></h3>
 [6]     </figure>
 [7]   </div>
 [8] <!-- END: INSERT CURRENT TIME -->

24.6.2.5.2.8 Webpage IncDate

Depending on the value of the System.Language variable, date specifications are generated in a specific style (weekday, day (number), month name and year) for the German, English and Italian languages.

For the English date, an entry such as “Thursday, 12 October 2022” would be sufficient. However, ordinal numbers should be used. Ordinal numbers are not marked by a dot, but by a short character string (st, nd, rd and th), which is defined according to the scheme below (lines 11 to 26).

In Italian, the date is written in the above style in lower case and without punctuation (example: martedì 24 gennaio 2023). A deviation from this is that the day of the week always begins with a capital letter because it is at the beginning of a line.

DE EN IT

 [1] <%
 [2]   Dim sDate As String
 [3]   Dim sDay As String
 [4]   Dim sOrdinalNumber As String
 [5]
 [6]   Select System.Language
 [7]     Case "de_DE.UTF-8"
 [8]       sDate = Format(Now, "dddd, d. mmmm yyyy")
 [9]     Case "en_GB.UTF-8"
 [10]       Select Day(Now)
 [11]         Case 1
 [12]           sOrdinalNumber = "1st"
 [13]         Case 2
 [14]           sOrdinalNumber = "2nd"
 [15]         Case 3
 [16]           sOrdinalNumber = "3rd"
 [17]         Case 21
 [18]           sOrdinalNumber = "21st"
 [19]         Case 22
 [20]           sOrdinalNumber = "22nd"
 [21]         Case 23
 [22]           sOrdinalNumber = "23rd"
 [23]         Case 31
 [24]           sOrdinalNumber = "31st"
 [25]         Default
 [26]           sOrdinalNumber = "th"
 [27]       End Select
 [28]       sDate = Format(Now, "dddd, ") & Format(Now, "d") & sOrdinalNumber & Format(Now, " mmmm yyyy")
 [29]     Case "it_IT.UTF-8"
 [30]       sDay = Format(Now, "dddd")
 [31]       sDate = UCase(Left(sDay)) & Mid(sDay, 2) & "  " & Format(Now, "d mmmm yyyy")
 [32]     Default
 [33]       sDate = Format(Now, "dddd, d mmmm yyyy")
 [34]    End Select
 [35] %>
 [36] <!-- BEGIN: INSERT CURRENT DATE -->
 [37]   <div class="thin-box">
 [38]     <figure>
 [39]       <h2><% Print ("Current date:") %></h2>
 [40]       <h3><% Print sDate %></h3>
 [41]     </figure>
 [42]   </div>
 [43] <!-- END: INSERT CURRENT DATE -->

Comment

24.6.2.5.2.9 Webpage IncMultimedia

In the IncMultimedia webpage, all six translations for the target languages are made in the translation dialogue in lines 6, 11, 18, 23, 30 and 35.

 [1]      <h1>Multimedia</h1>
 [2]
 [3] <!-- INSERT IMAGE -->
 [4]      <div class="thin-box">
 [5]        <h3>
 [6]          <% Print ("Insert images flexibly") %>
 [7]        </h3>
 [8]        <figure>
 [9]          <img src="./images/tom_780x1012.jpg" alt="Tom" width="343" height="445">
 [10]          <figcaption>
 [11]            <% Print ("Tom in rock concert in Berlin") %>
 [12]          </figcaption>
 [13]        </figure>
 [14]      </div>
 [15] <!-- INSERT AUDIO -->
 [16]      <div class="thin-box">
 [17]        <h3>
 [18]          <% Print ("Insert audio files") %>
 [19]        </h3>
 [20]        <figure>
 [21]          <audio src="./audiovideo/tom.ogg" type="audio/ogg" controls></audio>
 [22]          <figcaption>
 [23]            <% Print ("Singer: Tom - the Berliner") %>
 [24]          </figcaption>
 [25]        </figure>
 [26]      </div>
 [27] <!-- INSERT VIDEO -->
 [28]      <div class="thin-box">
 [29]        <h3>
 [30]          <% Print ("Insert video files") %>
 [31]        </h3>
 [32]        <figure>
 [33]          <video src="./audiovideo/viehscheid.mp4" controls></video>
 [34]          <figcaption>
 [35]            <% Print ("Cattle drive in Gunzesried (Allgäu)") %>
 [36]          </figcaption>
 [37]        </figure>
 [38]      </div>

Download

Project

Download