Traduction de la fiche de personnage

La feuille de personnage i18n, ou internationalisation, vous permettra de concevoir votre feuille de personnagede manière à ce que notre communauté de traducteurs puisse traduire votre feuille dans leur langue, rendant ainsi cette langue accessible à tout le monde sur Roll20. Si votre fiche a été traduite dans une autre langue, disons le français, et que quelqu'un qui utilise votre fiche a sa langue de compte réglée en français, votre fiche affichera les textes traduits pour cet utilisateur.


Conception de votre fiche

Configurer votre feuillepour qu'elle puisse répondre au service i18n est très simple, mais peut prendre un peu de temps, surtout si vous travaillez avec une grande feuille préexistante. Il y a 2 étapes que vous devez suivre pour autoriser la traduction de votre fiche. Première étape, marquez les éléments que vous souhaitez contenir le texte traduit. Deuxième étape, créez un fichier de traductions qui contient toutes les chaînes qui seront traduites. Ce fichier sera transmis à notre service de traduction, Crowdin, où nos bénévoles pourront traduire chaque chaîne dans une autre langue. Cela générera le même fichier de traduction dans toutes les autres langues, que nous utiliserons ensuite lorsque quelqu'un choisit cette langue sur Roll20.

Étant donné qu'il peut être difficile de créer une seule conception qui peut s'adapter à plusieurs tailles de texte traduit, nous avons ajouté une classe à l'élément parent "charsheet" pour vous permettre d'avoir des styles séparés pour chaque langue. La classe est "lang-[code de langue à 2 caractères]", donc si la langue est l'anglais "lang-en" ou le français "lang-fr". Cela vous permettra, après la traduction de votre fiche, de modifier un style spécifiquement pour une langue, si le nouveau texte pour cette langue ne correspond pas à votre conception actuelle.


Première étape, formatage de la fiche

Vous voudrez ajouter l'attribut "data-i18n=[unique-key]" à chaque élément contenant du texte que vous souhaitez traduire. Conservez tout le texte déjà présent dans l'élément, car il peut être utilisé pour générer votre fichier de traduction une fois que vous avez terminé (explication plus tard). Il est particulièrement important que le texte reste là alors que le code sheet-i18n n'est que sur Dev, sinon votre feuille ne fonctionnera plus sur le site principal jusqu'à ce que sheet-i18n arrive sur le site principal.Si vous voulez d'autres exemples du fonctionnement des traductions i18n, consultez la feuille5th Edition OGL by Roll20qui a déjà été formatée avec le texte i18n.


Texte standard

<div class="col">
    <div class="row">
        <span data-i18n="acrobatics-u">ACROBATICS <span>(Dex)</span></span>
        <input class="num" type="text" name="attr_npc_acrobatics" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="animal-handling-u">ANIMAL HANDLING</span>
        <input class="num" type="text" name="attr_npc_animal_handling" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="arcana-u">ARCANA</span>
        <input class="num" type="text" name="attr_npc_arcana" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="athletics-u">ATHLETICS</span>
        <input class="num" type="text" name="attr_npc_athletics" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="deception-u">DECEPTION</span>
        <input class="num" type="text" name="attr_npc_deception" placeholder="0">
    </div>
    <div class="row">
        <span data-i18n="history-u">HISTORY</span>
        <input class="num" type="text" name="attr_npc_history" placeholder="0">
    </div>
</div>

Remarquez comment chaque span dans ce bloc de code a l'attribut data-i18n avec une clé qui fait référence au texte contenu dans le span. Remarquez également qu'il y a du HTML à l'intérieur du span, c'est tout à fait normal. Le HTML sera marqué par Crowdin afin qu'il soit facile pour eux de copier et coller le HTML dans leur traduction. Bien que le HTML soit autorisé à l'intérieur de la traduction, essayez de le garder aussi simple que possible car les traducteurs ne sont probablement pas experts en code et pourraient avoir des difficultés à copier le code s'il n'est pas simple. Il est très important que chaque chaîne unique ait une clé unique ; remarquez que puisque ce texte est en majuscules, j'utilise un -u à la fin de chaque clé. C'est parce que ces mots apparaissent plus tard dans la feuille, mais sont normalement en minuscules.

