In-Context

Crowdin In-Context funktioniert mithilfe eines einzeiligen JavaScript-Snippets und eines Pseudo-Sprachpakets. Es erstellt ein Pseudo-Sprachpaket auf Grundlage der in dein Projekt hochgeladenen Lokalisierungsdateien, das später als zusätzliches Lokalisierungspaket in deine Anwendung integriert wird.

Schnelle Demo

Die In-Context-Lokalisierung ist mit deinem Crowdin-Projekt verknüpft, in dem die übersetzbaren Dateien gespeichert sind. Mit In-Context erstellte Übersetzungen werden genauso zu deinem Projekt hinzugefügt wie Übersetzungen, die direkt im Editor erstellt wurden.

Dieses Tool zeigt deine Anwendung mit bearbeitbaren Texten an, sodass der Übersetzungsprozess in Echtzeit sichtbar ist. Auf diese Weise können sogar dynamische Teile der Anwendung und Zeichenfolgen mit Platzhaltern übersetzt werden.

In Aktion ansehen Personalisierte Demo erhalten

Das integrierte Pseudo-Sprachpaket enthält spezielle Kennungen anstelle der ursprünglichen Texte. Wenn du deine App auf diese Sprache umstellst, werden alle Beschriftungen in spezielle Kennungen umgewandelt. JavaScript sucht nach diesen Kennungen und ersetzt sie durch bearbeitbare Beschriftungen. Dadurch sieht die In-Context-Seite deiner Web-App genauso aus wie deine Anwendung. Der einzige Unterschied besteht darin, dass übersetzbare Zeichenfolgen bearbeitbar sind.

Übersetzungen werden direkt in der App erstellt, ohne dass du den Editor öffnen musst. Eine vereinfachte Version des Crowdin Editors wird angezeigt und bietet alle Funktionen wie TM, maschinelle Übersetzung, Genehmigungs-/Abstimmungsoption, Kommentare und Begriffe. Dadurch lassen sich Übersetzungen einfacher erstellen und überprüfen, da Übersetzer sie direkt im Kontext betrachten können.

Integration

Es gibt zwei gängige Ansätze, um Crowdin In-Context in deine Anwendung zu integrieren:

Staging- oder Übersetzungsumgebung Wenn du nicht vorhast, deine Endnutzer zur Unterstützung bei Übersetzungen einzuladen, oder keinen „Übersetzungsmodus“ in deiner Produktionsanwendung einsetzen möchtest, ist die Integration von Crowdin In-Context in deine Staging-Umgebung oder eine eigene Übersetzungsumgebung eine gute Lösung.
Produktionsumgebung Crowdin In-Context erfordert keine Codeänderungen an deiner Anwendung, sodass du es auch in der Produktion verwenden kannst. Du entscheidest, wie du es aktivierst und welcher Teil der Nutzer es verwendet. Die häufigsten Anwendungsfälle sind folgende:
- Du kannst eine Spiegel-Website erstellen, die eine vollständige Kopie deiner Anwendung unter einer anderen URL ist (zum Beispiel translate.crowdin.com statt crowdin.com). Dort können Übersetzer Übersetzungen so erstellen, als wäre es deine tatsächliche Anwendung.
- Du kannst In-Context auch als zusätzliche Sprache hinzufügen. Wenn Übersetzer deine Anwendung öffnen, wählen sie diese zusätzliche Sprache aus der Liste aus, wodurch In-Context für sie geöffnet wird.

Befolge die Anleitung zur Integrationseinrichtung in deinem Crowdin-Projekt, um In-Context einzurichten. Die Anleitung findest du in deinem Projekt unter Tools > In-Context.

Crowdin
Crowdin Enterprise

Nachdem die Integration erfolgreich eingerichtet und deine Anwendung aktualisiert wurde, solltest du den Einladungsdialog und das Crowdin-Anmeldefenster sehen.

String-URLs zum Kontext hinzufügen

Bei der Integration von In-Context in deine Website kannst du optional ein Skript hinzufügen, das URLs sammeln und zum Kontextabschnitt jedes Strings hinzufügen kann, der auf der Website verwendet wird.

