GAMBAS BOOK 3.19.1

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:

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:

• the title of the website in the tab after the red favicon,
• the website logo in the header,
• the navigation,
• the DB report heading with the following date and time of the DB report output and
• the field names in the table header.

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.

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

• that the project can be translated and
• select the default language 'English (UK)'.

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

• Translations can only be made in a Gambas block. Either in a Gambas class file *.class, which always belongs to a webpage *webpage, or in a Gambas block in the HTML source code of a webpage.
• A Gambas block in HTML begins with the opening tag <% and ends with the closing tag %>; as in example 3 with the Gambas block <% Print (“Menu”) %>.
• If you want to translate into another language, you only need to insert the translations in the translation dialogue - without having to make any changes in the source text. Hence the recommendation: Use the native approach to translation wherever possible.
• Please note: If you change the English text to be translated, all translations of this text in all target languages will be completely deleted!

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.

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

• The value of the System.Language variable is defined in line 5. For example, the Gambas book author Gianluigi from Genoa sees the web pages in the webapp5i project in Italian, while the Gambas user Dag from Spain sees the English version of the website.
• In lines 9 to 18, the value of the variable sLang that matches the determined language is defined in a select-case control structure. In the following IF control structure in lines 20 to 24, the HTML source text is generated, which is then output in line 36.
• In line 45, the (translated) current page name is displayed in the browser tab.
• On the first call, the value of Request.Query is empty and the start page is displayed in the determined language. Otherwise, the request string is parsed and the requested website is generated and displayed as the current website.

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

• The webpage IncHeader as part of the website template is integrated into each webpage to be delivered with «IncHeader» in the webpage Main.webpage.
• In line 5, the English text or its translation is output in a <p> tag depending on the value of the System.Language variable.

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

• This would change if, for example, you output the current date in a special format - as in the IncDate webpage - before outputting the current time (line 6).
• The IncFooter webpage as part of the website template is integrated into every webpage to be delivered with «IncFooter» in the Main.webpage.

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 %>

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

• You can discover special features in lines 6, 21 and 36. The longer, translated text for the section with the notes on copyright is stored in three files (de_copyright.html, en_copyright.html and it_copyright.html), which are saved in the .public/text_modules directory.
• In lines 6, 21 and 36, the content of the loaded text file is assigned as a value to the declared string variable sCopyright in a Gambas block <%=sCopyright%>. For example, this is the content of the text file it_copyright.html:

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.

• The current content of the string variable sCopyright is selected in a select-case control structure depending on the value of the variable System.Language and inserted into the web page in lines 16, 32 or 48.
• You can edit the various text files at any time with the appropriate rights on the web server or prepare them locally and then copy them to the web server in the appropriate directory.

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.

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

• In lines 7 and 10, you adopt the translations of the menu entries in the string array Main.CurrentSiteList depending on the value of the variable System.Language from the webpage Main.webpage.
• Only the word 'Menu' in line 18 is translated. However, you will only see the (English) word or its translation in the target language if the so-called 'hamburger menu' is displayed. You will see the symbol for the vertical menu if the output screen is smaller than a predefined size - defined in the CSS file navigation.css.

Figure 24.6.2.5.2: Vertical menu in German language

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 -->

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.

 [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

• Translations in the translation dialogue are made for the target languages in line 39.
• In line 40, the current value of the string variable sDate is inserted into the HTML source text in an <h3> tag.

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>