Gast: Per Klick Sprache wechseln

Guten Tag,

habe eine einfache, zweisprachige HTML-Datei (also ohne PHP dahinter), bei der ich die Sprache umschalten möchte. Wie kann ich in den CSS-Klassen die display-Eigenschaft wechseln?

function toggleTo(lang) {  
  alert (lang);  
  ...  
}  

*:lang(de) {  
  background: #cfc;  
  display: none;  
}  
*:lang(en) {  
  display: inherit;  
}  

<h1 lang=en>Welcome</h1>  
<h1 lang=de>Willkommen</h1>  

Wenn möglich, möchte ich nicht - wie in alten Beiträgen vorgeschlagen - alle DOM-Elemente absuchen, sonder nur einen zentralen Eingriff. Dazu habe ich nichts gefunden.

Gast

  1. Hallo,

    im Allgemeinen ist es sinnvoller, verschiedene Dokumente zu erstellen, wenn du denselben Text in verschiedenen Sprachen anbieten willst. Dann kann der Server automatisch das Dokument ausliefern, dass der von Browser angeforderten Sprache (Accept-Language) entspricht.

    Jeden Absatz in mehreren Sprachen zu wiederholen kann zu Verwirrungen führen. Ohne JavaScript ist kein Umschalten möglich. Suchmaschinen-Robots werden die Sprache des Dokuments nicht eindeutig erkennen können, und auf eine spezifische Sprachversion lässt sich nicht ohne weiteres verlinken.

    Wenn möglich, möchte ich nicht - wie in alten Beiträgen vorgeschlagen - alle DOM-Elemente absuchen, sonder nur einen zentralen Eingriff. Dazu habe ich nichts gefunden.

    Du kannst eine Klasse beim html- oder body-Element setzen und über den Nachfahrenselektor alle Elemente verstecken, die nicht der gewählten Sprache entsprechen.

    Zum Initialisieren die Standardsprache setzen:
    <body class="lang-en">

    Beim Umschalten:

    var lang = "de"; // oder "en" usw.  
    document.body.className = "lang-" + lang;
    

    Die Elemente in der jeweils anderen Sprachen werden versteckt:

    .lang-en :lang(de) { display: none; }  
    .lang-de :lang(en) { display: none; }
    

    Das wird bei vielen Sprachen natürlich frickelig.

    Beispiel:
    http://jsfiddle.net/RmEvg/

    Wenn du nicht mehrere Dokumente verwendest, so würde ich eher deutschen Text und englischen Text als zusammenhängende Blöcke untereinander schreiben. Dann ist das Umschalten auch viel einfacher, es kann durch einfache Links erfolgen. Das funktioniert prinzipiell ohne Javascript, es lässt sich mit JavaScript ggf. verbessern.

    Mathias

    1. Guten Morgen, Mathias.

      im Allgemeinen ist es sinnvoller, verschiedene Dokumente zu erstellen, wenn du denselben Text in verschiedenen Sprachen anbieten willst.

      In einem 5-sprachigen Projekt habe ich mich dagegen entschieden. Bei Änderungen muss man aufpassen, dass sie 5-mal gemacht werden. Auch Änderungen, die gar nicht die Sprache betreffen, müssen 5-fach ausgeführt werden, etwa andere Bilder. Doch dort habe ich PHP und das liest die Platzhalterdateien ein, ersetzt Platzhalter durch Daten und wählt aus einem String, in dem die 5 Sprachen hintereinander stehen, die richtige Sprache heraus.

      Dann kann der Server automatisch das Dokument ausliefern, dass der von Browser angeforderten Sprache (Accept-Language) entspricht.

      In dem jetzigen kleinen Projekt steht kein PHP zur Verfügung, diese Automatik ist nicht machbar.

      Jeden Absatz in mehreren Sprachen zu wiederholen kann zu Verwirrungen führen. Ohne JavaScript ist kein Umschalten möglich.

      Ja, dann gibt's nur "english version", das ist okay.

      Suchmaschinen-Robots werden die Sprache des Dokuments nicht eindeutig erkennen können,

      Nicht mein Problem, jeder Absatz wird markiert mit dem dafür vorgesehenen <div lang=de>...

      und auf eine spezifische Sprachversion lässt sich nicht ohne weiteres verlinken.

      Joop, muss ich mit leben.

      Du kannst eine Klasse beim html- oder body-Element setzen und über den Nachfahrenselektor alle Elemente verstecken, die nicht der gewählten Sprache entsprechen.

      Danke für deine ausführliche Beschreibung, das probiere ich aus.

      Wenn du nicht mehrere Dokumente verwendest, so würde ich eher deutschen Text und englischen Text als zusammenhängende Blöcke untereinander schreiben. Dann ist das Umschalten auch viel einfacher, es kann durch einfache Links erfolgen.

      Habe ich nicht verstanden. Wie soll ich durch einen Link die Blöcke wählen?

      Gast

      1. Om nah hoo pez nyeetz, Gast!

        In dem jetzigen kleinen Projekt steht kein PHP zur Verfügung, diese Automatik ist nicht machbar.

        Möglicherweise gibts SSI?

        Wenn du nicht mehrere Dokumente verwendest, so würde ich eher deutschen Text und englischen Text als zusammenhängende Blöcke untereinander schreiben. Dann ist das Umschalten auch viel einfacher, es kann durch einfache Links erfolgen.

        Habe ich nicht verstanden. Wie soll ich durch einen Link die Blöcke wählen?

        Erst alles englisch, dann alles deutsch, dann alles ... Die Navigation erfolgt über Anker.

        <a href="#de">deutsche Version</a>  
        ...  
        <article id="de">
        

        Die anderen Sprachen und Links darauf blendest du mit CSS aus und mit JS machst du die Links sichtbar und sorgst für das togglen der Sprachvarianten.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Buch und Buchsbaum.

      2. Hallo,

        In dem jetzigen kleinen Projekt steht kein PHP zur Verfügung, diese Automatik ist nicht machbar.

        Content-Negotation ist ein Feature von Webservern wie Apache und nginx, dazu bedarf es nicht PHP. Man platziert einfach Dateien wie index.html.de und index.html.en im Verzeichnis, aktiviert MultiViews und der Apache liefert automatisch die passende Sprachversion aus (wenn ich mich recht entsinne).

        Mathias

        1. Om nah hoo pez nyeetz, molily!

          In dem jetzigen kleinen Projekt steht kein PHP zur Verfügung, diese Automatik ist nicht machbar.

          Content-Negotation ist ein Feature von Webservern wie Apache und nginx, dazu bedarf es nicht PHP. Man platziert einfach Dateien wie index.html.de und index.html.en im Verzeichnis, aktiviert MultiViews und der Apache liefert automatisch die passende Sprachversion aus (wenn ich mich recht entsinne).

          auch in dem Fall möchte man identische Inhalte und Strukturen nicht mehrfach schreiben.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Web und Webstuhl.

      3. @@Gast:

        nuqneH

        Dann kann der Server automatisch das Dokument ausliefern, dass der von Browser angeforderten Sprache (Accept-Language) entspricht.

        In dem jetzigen kleinen Projekt steht kein PHP zur Verfügung, diese Automatik ist nicht machbar.

        Doch, das ist sie, denn PHP brauchst du dafür nicht. Inhaltsvereinbarung kann der Apache von Haus aus (sofern das Apache-Modul mod_negotiation da ist).

        Ja, dann gibt's nur "english version", das ist okay.

        Ist es das?

        Joop, muss ich mit leben.

        Dein Leben ist irrelevant. Es geht um das Leben deiner Seitenbesucher. Womit müssen die leben?

        Und du willst wirklich doppelt so viel Quelltext rausschicken, von dem die Hälfte gar nicht angezeigt wird? Und das in Zeiten mobiler Webnutzung, wo Geschwindigkeit ein wichtiges (wenn nicht das wichtigste) Kriterium ist?

        Verwende eine vernünftige Lösung, kein JavaScript-Gefrickel!

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)