Dadurch können Übersetzer auf die URL eines bestimmten Strings klicken und werden zu der Website-Seite weitergeleitet, auf der dieser String verwendet wird. So erhalten sie zusätzlichen Kontext für eine genaue Übersetzung.

Um String-URLs zum Kontext hinzuzufügen, befolge diese Schritte:

Kopiere das folgende JavaScript-Snippet und füge es direkt nach dem primären In-Context-JavaScript-Snippet (das du im Tab Tools deines Crowdin-Projekts findest) in den head-Bereich jeder Seite mit lokalisierbarem Text ein.

<script type="text/javascript">
  var _jipt = [];
  _jipt.push(['project', 'your_project_identifier']);
  _jipt.push(['preload_texts', false]);
  _jipt.push(['edit_strings_context', function(context) {
    var separator = "\n";
    var lineStart = "* ";
    var contextParts = context.split(separator);
    var linkCount = 0;

    for(var i in contextParts) {
      var line = contextParts[i];
      if(lineStart + window.location.href === line) {
        return context;
      }

      if(line.indexOf(lineStart) === 0) {
        linkCount++;
      }

      if(line === 'And more...') {
        return context;
      }
    }

    if(linkCount < 5) {
      return context + separator + lineStart + window.location.href;
    }

    return context + separator + 'And more...';
  }]);
</script>

Nach Abschluss sollte jede Webseite, deren Inhalt du über In-Context übersetzen möchtest, zwei JavaScript-Codeausschnitte enthalten:

Primäres JavaScript-Snippet, das die In-Context-Funktion startet.
Zusätzlicher JavaScript-Snippet, der URLs sammelt und sie zum Quelltextkontext hinzufügt.

Nachdem du die JavaScript-Snippets hinzugefügt hast, solltest du jede Website-Seite öffnen, auf der In-Context integriert ist. Dadurch kann der zusätzliche JavaScript-Snippet die URLs von Zeichenfolgen sammeln und deinem Crowdin-Projekt hinzufügen.

Wenn du deiner Website eine neue Seite hinzufügst, lade die zugehörigen Quelldateien in dein Crowdin-Projekt hoch. Wiederhole anschließend die obigen Schritte, um die URLs für Zeichenfolgen von der neuen Seite zu sammeln und hinzuzufügen.

Wenn sich die URL einer Website-Seite ändert, öffne sie in In-Context, um die ursprünglich gesammelten URLs der Zeichenfolgen zu aktualisieren.

Optionale Parameter

Du kannst diese Parameter zum _jipt-Array im Konfigurations-Snippet hinzufügen.

Vorab-Laden von Texten

_jipt.push(['preload_texts', true]);

Beschleunigt die Anzeige dynamischer Inhalte im In-Context-Tool, indem alle Quellzeichenfolgen vorab geladen werden. Für große Projekte (mehr als 5.000 Zeichenfolgen) automatisch deaktiviert. Zulässige Werte: true, false.

Übersetzungsschaltfläche immer sichtbar

_jipt.push(['touch_optimized', true]);

Diese Option ist auf Touchscreens standardmäßig aktiviert und sorgt dafür, dass die Übersetzungsschaltfläche neben jeder übersetzbaren Zeichenfolge dauerhaft sichtbar ist, anstatt beim Darüberfahren mit der Maus eingeblendet zu werden. Zulässige Werte: true, false.

Callback vor dem Commit

_jipt.push(['before_commit', function(source, translation, context, language_code) {
  return status_obj;
}]);

Funktion zur Validierung des Vorschlags vor dem Übernehmen.

Parameter
source	Quelltext
translation	Übersetzungstext
context	Kontext der Quellzeichenfolge
language_code	Zielsprachencode (Sprachcodes)
Rückgabewerte
status_obj	Objekt. `status_obj.status` kann `“ok”`, `“error”` oder `“corrected”` sein. Bei einem Fehler enthält `status_obj.message` die Fehlerbeschreibung. Wenn der Status `corrected` lautet, enthält `status_obj.correction` die korrigierte Übersetzung

Callback vor dem Einfügen in das DOM