Il y a des cas où vous voudrez ajouter un contexte supplémentaire à la clé que le traducteur pourrait ne pas comprendre uniquement à partir du texte, comme avec les abréviations.

<div class="row">
    <span data-i18n="components:-u">COMPOSANTS:</span>
    <input type="checkbox" name="attr_spellcomp_v" value="{{v=1}}" checked="checked">
    <span data-i18n="spell-component-verbal">V</span>
    <input type="checkbox" name="attr_spellcomp_s" value="{{s=1}}" checked="checked">
    <span data-i18n="spell-component-somatic">S</span>
    <input type="checkbox" name="attr_spellcomp_m" value="{{m=1}}" checked="checked">
    <span data-i18n="spell-component-material">M</span>
    <input type="text" name="attr_spellcomp_materials" accept="Material" style="margin-left: 17px; width: 215px;" placeholder="ruby dust worth 50gp" data-i18n-place="ruby-dust-place">
</div>

Notez que les clés pour les textes V, S et M épèlent exactement à quoi le caractère unique se réfère. Sinon, le traducteur n'aurait aucune idée de ce que signifie "V". De cette façon, le traducteur peut changer V par la première lettre de ce que "Verbal" signifie dans leur langue si c'est différent.


Texte de l'attribut de l'élément

Souvent, vous aurez du texte à l'intérieur d'un attribut d'élément qui doit être traduit, par exemple les espaces réservés et les titres. Pour remplacer le texte dans ces attributs, vous pouvez utiliser "data-i18n-[attribute]='key'" pour indiquer au parseur que la clé que vous fournissez doit être utilisée pour remplacer le texte dans l'attribut donné. Par exemple, si vous remplacez le texte dans un attribut de placeholder :

<input name="attr_weapon_name" data-i18n-placeholder="weapon-name" placeholder="Hand Axe" />

Les attributs supportés sont : titre, alt, aria-label, label, placeholder

Remplacement de variable

Un cas particulier est lorsque vous avez du texte à l'intérieur d'une chaîne que vous ne souhaitez pas traduire, vous pouvez utiliser des variables spéciales et l'attribut "data-i18n-vars".

<span data-i18n="var-test" data-i18n-vars="will not|be translated">Ce texte {{0}} {{1}}</span>

Le texte à l'intérieur de l'attribut "data-i18n-vars" sera divisé par le caractère "|" et placé dans un tableau. Vous pouvez ensuite faire référence à ce tableau en utilisant {{[index]}} pour référencer la ligne spécifique du tableau.


Remplacement de clé dynamique

Il existe quelques situations où vous devez récupérer une traduction en fonction d'une clé qui change. Par exemple, vous avez un menu déroulant de "sélection de classe" où l'utilisateur peut choisir sa classe. Les noms de classe qui apparaissent dans cette liste peuvent être traduits à l'aide des outils normaux. Mais vous ne pouvez pas traduire la valeur à l'intérieur de l'option dans la boîte de sélection. (nous faisons cela pour que si vous changez de langue, les données de la feuille ne doivent pas être traduites. Le système de traduction reste purement dans le front-end et non dans la couche de données). Au lieu de cela, lorsque vous voulez afficher ce nom de classe traduit, vous marquez le span avec l'attribut "data-i18n-dynamic". Cela indique à l'analyseur syntaxique d'utiliser la valeur qui apparaîtrait normalement dans l'étendue comme clé de recherche d'une traduction.

// Cette partie ne doit pas être modifiée
<select class="hiding" name="attr_class" style="width: 64px;">
	<option value="Barbarian" data-i18n="barbarian">Bárbaro</option>
	<option value="Bard" data-i18n="bard">Bardo</option>
	<option value="Cleric" data-i18n="cleric">Clerigo</option>
	<option value="Druid" data-i18n="druid">Druida</option>
</select>
<span data-i18n="class-options">Options de classe</span> (<span name="attr_class" data-i18n-dynamic></span>)
{ "Barbare" : "Bárbaro", "Barde" : "Bardo", "Clerc" : "Clerigo", "Druide" : "Druida" }

