Linuchs: Selektierten Text in <body> erkennen und auslesen

Moin,

die Benutzeroberfläche meiner Webseiten sollen in eine Fremdsprache übersetzt werden.

Ich hatte mir das so gedacht:

Für den Übersetzer wird ein <textarea> eingeblendet. Er markiert Text, dieser wird erkannt und automatisch in das <textarea> kopiert.

Übersetzer setzt den Text in der Fremdsprache darunter (ist also eigentlich ein Untersetzer) und ich bekomme die beiden Textschnippel als Mail und baue die Fremdsprache ein.

Nun sieht es aber so aus, dass selektierte Texte nur in input-Feldern erkannt werden, dieses hier wirkt nicht, gibt aber auch keinen Fehler aus:

window.addEventListener('DOMContentLoaded', function ( ) { document.getElementsByTagName("body")[0].addEventListener('onselect', function (event) { if (document.selection) { // Der Browser scheint das Microsoft-Modell zu kennen. currentSelection = document.selection; } else if (window.getSelection) { // Der Browser scheint das Gecko-Modell zu kennen. currentSelection = window.getSelection(); } alert( "selektierter Text=[" +currentSelection +"]" ); }); });

Ist damit meine Idee gestorben oder geht es auch anders?

Gruß, Linuchs

  1. Hallo,

    document.getElementsByTagName("body")[0].addEventListener('onselect', function (event) {

    ich hätte hier addEventListener('select', … erwartet. Außerdem sieht das bei dir irgendwie anders aus, als hier.

    Gruß
    Jürgen

  2. Lieber Linuchs,

    ich habe nicht verstanden, wie Du die Benutzerführung realisieren willst. Wie man Teile einer Website in eine Fremdsprache übersetzt, kannst Du bei meinem online-Umfragen-Tool sehen.

    Nun sieht es aber so aus, dass selektierte Texte nur in input-Feldern erkannt werden,

    Der Browser kann mit window.getSelection beliebige Markierungen handhaben, nicht nur in <input> oder <textarea>. Dazu solltest Du aber ein passendes Event wählen, wie z.B. mouseup und keyup, da damit Markierungen getätigt werden können.

    document.getElementsByTagName("body")[0].addEventListener('onselect', function (event) { [...] });

    Erstens notierst Du hier besser document.body und zweitens definierst Du besser eine benannte Funktion, um sie dann verschiedenen Events zuzuweisen:

    function checkForSelection () { [...] } document.body.addEventListener("mouseup", checkForSelection); document.body.addEventListener("keyup", checkForSelection);

    Liebe Grüße,

    Felix Riesterer.

  3. problematische Seite

    erstmal danke fürs Mitdenken. Die Tipps von Felix probiere ich aus. Allerdings kann ich bei Felixens Link nicht erkennen, wie man da Text für eine weitere Sprache eingeben könnte. Offenbar sind alle Sprachen im Dokument enthalten und werden ohne Neuladen der Seite ein- und ausgeblendet. Nee doch nicht, der Quellcode enthält die Sprachen nicht.

    Wieso ist der griechische Text trotz UTF-8 HTML-mäßig codiert?

    Mit meiner ersten Idee (Text markieren) ist das Problem der Übersetzung nicht gut gelöst.

    Meine Webseiten bestehen aus der Benutzer-Oberfläche (Text aus der Platzhalterdatei, der zu übersetzen ist) und den eingefügten Daten. Die Daten können auch Beschreibungen sein, damit "verwischen" sie mit der Benutzer-Oberfläche. Ein Übersetzer kann nicht oder nur schlecht erkennen, was ist fester Text und was sind Daten.

    Ich habe Oberflächen-Texte in der Form

    ###diesen Kalender einbetten###Embed this calendar###insluiten deze agenda###

    in der Platzhalter-Datei. Die werden vor der Auslieferung selektiert, es wird nur die angeforderte Sprache ausgeliefert. Allerdings kann ich diese Strings ausfiltern und dem Übersetzer allesamt für eine Seite anbieten, er muss gar nicht selbst markieren, was er übersetzen will.

    In den Platzhalter-Dateien sind aus alter Zeit noch rein deutsche Texte ohne ###, die auch zu übersetzen wären.

    Irgendwie muss ich die professionell übersetzen Begriffe markieren, um später noch nicht übersetzte Begriffe im zweiten, dritten Durchgang nachzureichen.

    Wer hat denn schon mal eine weitere Sprache nachträglich in sein Projekt integriert?

    Linuchs

    1. problematische Seite

      Hallo Linuchs,

      ich habe es noch nicht gemacht, aber schon unter solchen Seiten gelitten.

      Wichtig ist nach dieser Erfahrung: die Übersetzer müssen fachkundig sein, sie müssen ggf. fachspezifischen Jargon kennen (soweit den Besuchern zumutbar) und sie dürfen die Textbrocken nicht isoliert betrachten.

      Ansonsten kommen Seiten heraus, die man erstmal rückübersetzen muss um eine Ahnung zu gewinnen, was gemeint sein könnte.

      Rolf

      -- sumpsi - posui - clusi
      1. problematische Seite

        Hallo Rolf,

        Wichtig ist nach dieser Erfahrung: die Übersetzer müssen fachkundig sein, sie müssen ggf. fachspezifischen Jargon kennen (soweit den Besuchern zumutbar) und sie dürfen die Textbrocken nicht isoliert betrachten.

        Der Übersetzer ist ein Muttersprachler, der schon einige Jahre Daten in das System eingibt, aber von EDV eher weniger Ahnung hat. Schaun mer mal …

        Linuchs

    2. problematische Seite

      Lieber Linuchs,

      Allerdings kann ich bei Felixens Link nicht erkennen, wie man da Text für eine weitere Sprache eingeben könnte. Offenbar sind alle Sprachen im Dokument enthalten und werden ohne Neuladen der Seite ein- und ausgeblendet. Nee doch nicht, der Quellcode enthält die Sprachen nicht.

      der JS-Code enthält alle Sprachbausteine, die im jeweiligen Kontext benötigt werden. So kann man ohne Neuladen die Sprache umschalten.

      Wieso ist der griechische Text trotz UTF-8 HTML-mäßig codiert?

      Weil mein PHP damit Entitäten ins DOM schreibt - das liegt an der libxml, die hinter den DOM-Klassen von PHP steckt. Ich tue das jedenfalls nicht selbst.

      Wer hat denn schon mal eine weitere Sprache nachträglich in sein Projekt integriert?

      Ich. Aber ich hatte mein Projekt von vornherein so angelegt, dass es verschiedene Sprachen unterstützt. Dazu verwende ich mittlerweile eine JSON-Datei (früher eine XML-Datei):

      { "snippet-abc": { "de": "Was auch immer in snippet-abc stehen soll.", "en": "Whatever snippet-abc contains." }, "snippet-xyz": { "de": "Was auch immer in snippet-xyz stehen soll.", "en": "Whatever snippet-xyz contains." } }

      In dem von mir verlinkten Projekt kannst Du im JavaScript sehen, dass eine Variable i18n (kurz für internationalization) genau solch ein Objekt enthält. Dort ist ein Hinzufügen einer anderen Sprache kein Hexenwerk:

      { "snippet-abc": { "de": "Was auch immer in snippet-abc stehen soll.", "en": "Whatever snippet-abc contains.", "es": "Cualquier snippet-abc contiene." }, "snippet-xyz": { "de": "Was auch immer in snippet-xyz stehen soll.", "en": "Whatever snippet-xyz contains.", "es": "Cualquier snippet-xyz contiene." } }

      Liebe Grüße,

      Felix Riesterer.

  4. @@Linuchs

    die Benutzeroberfläche meiner Webseiten sollen in eine Fremdsprache übersetzt werden.

    Du kennst Werkzeuge wie Poedit? (Wikipedia)

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Du kennst Werkzeuge wie Poedit? (Wikipedia)

      Nein. Dafür müssen die (deutschen) Text-Schnipsel in eine Datenbank?

      Ich habe sie als Text in HTML-Dateien. Kann sie ausgliedern. Aber wie bekomme ich sie wieder rein?

      1. Tach!

        Du kennst Werkzeuge wie Poedit? (Wikipedia)

        Poedit und das .po-Format eignen sich am besten für professionelle Übersetzer, denn die sollten mit den Tools vertraut sein, wenn sie schon mal für Software übersetzt haben.

        Dafür müssen die (deutschen) Text-Schnipsel in eine Datenbank?

        Jein, es ist technisch vielleicht eine Art Datenbank, aber aonsonten nur ein paar Dateien in einem speziellen Format.

        Ich habe sie als Text in HTML-Dateien. Kann sie ausgliedern. Aber wie bekomme ich sie wieder rein?

        Genauso wie die Texte anderer Sprachen. Übersetzte Version holen und in die Ausgabe einbinden. PHP hat gettext an Bord, das kann mit solchen Übersetzungen umgehen.

        dedlfix.