_jipt.push(['before_dom_insert', function(text, node, attribute) {
  return 'text';
}]);

Funktion zum Umwandeln der Zeichenfolge, bevor sie in das DOM eingefügt wird.

Parameter
text	Einzufügende Zeichenfolge
node optional	DOM-Element, in das der Text eingefügt werden muss. Es kann weggelassen werden, wenn der Text kein Zielelement hat (Text innerhalb der Pop-ups des Browsers)
attribute optional	Attribut des DOM-Elements, wenn der Text Teil eines Attributs ist
Rückgabewerte
text	Einzufügende Zeichenfolge
false	Wenn die Funktion false zurückgibt, wird das DOM nicht aktualisiert

Callback zum Schließen des In-Context-Overlays

_jipt.push(['escape', function() {
  window.location.href = "http://app_domain.com";
}]);

Wenn diese Funktion definiert ist, können Benutzer das In-Context-Overlay schließen, wenn sie nicht übersetzen möchten. Implementiere diese Funktion auf deiner Seite. Je nach Integrationsmethode von In-Context muss die Sprache der App geändert oder von der Übersetzungsumgebung zur Produktions-App weitergeleitet werden.

Starttyp

_jipt.push(['start_type', 'manual']);

Legt fest, wie In-Context initialisiert wird. Zulässige Werte:

default – In-Context startet automatisch, nachdem das Skript geladen wurde.
manual – In-Context startet nur, wenn du window.jipt.start() aufrufst.

Verwende manual, wenn du mehr Kontrolle benötigst. Das ist zum Beispiel in Single-Page-Apps sinnvoll, wenn du In-Context abhängig von Benutzeraktionen ein- oder ausschalten möchtest.

Nur sichtbare Zeichenfolgen markieren

_jipt.push(['tag_only_visible_phrases', true]);

Wenn dieser Wert auf true gesetzt ist, verarbeitet die Screenshot-Markierungsfunktion nur Zeichenfolgen, die momentan im Ansichtsbereich des Benutzers sichtbar sind. Das ist ideal für dynamische Benutzeroberflächen wie Single-Page-Anwendungen, die Modalfenster oder Dialoge verwenden, die andere Inhalte auf der Seite überdecken. Wenn du diese Option aktivierst, werden ausgeblendete Zeichenfolgen nicht markiert. Dadurch werden Screenshots übersichtlicher und der Kontext für Übersetzer genauer. Zulässige Werte: true, false.

Nur sichtbaren Bereich erfassen

_jipt.push(['screenshot_visible_area_only', true]);

Wenn dieser Wert auf true gesetzt ist, erfasst In-Context nur den Teil der Seite, der momentan im Ansichtsbereich des Benutzers sichtbar ist, statt einen Screenshot der gesamten Seite zu erstellen. Das ist für lange Seiten oder dynamische Benutzeroberflächen hilfreich, wenn der Screenshot genau das zeigen soll, was Übersetzer auf dem Bildschirm sehen. Zulässige Werte: true, false.

Optionale Funktionen

Du kannst verschiedene Funktionen des globalen Objekts window.jipt aufrufen, um In-Context in Echtzeit zu verwalten oder anzupassen.

Start- und Stoppmethoden

window.jipt.start();

Aktiviert In-Context manuell für die aktuelle Seite. Verwende dies, wenn du start_type auf manual gesetzt hast oder In-Context nach dem Stoppen erneut aktivieren möchtest.

window.jipt.stop();

Beendet die In-Context-Überlagerung. Alle interaktiven Übersetzungselemente werden entfernt, bis du start() erneut aufrufst.

Anwendungsbeispiel: Single-Page-Anwendung

In einer Single-Page-Anwendung kannst du In-Context ein- oder ausschalten, wenn ein Benutzer die Sprache ändert:

const handleLanguageChange = (event) => {
  const language = event.target.value;
  setSelectedLanguage(language);

  if (language === inContextLanguage) {
    window.jipt.start();
  } else {
    window.jipt.stop();
  }
};

Im obigen Snippet wird In-Context aktiviert, sobald der Benutzer die In-Context-Pseudosprache auswählt. Wenn eine andere Sprache ausgewählt wird, wird In-Context beendet.