Maintenant, avec le code ci-dessus, lorsque vous sélectionnez "Bárbaro" dans la boîte de sélection, "Barbarian" sera enregistré sous attr_class. Mais lorsque la feuille s'actualise et que la balise span avec name="attr_class" devrait normalement être remplie avec "Barbarian", à la place "Barbarian" sera utilisé comme clé pour faire référence au fichier de traduction JSON et afficher "Bárbaro" à la place.


Requêtes de lancer

Le texte dans les requêtes roll ne peut pas être traduit dans le HTML de la feuille de personnage, cependant, en utilisantScripts du Travailleur de Feuilleet des attributs, le texte peut être traduit en JavaScript et substitué dans la requête roll.

<script type="text/worker">

on("sheet:opened", function(eventInfo) {
    
    setAttrs({
        bonusmacro: getTranslationByKey("ask-bonus")
    });     
    
});

</script>
<span style="display: none" data-i18n="ask-bonus">Quel est ton bonus?</span> <button type='roll' value='[[d20 + ?{@{bonusmacro}|0}]]' ></button>

La balise <span> n'apparaîtra pas, mais elle entraînera l'inclusion de la clé "ask-bonus" dans le fichier de traduction généré. Le script créera un attribut appelé "bonusmacro" avec la valeur "Quel est ton bonus?", et le bouton de lancement utilisera cette valeur pour envoyer la commande, "[[d20 + ?{Quel est ton bonus?|0}]]". Si la feuille est ouverte alors qu'un autre fichier de traduction est actif, elle définira l'attribut sur la nouvelle valeur traduite pour "bonusmacro". Cette technique peut être utilisée pour remplacer des clés individuelles, ou un seul attribut peut être utilisé pour stocker une requête complexe, avec le script de la feuille de travail insérant des clés traduites dans le code de requête au besoin.

<script type="text/worker">
on("sheet:opened", function(eventInfo){
    
    setAttrs({
        rollquery: "?{" + getTranslationByKey("advantageordisadvantage") +"|" + getTranslationByKey("neither") + ",d20|" + getTranslationByKey("advantage") + ",2d20kh1[" + getTranslationByKey("withadvantage") + "]|" + getTranslationByKey("disadvantage") + ",2d20kl1[" + getTranslationByKey("withdisadvantage") + "]}",
    });
    
});

</script>
<span style="display: none" data-i18n="advantageordisadvantage">Est-ce que vous lancez avec Avantage ou Désavantage ?</span> 
<span style="display: none" data-i18n="neither">Aucun</span> 
<span style="display: none" data-i18n="advantage">Avantage</span> 
<span style="display: none" data-i18n="withadvantage">avec Avantage</span> 
<span style="display: none" data-i18n="disadvantage">Désavantage</span> 
<span style="display: none" data-i18n="withdisadvantage">avec Désavantage</span> 
<button type='roll' value='[[@{rollquery}]]' ></button>

Cet exemple créera le jet suivant en utilisant le fichier de traduction par défaut

[[?{Est-ce que vous lancez avec Avantage ou Désavantage?|Aucun,d20|Avantage,2d20kh1[avec Avantage]|Désavantage,2d20kl1[avec Désavantage]}]]

 


Modèle des jets

Du code HTML statique à l'intérieur de la définition du modèle de lancer de feuille peut utiliser tous les outils mentionnés ci-dessus, y compris les clés dynamiques. Si elle se trouve dans la définition du modèle de lancer de feuille, le code comme{{strength-key}}donnera la valeur traduite de ce qui est la valeur de {{strength-key}}. Si vous souhaitez envoyer des valeurs de traduction dynamiques à l'intérieur d'une fonction de lancer, utilisez l'outil ci-dessous.

