Localization mit CSS und JS - Mehrsprachige Wbeseite

[Michael_K]

Hallo,

wie sollte man heutzutage eine mehrsprachige Webseite umsetzen, wenn dei Webseite nicht neugeladen werden soll.

Ausgangssituation: Eine Webseite wird via JS mit Inhalt "befüllt" der Inhalt liegt in verscheidenen Sprachen vor. Allerdings sit vorher nicht bekannt, um welche Sprachen es sich handelt. Nun soll über eine DropDown die jeweilige Sprache ausgewählt werden. Ich möchte ungern über den ganzen DOM per JS gehen und die zugehörigen Element je nach ausgewählter Sprache verstecken oder anzeigen. Das dürfte nicht sehr effizient sein, weil ja die Seite immer wieder neu "dargestellt" mit jeder Änderung für jedes Element.

Ich dachte nun an eine Lösung via CSS im Kombination mit JS. Etwa so etwas:

[lang] {
  display: none;
}
[lang=en] {
  display: unset;
}

Nur mit ist nicht ganz klar, wie ich mit Javascript dann den zweite CSS Selector mit der ausgewählten Sprache "überschrieben" kann. Hat da jemand einen Tipp? Mir würde auch eine Seite weiterhelfen, die erläuetert, wie die beste Lösung aktuell für solch ein Problem besteht.

Viele Grüße Michael

[Der Martin]

Hallo Michael,

wie sollte man heutzutage eine mehrsprachige Webseite umsetzen, wenn dei Webseite nicht neugeladen werden soll.

ich halte den Ansatz für falsch. Die Auswahl der Sprache sollte schon serverseitig erfolgen. Genau dafür ist ja der HTTP-Header Accept-Language im Request da.

Wie oft kommt es vor, dass jemand während des Besuchs einer Webseite die Sprache wechselt? Vermutlich ist das ein Ausnahmefall. Die Regel ist doch eher, dass die Nutzer ihren Browser so konfigurieren^[1], dass er bevorzugt Inhalte in ihrer Muttersprache anfordert (alternativ in ein, zwei weiteren Sprachen, die sie zur Not auch verstehen). Für die wenigen Fälle, in denen das nicht passt, sollte eine interaktive Sprachauswahl vorgesehen werden, die dann per Cookie oder als Teil der URL (z.B. /de/kontakt.html) dokumentiert wird und Vorrang vor dem Accept-Language-Header hat.

Eine Webseite wird via JS mit Inhalt "befüllt" der Inhalt liegt in verscheidenen Sprachen vor.

Und was ist, wenn JS (aus welchen Gründen auch immer) nicht verfügbar ist?

Allerdings sit vorher nicht bekannt, um welche Sprachen es sich handelt. Nun soll über eine DropDown die jeweilige Sprache ausgewählt werden. Ich möchte ungern über den ganzen DOM per JS gehen und die zugehörigen Element je nach ausgewählter Sprache verstecken oder anzeigen.

Nein, natürlich nicht. Das ist IMO ein Fall für ein Reload einer spezifischen Sprachvariante. Denn das macht der Besucher maximal einmal.

Live long and pros healthy,
 Martin

---

1. Entweder bewusst einstellen, oder implizit dadurch, dass sie sich einen Browser in ihrer bevorzugten Sprachversion installieren. ↩︎

[Matthias Scharwies]

Servus!

Hallo Michael,

wie sollte man heutzutage eine mehrsprachige Webseite umsetzen, wenn dei Webseite nicht neugeladen werden soll.

ich halte den Ansatz für falsch. Die Auswahl der Sprache sollte schon serverseitig erfolgen. Genau dafür ist ja der HTTP-Header Accept-Language im Request da.

Wie man so was löst, steht im Wiki: PHP/Tutorials/Sprachauswahl_mittels_Accept_Language

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Hallo,

