HTML5 - Sprachwechsel (automatisch und per Tab)

  • Hallo zusammen

    Ich beschäftige mich schon eine Weile mit HTML, wenn auch meine Künste noch nicht extrem weit reichen. Im Moment versuche ich die Sprachumschaltung hinzukriegen.

    Am liebsten hätte ich eine automatische Erkennung der Browsersprache und eine manuelle Auswahl, nach dieser Vorlange gelingt mir dies soweit, nur ist es da nur für eine Seite - ich hätte es gerne Seitenüberbreifend.

    Ich habe verschiedene (stackoverflow/codepen/w3) Infos dazu gefunden, jedoch irgendwie nichts was mir klar wäre oder ich mir zusammenbauen könnte.


    Kennt jemand Seiten wo es etwas zu dem Thema gibt?


    Lg

    Oli

  • Hey,


    du kannst über PHP das Herkunftsland der IP herausfinden und dementsprechend dein Content anzeigen lassen.


    Das PHP-Script kannst du in einer Datei erstellen. Diese Datei musst du dann lediglich in jede Datei, welche das PHP-Script benötigt wird, einbinden.
    Dazu habe ich diesen Beitrag auf Stackoverflow gefunden: Herausfinden des Herkunftslandes des Besuchers.


    Wenn du das Land hast brauchst du auf dieses if-else anwenden oder switch/case und dort die HTML-Datei einbinden. Diese kannst du einer Variable zuordnen.

    Dann musst du nurnoch die Variable ausgeben.


    Grüße,

    Stef

  • Die Sprache automatisch ermitteln lassen ist ja auch so nee sache .

    Man kann es ja so machen wie du es schon sagtest mit der Browsersprache "HTTP_ACCEPT_LANGUAGE"

    Oder wie stef schon sagt mit der Ip-Adresse.

    Doch wer wirklich an Pc sitzt weiß man trotzdem nicht. Deswegen sollte man vieleicht immer noch nee Auswahl parrat haben das der User zwischen ,ip-Adressen sprache, Browsersprache und vieleicht Englisch wählen kann.


    Doch das muß ja jeder Seitenbetreiber selber wissen

  • Ich habe da noch nie eine IP für benötigt.

    Bei mir gibt es drei Herkünfte:

    • $_SESSION
    • $_SERVER['REQUEST_URI']
    • $_SERVER['HTTP_ACCEPT_LANGUAGE']

    Wenn da nichts gescheites extrahierbar ist, verwende ich eine Fallback-Variable.


    Das passiert i.d.R. auch nur einmal, also beim ersten Aufruf der Website, weil ich hinterher die resultierende Sprache in die Session übernehme und diese damit auf allen Folgeseiten zur Verfügung steht.


    IP ist so ziemlich das ungenaueste von allen, da ein User bspw. auch über ein VPN kommen kann.

    Zugegeben, viel genauer ist $_SERVER['HTTP_ACCEPT_LANGUAGE'] auch nicht, weil es aus dem User-Agent kommt und ebenfalls manipulierbar ist.

    Aber ich muß nicht erst eine IP-Geolocation abfragen.


    Meine Sprachauswahl sieht - falls überhaupt gewünscht vom Kunden - so aus, dass bei Auswahl einer anderen Sprache die URI neu gesetzt wird.

    Die Sprache aus der URI besitzt bei mir eine höhere Priorität gegenüber der Session, so dass die neu ausgewählte Sprache in die Session übernommen wird.


    Solange man dann nichts anderes wählt, bleibt man überraschender Weise auf allen Folgeseiten in der gewählten Sprache.

  • Dankeschön!

    Grundsätzlich möchte ich, wenn ich irgendwann soweit bin, die Seite per Browsersprache setzen (DE/EN/FR), wenn keine der drei kommt wohl auf EN stellen und ebenfalls manuell eine Auswahlmöglichkeit bieten..


    $_SERVER['HTTP_ACCEPT_LANGUAGE'] hilft mir als Stichwort weiter, ich habe nun diesen Link gefunden, dies sieht für mich soweit sehr gut aus.

    https://wiki.selfhtml.org/wiki…l_mittels_Accept_Language


    Was mir noch nicht klar ist, wie genau das ganze eingebaut werden muss. Wie der Content umgeschaltet werden kann.. Gibt es dazu ein Beispiel das bei dem ich abschauen könnte?

  • Das kommt ja darauf an, welche Sprache Du am Ende gefiltert hast.

    Nehmen wir mal an, Deine Inhalte werden über diese URIs sprachabhängig dargestellt:

    Code
    //www.example.com/de/startseite.html
    //www.example.com/en/home.html
    //www.example.com/fr/accueil.html

    Dann musst Du in den Links, die der Benutzer manuell klicken kann einfach nur die anderssprachigen Links hinterlegen.

    Bewegt sich der Benutzer bspw. auf der französischen Seite müssen die Links je nach Sprachwahl zu en und de verzweigen.


    Bleiben aber am Ende ganz normale Links.

  • Bis jetzt habe ich jeweils gehört, dass es suboptimal ist doppelte Seiten zu haben, auf meiner Website ist ein Kalender von Google eingebunden und davor ein kurzer Titel. Für die Sprachwahl geht es, einfach gesagt, um den Titel. Daher dachte ich nur eine Seite zu haben und mit lang="xx"zu definieren welcher Text gerade aktiv ist. Auch unterhaltsmässig wäre es leichter nur eine index.html zu haben


    Daher würde ich am liebsten mit etwas wie einem Switch Statement umschalten zwischen lang="de" und lang="en"


    Vielleicht stelle ich mir dies aber auch falsch vor?

  • Vermutlich nicht zwingend, dies ist mir eben noch zu wenig klar, ich habe es erwähnt wegen Deinem Beispiel oben.


    Mir ist noch nicht klar wie ich aus dem Code von hier die Umschaltung der verschiedenen lang='xx'-Werte umschalten kann.

  • Sofern es mir nicht anders bekannt ist, gehe ich immer davon aus, dass Websites dynamisch aufgebaut sind, also in diesem Fall auch Deine ;)


    Basierend auf einer Vorlage (Template) wird das Dokument mit erforderlichen Inhalten gerendert.

    Deine Frage zu lang="xx" ist auf Basis meiner Aussage aus #4 relativ einfach umzusetzen: Das xx ist ein Platzhalter, bspw. so:

    HTML
    <html lang="{{lang.iso2}}">


    Beim Aufruf einer Seite, wird also der Platzhalter durch die sich in der Session befindlichen ISO2-Sprachkodierung ersetzt, woraus - um beim bisherigen Beispiel zu bleiben - folgendes werden kann:

    HTML
    <html lang="de">
    <html lang="en">
    <html lang="fr">

    Hierzu bieten sich String-Funktionen, wie str_replace(), strtr() u.w. an. Bei größeren Projekten läuft dies sicher über einen eigenen Controller, der die Übersetzungen übernimmt, aber diese Art tut es auch für den Anfang.

  • Meine ist im Moment eher statisch ;)

    Da kommt nur wenig Inhalt drauf, nicht interaktiv, daher hat statisch bis jetzt gereicht..


    Das xx zu einem Platzhalter werden muss ist mir klar, ich hatte vor auf meiner Website den Inhalt wie folgt zu platzieren

    Zitat

    <p lang="de"> Deutsch </p>

    <p lang="en"> English </p>

    <p lang="fr"> Français </p>


    Das Script von selfhtml scheint mir auch klar, mir ist jedoch noch ziemlich unklar wie ich es anwenden kann, das Beispiel auf selfhtml hilft mir leider nicht weiter.

    Wie kann ich zwischen den verschiedenen Sprachen umschalten?

  • Korrekt, im Moment sind alle drei Sprachen aktiv. Daher meine Frage wie dies umgeschaltet werden kann. Habe ich mich dort vielleicht zu wenig klar ausgedrückt?

    Bei mir ist es im HTML Body so gemacht, nicht im CSS.

  • Korrekt, im Moment sind alle drei Sprachen aktiv. Daher meine Frage wie dies umgeschaltet werden kann.

    Das kannst Du nur verhindern, wenn Du die Seiten dynamisch aufbaust. JavaScript hier als Kern-Technologie einzusetzen, würde ich übrigens als fail bewerten, falls so ein Tipp hier kommen sollte.


    Bei mir ist es im HTML Body so gemacht, nicht im CSS.

    Ja, ich habe Dir nur aufgezeigt, wie Du die einzelnen Elemente dann Sprachspezifisch in CSS selektieren kannst:

    https://codepen.io/anon/pen/EGPBLp

  • Naja, das erste ist ja auf JavaScript Basis.

    Was mir daran nicht gefällt ist, dass Du nie weißt, ob beim User evtl. ein Script-Blocker dazwischen haut oder JavaScript überhaupt aktiviert ist.

    Dann würde das Umschalten der Sprache ganz einfach nicht funktionieren.


    Bei dem zweiten Link finde ich kein Beispiel, das ohne JS auskommt, auch wenn die das schreiben.

  • Guten Abend, konntest Du bereits schauen wegen den Beispielen? Kein Problem wenn Du gerade keine Zeit hast, nur damit ich Bescheid weiss, denn suche ich weiter.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!