Mini-Tool zum Übersetzen einer kompletten Webseite
coder1979
- html
- javascript
- meinung
Hi zusammen,
ich war auf der Suche nach einem passenden Javascript-Code, mit dem ich eine bestehende kleine Webapp relativ schnell (OHNE Datenbank-Anbindung und OHNE extra Dateien (wie z.B. JSON)) auf Knopfdruck übersetzen lassen kann. In meinem Fall gehts um ein paar HTML Seiten, die auf einem ESP32 Mikrocontroller per Webserver dargestellt werden. Das Ganze soll auch ohne Internetverbindung funktionieren.
Da ich nichts passendes gefunden habe, habe ich mich einfach mal selber drangesetzt und ein paar Zeilen Code geschrieben.
Wäre nett, wenn ihr Profis mal drüber schaut, ob man da noch was verbessern kann. Hier ist mein Versuch:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language-Test</title>
</head>
<body>
<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>
<div id="translation_area">
<div class="card-header">
<h1>Herzlich Willkommen</h1>
</div>
<div class="card-body" style="text-align:center;">
<div class="welcome_message">
<div style="border:1px solid #000;padding:10px;">
<p>Hier steht ein beliebiger <a href="/ersterLink">Text</a> mit jede Menge Verlinkungen und HTML-Tags</p>
<p>Die Übersetzung des Textes wird <a href="/andererLink">aus einem Javascript Array</a> je nach gewählter Sprache geladen.</p>
<button class="btn-small">Links und Layout bleiben erhalten</button>
</div>
</div>
</div>
</div>
</body>
<script>
// Text-Arrays
var text_arr = [
{"text" : "Herzlich Willkommen", "translation_en" : "Welcome to our website", "translation_es" : "Una cálida bienvenida"},
{"text" : "Hier steht ein beliebiger", "translation_en" : "Here is an arbitrary", "translation_es" : "Aquí tienes un"},
{"text" : "Text", "translation_en" : "text", "translation_es" : "texto"},
{"text" : "mit jede Menge Verlinkungen und HTML-Tags", "translation_en" : "with lots of links and HTML tags", "translation_es" : "arbitrario con muchos enlaces y etiquetas HTML"},
{"text" : "La traducción del texto se carga", "translation_en" : "The translation of the text is loaded", "translation_es" : ""},
{"text" : "aus einem Javascript Array", "translation_en" : "from a Javascript array ", "translation_es" : "desde un array de Javascript"},
{"text" : "je nach gewählter Sprache geladen.", "translation_en" : "depending on the selected language.", "translation_es" : "en función del idioma seleccionado."},
{"text" : "Links und Layout bleiben erhalten", "translation_en" : "Links and layout remain", "translation_es" : "Los enlaces y el diseño siguen siendo los mismos"},
];
var setLang = localStorage.getItem("setLang");
if (setLang=="") {
setLang=0;
}
load_langTexte(setLang, "translation_area")
function load_langTexte(newLang, div_area) {
newLang = parseInt(newLang);
if (newLang >0) {
setLang=newLang;
const elements = document.querySelectorAll('#'+div_area);
var original_code="";
elements.forEach(element => {
var el_split=element.innerHTML.split("\n");
el_split.forEach(element_split => {
var original_text="";
var translated_string="";
var tmp_string="";
var text_translation="";
let strippedString = element_split.replace(/(<([^>]+)>)/gi, "*");
if (strippedString.trim()=="*") {
// Es handelt sich nur um einen Tag, daher wird nichts übersetzt
translated_string=element_split;
} else {
tmp_string=element_split;
var el_split_final=strippedString.split("*");
el_split_final.forEach(strString => {
if (strString.trim() != "") {
original_text=strString.trim();
var austauschtext=text_arr.filter(function (text_part) { return text_part.text == original_text });
austauschtext.forEach(function (item, index) {
switch (setLang) {
case 1:
text_translation=item.translation_en;
break;
case 2:
text_translation=item.translation_es;
break;
}
});
if (austauschtext!="") {
tmp_string=tmp_string.replace(original_text, text_translation);
} else {
// Nur für Entwicklung: alle nicht gefundenen Texte werden in Console als leeres Objekt vorbereitet eingeblendet
// Dann kann man den Array gleich in den Code kopieren und alle Übersetzungen einbauen (ich nutze www.deepl.com)
console.log('{"text" : "' +original_text+ '", "translation_en" : "", "translation_es" : ""},');
}
}
});
translated_string=tmp_string;
}
original_code += translated_string;
});
});
document.getElementById(div_area).innerHTML=original_code;
}
}
function changeLang(newLang) {
localStorage.setItem("setLang", newLang);
window.location.reload();
}
</script>
</html>
Die zuletzt gewählte Sprache wird im localStorage gespeichert, sodass beim neuen Laden der Seite automatisch die richtige Sprache angezeigt wird.
Mir war es außerdem wichtig, dass ich jederzeit an den HTML Tags Änderungen machen kann und die Funktionalität davon unberührt bleibt.
Mich würde aber mal interessieren, ob man sowas smarter machen kann und vor allem, ob das Cross-Browser-tauglich ist.
LG Daniel
Mich würde aber mal interessieren, ob man sowas smarter machen kann
Einigen wir uns auf „anders“?
und vor allem, ob das Cross-Browser-tauglich ist.
Hm. Wenn man die Suchmaschinen-Bots als „Browser“ ansieht, dann ist das wohl „nur bedingt“ tauglich. Es kommt halt darauf an, ob Du willst, dass Google, Bing & Co. auch Deine Übersetzungen finden. Die füllen aber (soweit man weiß wie ich aus guten Gründen heraus vermute) dazu keine Formulare aus.
Wie wäre es mit „etwas serverseitigem“? PHP? Das ist nicht komplizierter als JS…
Hier schon mal ein anderer Ansatz für die Auswahl der Sprache. Die Idee entstand übrigens durch eine Diskussion hier im Forum.
ESP32 Mikrocontroller
Der ist jetzt nicht das Werkzeug, um ganze, öffentlich abrufbare Webseiten (warum willst Du sonst übersetzen und fragst nach Cross-Browser-Tauglichkeit?) zu erzeugen. Den würde ich via HTTP eher von PHP, Python oder Co. nach Daten oder Datentupeln im JSON-Format fragen lassen (und diese zur Vermeidung von Überlasten auch cachen) und diese Daten in eine öffentlich abrufbare Webseite einbauen.
Wie wäre es mit „etwas serverseitigem“? PHP? Das ist nicht komplizierter als JS…
Hi,
ich arbeite sehr viel mit PHP/MySQL aber in dem Fall kommt das nicht in Frage, da das Projekt auch OHNE Internetverbindung funktionieren soll. Mag schon sein, dass man evtl. auch mit einem ESP32 in Verbindung mit dem lokalen Speicher (LittleFS) PHP lokal betreiben kann, wäre mir in dem Fall aber zu kompliziert.
In meinem Fall geht es nur um ein paar einzelne HTML-Seiten die jeweils ein paar Texte enthalten und ich möchte alles innerhalb der HTML-Datei abwickeln (also ohne externe JSON Files, Datenbanken, etc.).
LG Daniel
Nein. Es geht darum, dass Du die Webseite auf einem ANDEREM Server hostest, auf dem auch PHP hast.
In PHP baust Du die Seite und holst NUR die Daten (Also gerade keine ganze Webseite) mit http vom ESP32, baust diese in die Webseite ein. Ein Cache für die Daten dürfte eine gute Idee sein, um den ESP nicht zu überlasten.
Außerdem muss der ESP32 dazu nicht aus dem Internet erreichbar sein.
Oder willst Du die Übersetzung nur aus sportlichen Gründen?
Hallo,
ich war auf der Suche nach einem passenden Javascript-Code, mit dem ich eine bestehende kleine Webapp relativ schnell (OHNE Datenbank-Anbindung und OHNE extra Dateien (wie z.B. JSON)) auf Knopfdruck übersetzen lassen kann.
so wie ich das versehe, geht es tatsächlich nur um ein paar statische Seiten, die da zu übersetzen wären. Wenn du ds Zeug also nicht selbst "zu Fuß" übersetzen willst, würde ich den ganzen Text bei https://www.deepl.com reinkippen. Das ist derzeit die beste Obline-Übersetzung, die ich kenne.
In meinem Fall gehts um ein paar HTML Seiten, die auf einem ESP32 Mikrocontroller per Webserver dargestellt werden. Das Ganze soll auch ohne Internetverbindung funktionieren.
Das ist erst recht ein Argument, dem ESP32 als Server fertiges Material vorzusetzen, das der 1:1 ausliefern kann.
Einen schönen Tag noch
Martin
so wie ich das versehe, geht es tatsächlich nur um ein paar statische Seiten, die da zu übersetzen wären. Wenn du ds Zeug also nicht selbst "zu Fuß" übersetzen willst, würde ich den ganzen Text bei https://www.deepl.com reinkippen. Das ist derzeit die beste Obline-Übersetzung, die ich kenne.
Meine Übersetzungen hole ich auch mit deepl.com
Das ist erst recht ein Argument, dem ESP32 als Server fertiges Material vorzusetzen, das der 1:1 ausliefern kann.
Du meinst quasi pro Sprache immer eine komplett übersetzte HTML Datei? D.h. wenn mein Projekt aus 5 HTML-Seiten besteht und ich 10 Sprachen hab, würde das 50 Dateien ergeben.
Mir ist es aber lieber, ich hab nur 5 Dateien und diese laden die Sprachtexte jeweils in die DIVs rein.
D.h. meine ursprüngliche Frage bezog sich eher darauf, ob mein Javascript-Code, mit dem ich die Texte nach der Sprachauswahl austausche, noch optimiert werden kann.
Einen schönen Tag noch
Martin
Dankeschön :-) Dir/euch auch
Lieber coder1979,
<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 verwenden. Im <label>
-Text würde ich die spracheigene Version notieren:
<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()
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:
{
"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
-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):
<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.[/Edit]
Liebe Grüße
Felix Riesterer
@@Felix Riesterer
also ich würde da Radio-Buttons verwenden.
Schon besser. select
ist für ein Sprachauswahlmenü ungeeignet.
Im
<label>
-Text würde ich die spracheigene Version notieren:
Und das sollte dann auch im lang
-Attribut angegeben werden.
<ul id="lang-select">
<li>
<label for="de" lang="de">
<input id="de" name="lang" type="radio" value="de" checked>
Deutsch
</label>
</li>
<li>
<label for="en" lang="en">
<input id="en" name="lang" type="radio" value="en">
English
</label>
</li>
<li>
<label for="es" lang="es">
<input id="es" name="lang" type="radio" value="es">
Español
</label>
</li>
</ul>
Und wo wir gerade dabei sind: Bei der Umschaltung der Sprache ist nicht nur der Text umzuschalten, sondern auch die Angabe der Sprache muss per JavaScript erfolgen – natürlich nach dem Reload:
document.documentElement.lang = newLang;
Aber nochmal zurück zu den Radio-Buttons: Radio-Buttons sind Elemente zur Dateneingabe. Hier ist aber kein Formular, d.h. keine Dateneingabe. Sieht für mich nach missbräuchlicher Verwendung aus.
Das sollten richtige Buttons sein. Wenn nicht gar Links zur den anderen Sprachversionen.
🖖 Живіть довго і процвітайте
Lieber Gunnar,
Im
<label>
-Text würde ich die spracheigene Version notieren:Und das sollte dann auch im
lang
-Attribut angegeben werden.
das ist richtig. Das sollte noch sein.
Das sollten richtige Buttons sein. Wenn nicht gar Links zur den anderen Sprachversionen.
Dann klappt es mit den assistiven Technologien noch besser.
Übrigens hatte ich alle diese Deine Anmerkungen damals schon umgesetzt. Deswegen hatte ich das Projekt auch verlinkt, damit man diese Mechanismen sehen und den Code dazu nachverfolgen kann.
Liebe Grüße
Felix Riesterer
Lieber coder1979,
<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 verwenden. Im
<label>
-Text würde ich die spracheigene Version notieren:<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 vonaddEventListener()
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:
{ "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
-Eigenschaft einer DOMNode zugewiesen werden. Welche Bausteine wohin müssen, könnte man durch ein passendes Attribut angeben, sagen wirdata-i18n
(ein data-Attribut):<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 demdata-i18n
-Attribut (also "welcome" auf "de") und schreibt das Ergebnis in dietextContent
-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.[/Edit]
Liebe Grüße
Felix Riesterer
Hi Felix,
super Danke! Genau nach dem Tipp hab ich gesucht. Die Sprachauswahl mach ich tatsächlich später anders (mit Flaggen), in meinem Beispiel war das nur die Dirty-Variante. Aber dein Tipp mit dem JSON-Array und dem Schlüssel/Data-Attribut find ich deutlich besser als meinen Ansatz (und auch Pflegeleicher und wahrscheinlich deutlich schneller)
Hallo coder1979,
Die Sprachauswahl mach ich tatsächlich später anders (mit Flaggen), in meinem Beispiel war das nur die Dirty-Variante.
Internationalisierung#Sprachauswahl-Menu
Information: Warum Sprachen nichts mit Länderflaggen zu tun haben
Bis bald!
Jonathan
@@coder1979
Genau nach dem Tipp hab ich gesucht. Die Sprachauswahl mach ich tatsächlich später anders (mit Flaggen)
Dann suchst du auch noch nach genau diesem Tipp Über Sprachen und Flaggen.
🖖 Живіть довго і процвітайте
@@coder1979
Genau nach dem Tipp hab ich gesucht. Die Sprachauswahl mach ich tatsächlich später anders (mit Flaggen)
Dann suchst du auch noch nach genau diesem Tipp Über Sprachen und Flaggen.
🖖 Живіть довго і процвітайте
Cool Danke. Leuchtet ein, manchmal denkt man nicht so weit, bis einer einen drauf aufmerksam macht.
LG Daniel
Hallo,
Dann suchst du auch noch nach genau diesem Tipp Über Sprachen und Flaggen.
und dort möchtest du bestimmt auch den Schreibfehler accessabily ausbessern. 🤓
Einen schönen Tag noch
Martin
@@Der Martin
Dann suchst du auch noch nach genau diesem Tipp Über Sprachen und Flaggen.
und dort möchtest du bestimmt auch den Schreibfehler accessabily ausbessern. 🤓
Echt jetzt, nach 11 Jahren? 😆
Wie bist du darauf gestoßen? Du hast in deinem Browser Englisch als bevorzugte Sprache eingestellt?
🖖 Живіть довго і процвітайте
Hallo Gunnar,
und dort möchtest du bestimmt auch den Schreibfehler accessabily ausbessern. 🤓
Echt jetzt, nach 11 Jahren? 😆
naja, wenn's bis jetzt niemand gemerkt hat ...
Wie bist du darauf gestoßen? Du hast in deinem Browser Englisch als bevorzugte Sprache eingestellt?
Ja, mir ist Englisch in den meisten Lebensbereichen angenehmer als Deutsch. Und dann bin ich beim Lesen einfach über die komische Schreibweise gestolpert.
Meine Rangfolge der bevorzugten Sprachen ist en-US,en,de,nl.[1]
Einen schönen Tag noch
Martin
Seit einigen Monaten habe ich vermehrt Kontakt zu den Kollegen in unserer britischen Dependance, und muss wieder einmal feststellen, dass britisches Englisch mich wesentlich mehr herausfordert als US-Englisch. Im Schriftverkehr ist es mir nahezu egal, aber wenn beim gesprochenen Englisch noch der Dialekt dazukommt ... ↩︎
@@Der Martin
Ja, mir ist Englisch in den meisten Lebensbereichen angenehmer als Deutsch. […] Seit einigen Monaten habe ich vermehrt Kontakt zu den Kollegen in unserer britischen Dependance
Du meinst Französisch, nicht Englisch? 😉
und muss wieder einmal feststellen, dass britisches Englisch mich wesentlich mehr herausfordert als US-Englisch. Im Schriftverkehr ist es mir nahezu egal
Ja, die s statt z fallen kaum auf. Auch nicht die u zwischen o und r.
Was nervt: einfache vs. doppelte Konsonanten. Ich muss immer wieder nachschauen, ob das Attibut aria-labeledby
oder aria-labelledby
geschrieben wird.
aber wenn beim gesprochenen Englisch noch der Dialekt dazukommt ...
Kann ich nachvollziehen. In die britischen Dialekte muss ich mich auch immer reinhören. Wie letztens bei einer Diskussionsrunde und einem Konzert mit Billy Bragg.
Warste schon mal in Irland auf’m Dorf? Hab kaum was verstanden. (Und nein, ich meine nicht die Gegenden, wo noch Irisch gesprochen wird.) Das dort im Radio gesprochene Englisch klang für mich allerdings näher am amerikanischen als am britischen und war sehr gut verständlich.
Die neuen Star-Trek-Serien (Discovery, Picard, Lower Decks, Prodigy, Strange New Worlds) sind recht bunt gemischt besetzt: Kanadier, US-Amerikaner, Briten, Iren, Australier, Israeli, Inder, … da sind haufenweise verschiedene Dialekte zu hören (wenn man im Original schaut).
🖖 Живіть довго і процвітайте
Moin,
Ja, mir ist Englisch in den meisten Lebensbereichen angenehmer als Deutsch. […] Seit einigen Monaten habe ich vermehrt Kontakt zu den Kollegen in unserer britischen Dependance
Du meinst Französisch, nicht Englisch? 😉
nicht wirklich. 😉
Französisch hatte ich 5 Jahre lang in der Schule, ich sollte es also eigentlich können. Und ja, mit viel Mühe geht es auch so einigermaßen. Der wesentliche Unterschied: Wenn ich Englisch rede oder schreibe, dann ist der Weg vom Gedanken zum gesprochenen Wort oder Satz quasi direkt, ohne dass ich bewusst darüber nachdenke. Im Französischen muss ich dagegen jeden Satz, jeden Halbsatz im Kopf erst noch übersetzen. Außerdem mochte ich die Sprache an sich noch nie.
und muss wieder einmal feststellen, dass britisches Englisch mich wesentlich mehr herausfordert als US-Englisch. Im Schriftverkehr ist es mir nahezu egal
Ja, die s statt z fallen kaum auf. Auch nicht die u zwischen o und r.
Doch, die fallen schon auf, weil ich sie nicht gewöhnt bin. Aber damit komme ich klar.
Was nervt: einfache vs. doppelte Konsonanten. Ich muss immer wieder nachschauen, ob das Attibut
aria-labeledby
oderaria-labelledby
geschrieben wird.
Ja. Oder Referer vs. Referrer.
Warste schon mal in Irland auf’m Dorf? Hab kaum was verstanden.
Ich war schon in Irland, aber hauptsächlich in Dublin (und ein Tagesausflug nach Galway). Das war völlig unproblematisch.
(Und nein, ich meine nicht die Gegenden, wo noch Irisch gesprochen wird.)
Du meinst Gälisch? - Ja, da gab's bei einem meiner Mitschüler mal einen netten Versprecher: "In Ireland, many people speak garlic." Ich glaube, die meisten Mitschüler haben den kleinen Ausrutscher gar nicht mitbekommen. Ich schon. Unser Lehrer natürlich auch.
Das dort im Radio gesprochene Englisch klang für mich allerdings näher am amerikanischen als am britischen und war sehr gut verständlich.
Ja, war auch mein Eindruck.
Einen schönen Tag noch
Martin
Hallo
aber wenn beim gesprochenen Englisch noch der Dialekt dazukommt ...
Kann ich nachvollziehen. In die britischen Dialekte muss ich mich auch immer reinhören. Wie letztens bei einer Diskussionsrunde und einem Konzert mit Billy Bragg.
Spricht der Herr Bragg nicht deutsch?
Tschö, Auge