wie sollte man heutzutage eine mehrsprachige Webseite umsetzen, wenn dei Webseite nicht neugeladen werden soll.

Anstelle des Dropdown würde ich eine Linkliste anlegen: Internationalisierung#mehrsprachige_Webseiten

Dann denn ausgelesenen Sprachangabe per setAttribute in den body setzen.

CSS kannst du mit setPropertysetzen (JavaScript/Tutorials/Stylesheets_dynamisch ändern#CSSStyleDeclaration)

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Servus!

Hallo,

wie sollte man heutzutage eine mehrsprachige Webseite umsetzen, wenn dei Webseite nicht neugeladen werden soll.

Anstelle des Dropdown würde ich eine Linkliste anlegen: Internationalisierung#mehrsprachige_Webseiten

Dann denn ausgelesenen Sprachangabe per setAttribute in den body setzen.

CSS kannst du mit setPropertysetzen (JavaScript/Tutorials/Stylesheets_dynamisch ändern#CSSStyleDeclaration)

Korrektur:

Ich habe auf der Festplatte ein halbfertiges Beispiel, in dem die einzlenen Sprachabschnitte ein hidden-Attribut haben.

Bei einer Auswahl (ich habe doch ein select-Menü) muss dass hidden-Attribut auf der bisher aktiven section gesetzt und dann bei der gewählten section entfernt werden.

<form action="" method="get">
  <label for="language" lang="de">Diese Seite in einer anderen Sprache:</label>
  <select id="language" size="6">
      <option lang="de" value="de">Deutsch</option>
      <option lang="en" value="en">English</option>
      <option lang="es" value="es">Español</option>
      <option lang="fr" value="fr">Français</option>
      <option lang="ru" value="ru">Русский</option>
      <option lang="ar" value="ar">العربية</option>
    </select>
    <button>Ändern</button>
</form>

<section lang="de">
<h2>Die Energie des Verstehens</h2>
<p>Unser Motto lautet Die Energie des Verstehens. Wir wollen bei unseren Lesern nicht nur Wissen anhäufen, sondern vielmehr zum Verstehen verhelfen. Statt fertige Lösungen von der Stange anzubieten, rüsten wir unsere Leser mit dem nötigen Werkzeug zur Selbsthilfe aus. Wir beleuchten Fragen aus vielen unterschiedlichen Blickwinkeln und versuchen dabei stets, entdeckte Probleme für alle Beteiligten bestmöglich zu lösen.</p>
</section>

<section lang="en" hidden>
<h2>The Energy of Understanding</h2>
<p>Our motto is The Energy of Understanding. We do not just want to accumulate knowledge among our readers, but rather help them to understand. Instead of offering ready-made solutions off the shelf, we provide our readers with the necessary tools for self-help. We examine questions from many different perspectives and always try to solve problems that have been discovered for all involved in the best possible way.
</p>
</section>

Herzliche Grüße

Matthias Scharwies

[Michael_K]

Vielen Dank. CSS-Variablen könnte die Lösung sein. Musss ich ausprobieren.

[Felix Riesterer]

Lieber Michael_K,

wie sollte man heutzutage eine mehrsprachige Webseite umsetzen, wenn dei Webseite nicht neugeladen werden soll.

so.

Liebe Grüße

Felix Riesterer

[Jonathan Harker]

Hallo Felix,

Lieber Michael_K,

wie sollte man heutzutage eine mehrsprachige Webseite umsetzen, wenn dei Webseite nicht neugeladen werden soll.

so.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n="page-title">Umfrageservice</title>
...
<li lang="es"><a href="/index.php/es">ver esta pagina en espa&ntilde;ol</a></li>
<li lang="fr"><a href="/index.php/fr">voir cette page en fran&ccedil;ais</a></li>
<li lang="gr"><a href="/index.php/gr">&delta;&epsilon;&#943;&tau;&epsilon; &alpha;&upsilon;&tau;&#942; &tau;&eta; &sigma;&epsilon;&lambda;&#943;&delta;&alpha; &sigma;&tau;&alpha; &Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;&#940;</a></li>
...
</ul>
</aside>
<h1 data-i18n="heading">Umfrageservice</h1>
<p data-i18n="introduction">
Umfrageservice f&uuml;r unsere Sch&uuml;ler und Lehrkr&auml;fte an. Um an einer solchen Umfrage teilzunehmen, ben&ouml;tigen ...

utf-8 anyone?

Bis bald! Jonathan

[MudGuard]

Hi,

<meta charset="utf-8">

soso, also UTF-8

<li lang="es"><a href="/index.php/es">ver esta pagina en espa&ntilde;ol</a></li>
<li lang="fr"><a href="/index.php/fr">voir cette page en fran&ccedil;ais</a></li>
<li lang="gr"><a href="/index.php/gr">&delta;&epsilon;&#943;&tau;&epsilon; &alpha;&upsilon;&tau;&#942; &tau;&eta; &sigma;&epsilon;&lambda;&#943;&delta;&alpha; &sigma;&tau;&alpha; &Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;&#940;</a></li>

warum dann die ganzen verstümmelten Zeichen?

cu,
Andreas a/k/a MudGuard

[Julius]

Hallo MudGuard,

<meta charset="utf-8">

soso, also UTF-8

<li lang="es"><a href="/index.php/es">ver esta pagina en espa&ntilde;ol</a></li>
<li lang="fr"><a href="/index.php/fr">voir cette page en fran&ccedil;ais</a></li>
<li lang="gr"><a href="/index.php/gr">&delta;&epsilon;&#943;&tau;&epsilon; &alpha;&upsilon;&tau;&#942; &tau;&eta; &sigma;&epsilon;&lambda;&#943;&delta;&alpha; &sigma;&tau;&alpha; &Epsilon;&lambda;&lambda;&eta;&nu;&iota;&kappa;&#940;</a></li>

warum dann die ganzen verstümmelten Zeichen?

Vermutlich htmlentities statt htmlspecialchars.

Gruß
Julius

[Der Martin]

Hallo Andreas,

<meta charset="utf-8">

soso, also UTF-8

warum dann die ganzen verstümmelten Zeichen?

genau das hat Jonathan doch schon vor mehr als zwei Stunden angekreidet.

Live long and pros healthy,
 Martin

[Felix Riesterer]

Lieber Jonathan,

utf-8 anyone?

die Entitäten bastelt mir die DOMDocument-Klasse hinein. Ich habe für dieses Projekt keinen HTML5-Parser eingerichtet, der diesen Wahnsinn vermeiden kann. Offensichtlich nützt mir auch die libxml-proprietäre Eigenschaft DOMDocument::substituteEntities nichts.

Liebe Grüße

Felix Riesterer

[Felix Riesterer]

Würgaround ohne HTML5-Parser:

echo '<!doctype html>',
    $doc->saveHTML($doc->documentElement);

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Michael_K

Ausgangssituation: Eine Webseite wird via JS mit Inhalt "befüllt" der Inhalt liegt in verscheidenen Sprachen vor.

Du schickst also sämtliche Texte in allen Sprachen zum Client, also haufenweise Zeug, das nie ein Nutzer lesen wird?

Nun soll über eine DropDown die jeweilige Sprache ausgewählt werden.

Keine gute Idee. Dropdowns zur Sprachauswahl sind problematisch.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Felix Riesterer]

Lieber Gunnar,

Du schickst also sämtliche Texte in allen Sprachen zum Client, also haufenweise Zeug, das nie ein Nutzer lesen wird?

wenn sich das Datenvolumen im Rahmen hält, warum nicht? In meinem Fall sind das unkomprimiert 16-20kB. Das halte ich für durchaus zulässig.

Liebe Grüße

Felix Riesterer