Comment préparer votre logiciel à la traduction

Avant d’utiliser PTC, vérifiez la gestion du texte, les placeholders et la langue.

Préparer votre logiciel à la traduction pour la première fois

Pour préparer votre logiciel à la traduction, vous devrez :

• Déplacer tout le texte visible par l’utilisateur dans des fichiers de ressources
• Utiliser des placeholders pour le contenu dynamique
• Charger le fichier de traduction approprié en fonction de la langue de l’utilisateur

Ces étapes s’appliquent à tous les langages et frameworks de programmation. PTC prend en charge plusieurs formats de fichiers de ressources, notamment .po, .json, .yaml, .strings et .xml.

1. Déplacer tout le texte visible par l’utilisateur dans des fichiers de ressources

Placez tout le texte visible par l’utilisateur, comme les étiquettes, les messages d’erreur et les invites utilisateur, dans des fichiers de ressources. PTC lit à partir des fichiers de ressources et ne détecte pas les chaînes codées en dur dans votre code source. Il s’agit d’une étape de préparation importante lorsque vous souhaitez traduire les fichiers strings.xml de votre application Android ou localiser vos applications iOS.

La plupart des frameworks incluent une fonction ou une bibliothèque d’internationalisation (i18n) qui vous aide à marquer le texte traduisible et à le stocker dans le bon format de fichier de ressources.

• Dans React et Vue, des bibliothèques comme react-intl et vue-i18n vous permettent de charger et d’utiliser des fichiers de traduction. Les traductions sont ensuite stockées dans les fichiers JSON que vous générez.
• Ruby on Rails inclut le module I18n.
• WordPress utilise la fonction __() pour marquer les chaînes à traduire, qui sont ensuite compilées dans des fichiers PO.

Exemple correct (React et fichier JSON)

Dans votre code :

<button>{t('submit_button')}</button>

<button>{t('submit_button')}</button>

Dans votre fichier de ressources (en.json) :

{
 "submit_button": "Submit"
}

{
  "submit_button": "Submit"
}

Exemple correct (WordPress et fichier PO)

Dans votre code :

<?php echo __( 'Submit', 'your-textdomain' ); ?>

<?php echo __( 'Submit', 'your-textdomain' ); ?>

Dans votre fichier de ressources (en.json) :

msgid "Submit"
msgstr ""

msgid "Submit"
msgstr ""

Exemple incorrect (chaîne codée en dur)

<button>Submit</button>

<button>Submit</button>

2. Utiliser des placeholders pour le contenu dynamique

Lorsque votre texte inclut des valeurs dynamiques, telles que des noms d’utilisateur, des dates ou des nombres, ne les insérez pas directement dans la chaîne. Utilisez plutôt des placeholders. Cela permet de garantir la précision des traductions et d’éviter de rompre la grammaire ou la mise en page dans d’autres langues.

PTC détecte et préserve les placeholders pendant la traduction.

Exemples corrects

Fichier PO :

msgid "Hello, %s!"
msgstr ""

msgid "Hello, %s!"
msgstr ""

Fichier JSON :

{
 "greeting": "Hello, {name}!"
}

{
  "greeting": "Hello, {name}!"
}

Fichier YAML :

greeting: "Hello, %{name}!"

greeting: "Hello, %{name}!"

Exemple incorrect (concaténation de chaînes)

const name = 'John';
const message = 'Hello, ' + name + '!';

const name = 'John';
const message = 'Hello, ' + name + '!';

Si vous divisez ou construisez des chaînes dans votre code, PTC ne verra pas la phrase complète. Cela peut entraîner une grammaire incorrecte, un phrasé maladroit ou des traductions manquantes.

Assurez-vous d’utiliser une syntaxe de placeholder qui fonctionne avec votre framework. Voici quelques modèles courants :

3. Assurez-vous que votre logiciel sait comment charger les fichiers de ressources

Une fois que votre texte est stocké dans des fichiers de ressources, votre application doit charger le bon fichier en fonction de la langue de l’utilisateur. Sans cette étape, l’utilisateur ne verra pas les traductions.

La plupart des frameworks et des plateformes prennent en charge cette fonctionnalité grâce à leurs outils i18n :

• React/Vue : utilisez des bibliothèques comme react-intl ou vue-i18n, qui gèrent le chargement des fichiers corrects lors de l’exécution

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
 locale: detectBrowserLanguage(),
 messages: {
 en: require('./locales/en.json'),
 fr: require('./locales/fr.json')
 }
})

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: detectBrowserLanguage(),
  messages: {
    en: require('./locales/en.json'),
    fr: require('./locales/fr.json')
  }
})