Screenshots mit In-Context verwalten

Mit Crowdin In-Context kannst du Screenshots der Seiten deiner Webanwendung direkt während des Aufrufs verwalten. Mit dieser Funktion kannst du Übersetzern aktuellen visuellen Kontext bereitstellen und sicherstellen, dass die Markierung der Zeichenfolgen korrekt und relevant bleibt.

Screenshots, die über In-Context erstellt werden, werden automatisch in dein Crowdin-Projekt hochgeladen. Alle sichtbaren Zeichenfolgen auf der Seite werden automatisch markiert, wodurch die Kontextverwaltung für dein Übersetzungsteam vereinfacht wird.

Weitere Informationen findest du unter Screenshots.

Automatisierte Screenshot-VerwaltungErfahre, wie du die Erstellung und Aktualisierung von Screenshots automatisierst.

Screenshots über den In-Context-Modus hinzufügen

Du kannst während der Verwendung von In-Context einen Screenshot einer beliebigen Seite deiner Website erstellen und in dein Crowdin-Projekt hochladen. Crowdin markiert automatisch alle Zeichenfolgen, die auf der Seite im Screenshot angezeigt werden.

Gehe wie folgt vor, um einen Screenshot über In-Context hinzuzufügen:

Öffne die Seite deiner Website, auf der In-Context aktiviert ist.
Wechsle im Crowdin-In-Context-Dialog zum Tab Screenshot.
Prüfe im Feld Name den automatisch vorgeschlagenen Screenshot-Namen, der auf dem Seitentitel basiert. Bearbeite ihn bei Bedarf. Wenn für diese Seite bisher keine Screenshots hinzugefügt wurden, zeigt das Dropdown-Menü Vorhandenen Screenshot ersetzen den Eintrag Für diesen Namen gibt es keinen Screenshot.
Klicke auf Screenshot hinzufügen.

Crowdin lädt den Screenshot in dein Projekt hoch und markiert automatisch alle auf der Seite angezeigten Zeichenfolgen.

Screenshots über In-Context aktualisieren

Du kannst vorhandene Screenshots in deinem Crowdin-Projekt direkt über In-Context manuell aktualisieren. So bleiben Screenshots und Zeichenfolgenmarkierungen aktuell, wenn deine Webseiten mit neuen Inhalten oder Layoutänderungen aktualisiert werden.

Gehe wie folgt vor, um einen vorhandenen Screenshot über In-Context zu aktualisieren:

Öffne die aktualisierte Seite deiner Website, auf der In-Context aktiviert ist.
Wechsle im Crowdin-In-Context-Dialog zum Tab Screenshot.
Prüfe im Feld Name den automatisch vorgeschlagenen Screenshot-Namen, der auf dem Seitentitel basiert.
Wähle im Dropdown-Menü Vorhandenen Screenshot ersetzen den Screenshot aus, den du ersetzen möchtest. Du kannst auch Datum und Uhrzeit der vorhandenen Aufnahme anzeigen, um sicherzustellen, dass du den richtigen Screenshot ersetzt.
Klicke auf Screenshot ersetzen.

Crowdin ersetzt den bisherigen Screenshot in deinem Projekt durch den neuen und markiert automatisch alle auf der Seite angezeigten Zeichenfolgen.

Fehlerbehebung und häufige Fragen

Fehler: Crowdin In-Context konnte keine übersetzbaren Texte erkennen (Nichts zu übersetzen)

Dieser Fehler kann auftreten, wenn einige Zeichenfolgen im Crowdin-Projekt aktualisiert wurden, diese Texte aber auf deiner Website fehlen. Lade in diesem Fall die neueste Version der Pseudosprache deines Projekts über Tools > In-Context herunter und aktualisiere die Pseudosprache auf deiner Website.

Kann ich In-Context mit einer React-App verwenden?

In-Context ist technologieunabhängig. Du kannst es gemäß den regulären Anweisungen konfigurieren und einfach ein script-Tag verwenden.

Kann ich In-Context verwenden, wenn mehrere Pakete eine Anwendung in der Produktion bilden?

