Mini-Tool zum Übersetzen einer kompletten Webseite bearbeitet von Felix Riesterer 15.06.2022 00:20 Lieber coder1979, > ~~~ html > <select onchange="changeLang(this.value);"> > <option value="">Bitte wählen</option> > <option value="0">Deutsch</option> > <option value="1">Englisch</option> > <option value="2">Spanisch</option> > </select> > ~~~ also ich würde da [Radio-Buttons](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#Radio-Buttons) verwenden. Im `<label>`-Text würde ich die spracheigene Version notieren: ~~~ html <ul id="lang-select"> <li> <label for="de"> <input id="de" name="lang" type="radio" value="de" checked> Deutsch </label> </li> <li> <label for="en"> <input id="en" name="lang" type="radio" value="en"> English </label> </li> <li> <label for="es"> <input id="es" name="lang" type="radio" value="es"> Español </label> </li> </ul> ~~~ Das `onchange`-Attribut in HTML würde ich durch einen Aufruf von [`addEventListener()`{:.language-javascript}](https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener) in JavaScript ersetzen. Es kann reizvoll sein, die Textbausteine in einer JSON-Datei vorzuhalten, die von JavaScript geladen wird. Man kann natürlich auch alles gleich zusammen in das HTML-Dokument werfen, wenn man das kompakt in einer Datei ausliefern muss: ~~~ javascript { "links-and-layout-remain-intact": { "de": "Links und Layout bleiben erhalten", "en": "Links and layout are preserved", "es": "Se conservan los enlaces y el diseño." }, "welcome": { "de": "Herzlich Willkommen!", "en": "Warm Welcome!", "es": "¡Cálida bienvenida!" } } ~~~ Hier wird einem Schlüssel ein Objekt zugewiesen, welches für jede der Sprachen eine eigene Eigenschaft hat - der Text in der jeweiligen Landessprache. Sollte einmal eine Sprache zu einem Schlüssel fehlen, kann die Übersetzungsfunktion (oder -methode) eine Default-Sprache als Ersatz wählen - oder den Schlüssel selbst als Notlösung verwenden. Die Textbausteine können via JavaScript als `textContent`{:.language-javascript}-Eigenschaft einer DOMNode zugewiesen werden. Welche Bausteine wohin müssen, könnte man durch ein passendes Attribut angeben, sagen wir `data-i18n` (ein [data-Attribut](https://wiki.selfhtml.org/wiki/HTML/Attribute/data-*)): ~~~ html <h1 data-i18n="welcome"></h1> <p class="notice" data-i18n="links-and-layout-remain-intact"></p> ~~~ Mittels JavaScript nimmt man den Attributwert des `lang`-Attributs des `<html>`-Elements und findet nun die passende Sprachversion für den Schlüssel aus dem `data-i18n`-Attribut (also "welcome" auf "de") und schreibt das Ergebnis in die `textContent`-Eigenschaft des H1-Elementobjektes. Auf diese Weise kann man live sofort alle Textbausteine in einer anderen Sprache anzeigen lassen, also sprichwörtlich `onchange` beim jeweiligen Radio-Button. [Edit]Ich habe so etwas [schon mal verwendet](https://survey.peutinger-gymnasium.de/).[/Edit] Liebe Grüße Felix Riesterer
Mini-Tool zum Übersetzen einer kompletten Webseite bearbeitet von Felix Riesterer 15.06.2022 00:22 Lieber coder1979, > ~~~ html > <select onchange="changeLang(this.value);"> > <option value="">Bitte wählen</option> > <option value="0">Deutsch</option> > <option value="1">Englisch</option> > <option value="2">Spanisch</option> > </select> > ~~~ also ich würde da [Radio-Buttons](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Radio-Buttons_und_Checkboxen#Radio-Buttons) verwenden. Im `<label>`-Text würde ich die spracheigene Version notieren: ~~~ html <ul id="lang-select"> <li> <label for="de"> <input id="de" name="lang" type="radio" value="de" checked> Deutsch </label> </li> <li> <label for="en"> <input id="en" name="lang" type="radio" value="en"> English </label> </li> <li> <label for="es"> <input id="es" name="lang" type="radio" value="es"> Español </label> </li> </ul> ~~~ Das `onchange`-Attribut in HTML würde ich durch einen Aufruf von [`addEventListener()`{:.language-javascript}](https://wiki.selfhtml.org/wiki/JavaScript/DOM/EventTarget/addEventListener) in JavaScript ersetzen. Es kann reizvoll sein, die Textbausteine in einer JSON-Datei vorzuhalten, die von JavaScript geladen wird. Man kann natürlich auch alles gleich zusammen in das HTML-Dokument werfen, wenn man das kompakt in einer Datei ausliefern muss: ~~~ javascript { "links-and-layout-remain-intact": { "de": "Links und Layout bleiben erhalten", "en": "Links and layout are preserved", "es": "Se conservan los enlaces y el diseño." }, "welcome": { "de": "Herzlich Willkommen!", "en": "Warm Welcome!", "es": "¡Cálida bienvenida!" } } ~~~ Hier wird einem Schlüssel ein Objekt zugewiesen, welches für jede der Sprachen eine eigene Eigenschaft hat - der Text in der jeweiligen Landessprache. Sollte einmal eine Sprache zu einem Schlüssel fehlen, kann die Übersetzungsfunktion (oder -methode) eine Default-Sprache als Ersatz wählen - oder den Schlüssel selbst als Notlösung verwenden. Die Textbausteine können via JavaScript als `textContent`{:.language-javascript}-Eigenschaft einer DOMNode zugewiesen werden. Welche Bausteine wohin müssen, könnte man durch ein passendes Attribut angeben, sagen wir `data-i18n` (ein [data-Attribut](https://wiki.selfhtml.org/wiki/HTML/Attribute/data-*)): ~~~ html <h1 data-i18n="welcome"></h1> <p class="notice" data-i18n="links-and-layout-remain-intact"></p> ~~~ Mittels JavaScript nimmt man den Attributwert des `lang`-Attributs des `<html>`-Elements und findet nun die passende Sprachversion für den Schlüssel aus dem `data-i18n`-Attribut (also "welcome" auf "de") und schreibt das Ergebnis in die `textContent`-Eigenschaft des H1-Elementobjektes. Auf diese Weise kann man live sofort alle Textbausteine in einer anderen Sprache anzeigen lassen, also sprichwörtlich `onchange` beim jeweiligen Radio-Button. Liebe Grüße Felix Riesterer
nicht angemeldet nicht angemeldet