À l'intérieur d'une fonction de lancer, en utilisant un modèle de lancer, vous pouvez envelopper n'importe quel texte dans "^{ [key] }" pour indiquer que le texte est une clé de traduction. Ce texte sera remplacé par la version traduite associée à cette clé. Cette étape se produit après que les valeurs de la feuille de personnage ont été échangées, donc "^{ @{ability_key} }" où ability_key = STRENGTH sera analysé comme "^{STRENGTH}" et affichera n'importe quelle valeur de traduction que vous avez pour "STRENGTH". Cela fonctionne également sur la clé, pour les paires clé/valeur utilisées dans la fonction allprops(). Par exemple: "{{^{TEXT}=@{content} }}" aura la valeur de traduction pour "TEXT" en tant que "{{key}}" à l'intérieur de la fonction allprops().


Commande de la liste

Si vous avez une liste d'éléments dans un conteneur, qui est ordonnée alphabétiquement en anglais, et que vous voulez pouvoir changer l'ordre dans d'autres langues, vous pouvez utiliser cet outil. La réorganisation suivra toute la mise en forme actuelle de la liste, donc même si votre liste s'étend sur plusieurs sous-conteneurs, tout devrait rester formaté de la même manière.

Identifier le conteneur. Tous les éléments de la liste doivent être à l'intérieur du conteneur, sinon ils seront ignorés :

data-i18n-list="list-key"

Identifier les éléments individuels dans la liste. Ces éléments peuvent être un bloc de code HTML. Lorsqu'ils sont réordonnés, tout le bloc sera déplacé.

data-i18n-list-item="item-key"

(Optionnel) L'ordre "initial" de la liste est supposé être lu de haut en bas dans le code HTML. Si votre ordre est différent, vous pouvez numéroter manuellement les éléments (en commençant à 1) pour définir l'ordre.

data-i18n-list-item-num="1"

(Spécial) Ceci n'est pas une balise que vous utiliserez, c'est une balise qui sera créée s'il y a une erreur avec votre mise en forme. Si une erreur survient avec votre code d'ordre de liste, la liste sera ignorée et cette balise sera créée sur l'élément conteneur de liste avec l'erreur. Si la liste ne se réordonne pas comme vous vous y attendez, vérifiez l'élément parent pour une erreur.

data-i18n-error="Message d'erreur"

Ajoutez la clé à votre fichier de traduction. Celui-ci contiendra une liste séparée par des virgules de toutes les clés d'éléments, dans la langue de la traduction originale. Le réordonnement de ces clés réordonnera les éléments. La clé de liste peut être utilisée pour plusieurs listes, si tous les éléments à trier sont les "mêmes" éléments. Le HTML ne doit pas être identique, seuls les mots qui sont triés doivent l'être. Par exemple, une liste de "Compétences" dans D&D peut apparaître à plusieurs endroits sur une feuille avec un HTML complètement différent, mais elles peuvent toutes utiliser la même clé de liste. Je vais utiliser le code d'exemple ci-dessous pour générer ma clé de liste.

"skills-list": "acrobatics,arcana,sleight-of-hand,survival"

Pour réordonner cette liste pour la langue tchèque, la valeur de la clé de liste ressemblerait à:

 "skills-list": "acrobatics,sleight-of-hand,arcana,survival"

Exemple :

<div data-i18n-list="skills-list"> // Étiquetez votre conteneur de liste et indiquez la clé qu'il utilisera pour définir l'ordre
    <div> // notez que les éléments se trouvent dans un sous-conteneur, ces colonnes existeront toujours après le réordonnancement
        <div data-i18n-list-item="acrobatics"> // Étiquetez vos éléments de liste, ce sont les blocs qui seront réordonnés
            <span data-i18n="acrobatics-u">ACROBATICS</span>
            <input type="text" name="attr_npc_acrobatics" placeholder="0">
        </div>
        <div data-i18n-list-item="arcana">
            <span data-i18n="arcana-u">ARCANE</span>
            <input type="text" name="attr_npc_arcana" placeholder="0">
        </div>
    </div>
    <div>
        <div data-i18n-list-item="sleight-of-hand">
            <span data-i18n="sleight-of-hand-u">SLEIGHT OF HAND</span>
            <input type="text" name="attr_npc_sleight_of_hand" placeholder="0">
        </div>
        <div data-i18n-list-item="survival">
            <span data-i18n="survival-u">SURVIVAL</span>
            <input type="text" name="attr_npc_survival" placeholder="0">
        </div>
    </div>