Es spielt keine Rolle, wie viele Pakete und Repositories beteiligt sind. Du kannst mehrere Repositories innerhalb eines Crowdin-Projekts verbinden. Wenn sie zur selben Webanwendung gehören, sollte das nahtlos funktionieren.

Einschränkung: In-Context nur in einem Crowdin-Projekt verwenden

Solange die auf der Webseite angezeigten Texte aus einem Crowdin-Projekt stammen, kann In-Context sie problemlos verarbeiten. Entscheidend ist, dass sich die Texte deiner Website im normalen DOM befinden und nicht im Shadow DOM.

Kann ich dieselbe Pseudosprache in mehreren Crowdin-Projekten verwenden?

Eine Pseudosprache kann nur mit dem Projekt verwendet werden, für das sie generiert wurde. Sie kodiert die Zeichenfolgenkennungen dieses Projekts, und In-Context ordnet diese Kennungen wieder demselben Projekt zu. Wenn deine Inhalte auf mehrere Projekte verteilt sind, konsolidiere die Quelldateien in einem Projekt, um In-Context zu verwenden.

Möglichkeit, In-Context-Zeichenfolgen aus dem Shadow DOM zu extrahieren

Das ist technisch nicht möglich. Das Shadow DOM ist für unsere Skripte unsichtbar. Es kann nur von dem Code bearbeitet werden, der das Shadow DOM erstellt hat.

Möglichkeit, automatisch aktualisierte Quelldateien zum Pseudo-Sprachpaket und anschließend zur Website hinzuzufügen

Dies ist über die Crowdin API möglich. Verwende die API-Methode Get Project, um das Objekt inContextPseudoLanguage abzurufen, das den Sprachcode der Pseudosprache enthält. Mit diesem Sprachcode kannst du die Pseudosprache separat erstellen, herunterladen und in deine Website integrieren. Alle anderen Methoden sind regulär: Lade die Datei hoch bzw. aktualisiere sie, rufe mit der API-Methode Get Project die Liste der Zielsprachen ab und erstelle die Zielsprachen. Alternativ kannst du auch das gesamte Crowdin-Projektarchiv auf einmal erstellen und herunterladen. Es enthält dann auch die Pseudosprache.

Kürzlich hinzugefügte neue Quellzeichenfolgen werden auf der Website als `unrecognized text` angezeigt

Die Kennzeichnung „Unrecognized text“ wird auf der Website angezeigt, wenn Zeichenfolgen im Crowdin-Projekt gelöscht oder Zeichenfolgenschlüssel in den Quelldateien geändert wurden, dieselben Zeichenfolgen aber weiterhin in der auf der Website integrierten Pseudosprache vorhanden sind. Um das zu beheben, musst du lediglich die Quelldateien im Crowdin-Projekt erneut aktualisieren, die Pseudosprache herunterladen und sie auf der Website aktualisieren.

Warum Pseudosprache-Kennungen (z. B. `crwdns...crwdne...`) anstelle des Textes angezeigt werden

Die Pseudosprache ersetzt jede Quellzeichenfolge durch eine spezielle Kennung (zum Beispiel crwdns123456:0crwdne123456:0), die das In-Context-Skript beim Scannen der Seite durch bearbeitbaren Text ersetzt. Jeder Text, den das Skript noch nicht verarbeitet hat, zeigt weiterhin die rohe Kennung an – normalerweise während die Seite noch geladen wird oder wenn der Text außerhalb des Zugriffsbereichs des Skripts liegt (zum Beispiel im Shadow DOM oder wenn er nach dem ersten Scan von einem Framework neu gerendert wird).

So kannst du das vermeiden:

Stelle sicher, dass das In-Context-Skript auf jeder Seite geladen wird und die Initialisierung abgeschlossen hat, bevor du mit den Inhalten interagierst.
Halte übersetzbaren Text im regulären DOM statt im Shadow DOM.
Aktiviere für dynamische Inhalte und Single-Page-Anwendungen Texts Preloading und steuere die Initialisierung mit Start Type sowie den Start-/Stoppmethoden.

War diese Seite hilfreich?