• Ruby on Rails : le module I18n charge automatiquement les fichiers de traduction YAML

I18n.locale = request.env['HTTP_ACCEPT_LANGUAGE']

I18n.locale = request.env['HTTP_ACCEPT_LANGUAGE']

• WordPress : charge automatiquement les fichiers .mo en fonction de la langue du site

Dans les applications web, vous pouvez également détecter la langue préférée de l’utilisateur à partir du navigateur et l’utiliser pour définir la langue par défaut. Par exemple :

• React/Vue

Utilisez la bibliothèque i18next-browser-languagedetector pour détecter automatiquement la langue du navigateur. Cette bibliothèque vérifie les paramètres de langue du navigateur et applique la langue appropriée comme langue par défaut.

• Ruby on rails

Détectez la langue du navigateur à l’aide de l’en-tête HTTP_ACCEPT_LANGUAGE et définissez la langue avec I18n.locale.

Pour les applications mobiles, les plateformes comme Android et iOS chargent les fichiers de ressources différemment :

• Android : stocke les fichiers de traduction dans le répertoire res/values, avec des sous-dossiers pour chaque langue (par exemple, res/values-fr pour le français). Android charge le fichier de langue correct en fonction des paramètres système de l’appareil.
• iOS : placez les fichiers .strings dans des dossiers .lproj spécifiques à la langue (par exemple, en.lproj/Localizable.strings). iOS sélectionne automatiquement le dossier approprié.

4. Ajouter un sélecteur de langue (si nécessaire)

Comme indiqué à l’étape précédente, la plupart des plateformes utilisent les paramètres système ou du navigateur pour charger la langue par défaut. Mais certains utilisateurs peuvent vouloir passer à une autre langue, en particulier sur le web. Un sélecteur de langue leur donne cette possibilité.

C’est facultatif, mais cela améliore souvent l’accessibilité et le contrôle de l’utilisateur. La mise en œuvre diffère selon le framework :

React/Vue

Utilisez des bibliothèques comme react-intl ou vue-i18n pour définir la langue. Vous devrez créer vous-même le sélecteur de langue (par exemple, une liste déroulante ou un bouton) pour recharger les fichiers de ressources appropriés en fonction de la sélection de l’utilisateur.

Ruby on rails

La bibliothèque I18n vous permet de modifier la langue par programmation, mais vous devez concevoir l’interface du sélecteur de langue. L’application recharge la page avec le fichier YAML correct une fois que l’utilisateur a sélectionné une langue.

WordPress

Les thèmes et les plugins utilisent la langue définie dans le backend. Pour traduire le contenu généré par l’utilisateur ou fournir un sélecteur de langue frontal, utilisez un plugin multilingue comme WPML.

Traduire vos fichiers de ressources avec PTC

Une fois vos fichiers prêts, vous pouvez les traduire avec PTC. Vous n’avez pas besoin de copier-coller des chaînes de caractères, de maintenir des scripts fragiles ou d’embaucher des traducteurs humains. PTC fournit des traductions de qualité humaine, optimisées pour le ton, le public et la plateforme de votre produit.

Étape 1 : s’inscrire et choisir comment utiliser PTC

Démarrez votre essai gratuit de 30 jours de PTC. Vous pouvez choisir parmi trois façons d’utiliser PTC : connecter votre dépôt Git, télécharger des fichiers manuellement ou utiliser l’API pour envoyer et recevoir des fichiers par programmation.

Étape 2 : configurer votre projet

Ensuite, vous configurerez votre projet.

Il vous sera demandé le nom de votre produit, ce qu’il fait, à qui il s’adresse (public cible) et les langues dans lesquelles vous souhaitez le traduire.
Cela aide PTC à comprendre le contexte de votre projet et à générer des traductions précises et pertinentes pour la marque, qui donnent l’impression d’avoir été rédigées par un expert du secteur.

Étape 3 : recevoir des traductions basées sur l’IA via une demande de fusion

PTC fournit des traductions de qualité humaine à la vitesse et au coût d’une machine. Vous aurez des traductions prêtes à être utilisées dans votre projet en quelques minutes.

Prêt à traduire votre logiciel ?

Vous avez préparé vos fichiers de ressources — PTC s’occupe du reste. Commencez votre essai gratuit pour obtenir des traductions IA de qualité humaine, adaptées au contexte, pour votre logiciel.

Essayez PTC gratuitement