</div>

Le même exemple seulement, au lieu d'avoir la liste descendre les colonnes puis traverser, nous allons avoir la liste traverser les colonnes puis descendre :

<div data-i18n-list="skills-list">
    <div>
        <div data-i18n-list-item="acrobatics" data-i18n-list-item-num="1">
            <span data-i18n="acrobatics-u">ACROBATICS</span>
            <input type="text" name="attr_npc_acrobatics" placeholder="0">
        </div>
        <div data-i18n-list-item="sleight-of-hand" data-i18n-list-item-num="3">
            <span data-i18n="sleight-of-hand-u">SLEIGHT OF HAND</span>
            <input type="text" name="attr_npc_sleight_of_hand" placeholder="0">
        </div>
    </div>
    <div>
        <div data-i18n-list-item="arcana" data-i18n-list-item-num="2">
            <span data-i18n="arcana-u">ARCANA</span>
            <input type="text" name="attr_npc_arcana" placeholder="0">
        </div>
        <div data-i18n-list-item="survival" data-i18n-list-item-num="4">
            <span data-i18n="survival-u">SURVIVAL</span>
            <input type="text" name="attr_npc_survival" placeholder="0">
        </div>
    </div>
</div>

Étape Deux, Génération du Fichier de Traduction

Une fois que vous avez formaté votre feuille en suivant les instructions ci-dessus, vous pouvez très facilement créer votre fichier de traduction. Après avoir chargé votre feuille dans l'éditeur,allez dans le jeu,et ouvrez les Outils de développement pour votre navigateur et accédez à la console. Tout en bas de la console, là où vous pouvez entrer du code, tapez "i18nOutput". (il commencera probablement à se compléter automatiquement une fois que vous commencerez à taper) Appuyez sur Entrée pour récupérer cet objet et il affichera une chaîne JSON contenant toutes les clés que vous avez utilisées avec le texte correspondant à l'intérieur de l'élément/placeholder. Vous devriez ensuite pouvoir copier ce texte dans votre format JSON préféré (facultatif, mais recommandé), puis dans l'onglet "Traduction" de la zone des Paramètres de Jeu Feuille Personnalisée.

Si vous souhaitez créer le fichier translation.json manuellement, vous pouvez utiliser le format suivant :

{
    "clé": "chaine",
    "clé-2": "Une autre chaine."
}

Une fois que vous avez formaté votre feuille et enregistré la traduction JSON pour votre feuille personnalisée, elle devrait ressembler exactement à ce qu'elle était avant que vous traduisiez tout, à condition que tout ait été fait correctement.

Si vous voyez du texte rouge comme [translation-key], cela signifie que vous indiquez au système de l'utiliser, mais vous ne l'avez pas entré dans la traduction JSON. Si vous utilisez le JSON généré par le système, vous ne devriez voir aucun de ces éléments.

Une fois que vous avez un fichier de traduction fonctionnel, vous pouvez le télécharger avec le reste du code de votre fiche personnage dans le dossier racine de votre fiche personnage sous le nom de "translation.json". Ceci sera automatiquement pris en compte par notre système et téléchargé sur Crowdin, où il pourra ensuite être traduit.


Modification de votre traduction

Si vous souhaitez modifier votre traduction une fois celle-ci déjà générée, vous pouvez éditer votre fichier translation.json et les modifications seront diffusées dans les fichiers de langue lors des prochaines mises à jour des traductions. Cependant, certaines modifications ne provoqueront pas l'écrasement des valeurs de traduction, même si les valeurs n'ont pas encore été traduites. En d'autres termes, parfois les modifications apportées au fichier translation.json ne s'affichent pas dans votre fiche personnage.

Les modifications qui ne déclencheront pas de mise à jour comprennent les modifications où la seule différence est l'espace blanc ou les caractères spéciaux, ainsi que les modifications qui ne font que supprimer des caractères sans en ajouter ou en changer.


Soumettre vos modifications à Roll20

VoirGuide du débutant sur GitHub


Voir aussi

 
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 10 sur 22