Welche Möglichkeiten gibt es, um Bibeltexte in verschiedenen Übersetzungen per HTML umzuschalten?
- Einführung
- Übersetzungsumschaltung mit JavaScript und HTML
- Beispiel einer einfachen Umsetzung
- Fortgeschrittene Ansätze und Erweiterungen
- Fazit
Einführung
Wenn man Bibeltexte auf einer Webseite in mehreren Übersetzungen anbieten möchte, stellt sich die Frage, wie man zwischen diesen Übersetzungen bequem und benutzerfreundlich umschalten kann. Da Bibeltexte in verschiedenen Versionen vorliegen, etwa Luther 2017, Elberfelder oder Neue Genfer Übersetzung, sollte der Austausch dynamisch erfolgen, ohne die Webseite neu zu laden. Es gibt verschiedene Ansätze, wie sich das mit HTML, CSS und JavaScript realisieren lässt.
Übersetzungsumschaltung mit JavaScript und HTML
Eine der einfachsten Methoden besteht darin, alle Übersetzungen bereits im HTML-Dokument zu hinterlegen, beispielsweise in separaten <div>-Elementen oder innerhalb von <span>-Tags, und per CSS nur die jeweils gewünschte Übersetzung anzuzeigen. Ein Dropdown-Menü oder Buttons ermöglichen dem Benutzer, die aktive Übersetzung auszuwählen, was ein JavaScript-Event auslöst. Dabei wird die Sichtbarkeit der entsprechenden Texte so gesteuert, dass immer nur eine Übersetzung sichtbar ist. Dieser Ansatz erfordert keine Serveranfragen zur Laufzeit.
Beispiel einer einfachen Umsetzung
Im Folgenden ein minimalistisches Beispiel, das drei Übersetzungen eines Bibeltextes enthält und einen Select-Element zur Umschaltung verwendet:
<div class="translation-selector"> <label for="bible-version">Übersetzung wählen:</label> <select id="bible-version"> <option value="luther" selected>Luther 2017</option> <option value="elberfelder">Elberfelder</option> <option value="ngue">Neue Genfer Übersetzung</option> </select></div><div id="bible-texts"> <div class="bible-text" data-version="luther"> <p>Denn also hat Gott die Welt geliebt... (Luther 2017)</p> </div> <div class="bible-text" data-version="elberfelder" style="display:none;"> <p>Denn so sehr hat Gott die Welt geliebt... (Elberfelder)</p> </div> <div class="bible-text" data-version="ngue" style="display:none;"> <p>Weil Gott die Welt so sehr geliebt hat... (Neue Genfer Übersetzung)</p> </div></div><script>document.getElementById(bible-version).addEventListener(change, function() { const selected = this.value; const texts = document.querySelectorAll(.bible-text); texts.forEach(div => { if(div.getAttribute(data-version) === selected) { div.style.display = block; } else { div.style.display = none; } });});</script>Fortgeschrittene Ansätze und Erweiterungen
Für umfangreichere Webseiten oder Apps mit vielen Versen kann es sinnvoll sein, die Bibeltexte extern in Dateien (z.B. JSON oder XML) abzulegen und per JavaScript bei Auswahl einer Übersetzung zu laden. Dadurch lässt sich die Seite schlanker halten und Aktualisierungen der Texte erfolgen zentral. Besonders bei großen Datenmengen sind Filtermechanismen und Lazy Loading hilfreich.
Auch Frameworks wie React, Vue oder Angular bieten komfortable Methoden zur dynamischen Inhaltsverwaltung. Hier können Zustände gepflegt und Texte einfach eingebunden werden, ebenso wie Persistenz für die zuletzt ausgewählte Übersetzung.
Zusätzlich lassen sich Barrierefreiheit und Benutzerfreundlichkeit erhöhen, indem neben Dropdowns auch Tastaturbedienung und ARIA-Attribute berücksichtigt werden.
Fazit
Die Umschaltung von Bibeltexten in verschiedenen Übersetzungen auf Webseiten lässt sich problemlos mit reinem HTML, CSS und JavaScript realisieren. Je nach Umfang und Anforderungen kann man einfache Show/Hide-Methoden nutzen oder externe Datenquellen anbinden. Die Wahl des Ansatzes hängt von der Komplexität der Anwendung und den gewünschten Benutzererfahrungen ab.