La scheda personaggio i18n, o internazionalizzazione, le permetterà di progettare la sua scheda personaggioin modo tale che la nostra comunità di traduttori possa tradurre la sua scheda nella sua lingua, rendendola disponibile a chiunque su Roll20. Se il tuo foglio è stato tradotto in un'altra lingua, ad esempio il francese, e qualcuno che utilizza il tuo foglio ha impostato la lingua del proprio account in francese, il tuo foglio verrà visualizzato con i testi tradotti per quell'utente.
Progettare il tuo foglio
Impostare il suo foglioper poter rispondere al servizio i18n è molto semplice, ma può richiedere un po' di tempo, soprattutto se sta lavorando con un foglio preesistente di grandi dimensioni. Ci sono 2 passaggi che devi seguire per consentire la traduzione del tuo foglio. Passaggio uno, contrassegnare gli elementi che desideri contenere il testo tradotto. Passaggio due, creare un file di traduzione che contiene tutte le stringhe che verranno tradotte. Questo file verrà inviato al nostro servizio di traduzione, Crowdin, dove i nostri volontari potranno tradurli stringa per stringa in un'altra lingua. Questo genererà lo stesso file di traduzione in tutte le altre lingue, che utilizzeremo poi di conseguenza quando qualcuno seleziona quella lingua su Roll20.
Poiché creare un singolo design che possa adattarsi a diverse dimensioni di testo tradotto può essere difficile, abbiamo aggiunto una classe all'elemento padre "charsheet" per consentirti di avere un css separato per le singole lingue. La classe è "lang-[codice lingua di 2 caratteri]", quindi se la lingua è l'inglese "lang-en" o il francese "lang-fr". Questo ti permetterà, dopo che il tuo foglio è stato tradotto, di modificare uno stile, specificamente per una lingua, se il nuovo testo per quella lingua non si adatta al tuo design attuale.
Passaggio Uno, Formattazione del Foglio
Vorrai aggiungere l'attributo "data-i18n=[unique-key]" ad ogni elemento che contiene del testo che desideri tradurre. Mantieni tutto il testo già presente nell'elemento, perché potrà essere utilizzato per generare il file di traduzione quando avrai finito (spiegato in seguito). È particolarmente importante che il testo rimanga lì mentre il codice sheet-i18n è solo su Dev, altrimenti il tuo foglio non funzionerà più sul sito principale fino a quando sheet-i18n non arriverà su main. Se desideri ulteriori esempi su come funzionano le traduzioni i18n, dai un'occhiata al 5th Edition OGL di Roll20 , che è già stato formattato con il testo i18n.
Ordinaria
<div class="col">
<div class="row">
<span data-i18n="acrobatics-u">ACROBATICA <span>(Destrezza)</span></span>
<input class="num" type="text" name="attr_npc_acrobatics" placeholder="0">
</div>
<div class="row">
<span data-i18n="animal-handling-u">GESTIONE ANIMALI</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">ATLETICA</span>
<input class="num" type="text" name="attr_npc_athletics" placeholder="0">
</div>
<div class="row">
<span data-i18n="deception-u">DECEZIONE</span>
<input class="num" type="text" name="attr_npc_deception" placeholder="0">
</div>
<div class="row">
<span data-i18n="history-u">STORIA</span>
<input class="num" type="text" name="attr_npc_history" placeholder="0">
</div>
</div>
Nota come ogni span in questo blocco di codice ha l'attributo data-i18n con una chiave che fa riferimento al testo contenuto nello span. Notare anche che c'è dell'HTML all'interno dello span, questo è del tutto normale. L'HTML verrà contrassegnato da Crowdin in modo che sia facile per loro copiare e incollare l'HTML nella loro traduzione. Anche se l'HTML è consentito all'interno della traduzione, cerca di mantenerlo il più semplice possibile perché i traduttori probabilmente non sono esperti di codice e potrebbero avere problemi a copiare il codice se non è semplice. È molto importante che ogni stringa unica abbia una chiave unica; notare che poiché questo testo è tutto in maiuscolo, sto usando un -u alla fine di ogni chiave. Ciò è perché queste parole compaiono successivamente nella scheda, ma sono scritte normalmente.
Ci sono casi in cui vorrai aggiungere contesto aggiuntivo alla chiave che il traduttore potrebbe non ottenere solo dal testo, come nel caso delle abbreviazioni.
<div class="row">
<span data-i18n="components:-u">COMPONENTI:</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>
Nota che le chiavi per i testi V, S e M indicano esattamente a cosa si riferisce il singolo carattere. Altrimenti, il traduttore non saprebbe cosa significa "V". In questo modo, il traduttore può sostituire V con la prima lettera di ciò che "Verbale" significa nella loro lingua, se è diverso.
Testo dell'Attributo dell'Elemento
Molte volte avrai testo all'interno di un attributo dell'elemento che ha bisogno di essere tradotto, ad esempio, placeholder e titoli. Per sostituire il testo in questi attributi puoi utilizzare "data-i18n-[attribute]='key'" per indicare al parser che la chiave che stai fornendo deve essere utilizzata per sostituire il testo all'interno dell'attributo specificato. Per esempio, se stavi sostituendo il testo in un attributo placeholder:
<input name="attr_weapon_name" data-i18n-placeholder="weapon-name" placeholder="Hand Axe" />
Gli attributi supportati sono: title, alt, aria-label, label, placeholder
Sostituzione di variabili
Un caso particolare è se hai del testo all'interno di una stringa che non vuoi tradurre, puoi usare variabili speciali e l'attributo "data-i18n-vars".
<span data-i18n="var-test" data-i18n-vars="will not|be translated">Questo testo {{0}} {{1}}</span>
Il testo all'interno dell'attributo data-i18n-vars sarà diviso dal carattere "|" e inserito in un array. Puoi quindi fare riferimento a quell'array usando {{[index]}} per fare riferimento alla riga specifica dell'array.
Sostituzione dinamica delle chiavi
Ci sono alcune situazioni in cui è necessario recuperare una traduzione in base a una chiave variabile. Ad esempio, hai un menu a tendina per la "selezione della classe" in cui l'utente può selezionare la propria classe. I nomi delle classi che compaiono in questa lista possono essere tradotti utilizzando gli strumenti normali. Ma non può tradurre il valore all'interno dell'opzione nella casella di selezione. (lo facciamo in modo che, se cambia lingua, i dati del foglio non debbano essere tradotti. Il sistema di traduzione rimane puramente nel front-end e non nel livello dei dati) Invece, dove desidera visualizzare il nome di questa classe, tradotto, si contrassegna lo span con l'attributo "data-i18n-dynamic". Questo indicherà al parser di utilizzare il valore che normalmente appare nello span come chiave per ottenere una traduzione.
// Questa parte non deve essere modificata <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">Opzioni di classe</span> (<span name="attr_class" data-i18n-dynamic></span>)
{"Barbaro": "Bárbaro", "Bardo": "Bardo", "Chierico": "Clerigo", "Druido": "Druida" }.
Ora, con il codice sopra, quando selezioni "Bárbaro" dalla casella di selezione, "Barbarian" verrà salvato come attr_class. Ma quando il foglio si aggiorna e lo span con name="attr_class" dovrebbe essere riempito con "Barbarian", invece "Barbarian" verrà utilizzato come chiave per fare riferimento al JSON di traduzione e mostrare "Bárbaro" al suo posto.
Richiedi il Tiro
Il testo nelle query di roll non può essere tradotto nell'HTML del foglio del personaggio, tuttavia, utilizzandoScript del foglio di lavoroe attributi, il testo può essere tradotto in JavaScript e sostituito nella query di roll.
<script type="text/worker">
on("sheet:opened", function(eventInfo){
setAttrs({
bonusmacro: getTranslationByKey("ask-bonus")
});
});
</script>
<span style="display: none" data-i18n="ask-bonus">Qual è il tuo bonus?</span> <button type='roll' value='[[d20 + ?{@{bonusmacro}|0}]]' ></button>
Il tag <span> non apparirà, ma causerà l'inclusione della chiave "ask-bonus" nel file di traduzione generato. Lo script creerà un attributo chiamato "bonusmacro" con il valore "Qual è il tuo bonus?", e il pulsante di lancio utilizzerà quel valore per inviare il comando, "[[d20 + ?{Qual è il tuo bonus?|0}]]". Se il foglio è aperto mentre un altro file di traduzione è attivo, imposterà l'attributo sul nuovo valore tradotto per "bonusmacro". Questa tecnica può essere utilizzata per sostituire singole chiavi, o un singolo attributo può essere utilizzato per memorizzare una query complessa, con lo Script del Lavoratore del Foglio che inserisce le chiavi tradotte nel codice della query secondo necessità.
<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">Stai tirando con Vantaggio o Svantaggio?</span>
<span style="display: none" data-i18n="neither">Nessuno</span>
<span style="display: none" data-i18n="advantage">Vantaggio</span>
<span style="display: none" data-i18n="withadvantage">con Vantaggio</span>
<span style="display: none" data-i18n="disadvantage">Svantaggio</span>
<span style="display: none" data-i18n="withdisadvantage">con Svantaggio</span>
<button type='roll' value='[[@{rollquery}]]' ></button>
Questo esempio creerà il seguente tiro utilizzando il file di traduzione predefinito
[[?{Stai tirando con Vantaggio o Svantaggio?|Nessuno,d20|Vantaggio,2d20kh1[con Vantaggio]|Svantaggio,2d20kl1[con Svantaggio]}]]
Template di tiro
L'HTML statico all'interno della definizione del modello di tiro del foglio può utilizzare tutti gli strumenti sopra elencati, inclusi i tasti dinamici. Se è nella definizione del modello di tiro del foglio, il codice come{{strength-key}}darà il valore tradotto di qualsiasi sia il valore di {{strength-key}}. Se desideri inviare valori tradotti dinamicamente all'interno di una funzione di tiro, utilizza lo strumento sottostante.
All'interno di una funzione di roll, utilizzando un modello di roll, puoi avvolgere qualsiasi testo in "^{ [key] }" per indicare il testo come chiave di traduzione. Questo testo verrà sostituito con la versione tradotta associata a quella chiave. Questo passaggio avviene dopo che i valori del foglio del personaggio sono stati sostituiti, quindi "^{ @{ability_key} }" dove ability_key = STRENGTH verrà analizzato come "^{STRENGTH}" e visualizzerà il valore di traduzione che hai per "STRENGTH". Questo funziona anche sulla chiave, per le coppie chiave/valore utilizzate nella funzione allprops(). Ad esempio: "{{^{TEXT}=@{content} }}" avrà il valore di traduzione per "TEXT" come "{{key}}" all'interno della funzione allprops().
Ordine della lista
Se hai una lista di elementi in un contenitore, che in inglese è ordinata in ordine alfabetico, e vuoi poter cambiare l'ordine in altre lingue, puoi utilizzare questo strumento. Il riordinamento rispetterà tutta la formattazione corrente nella lista, quindi anche se la tua lista si estende su diversi sotto-contenitori, tutto dovrebbe rimanere formattato allo stesso modo.
Identifica il contenitore. Tutti gli elementi della lista devono essere all'interno del contenitore, altrimenti verranno ignorati:
data-i18n-list="list-key"
Identificare gli elementi individuali nell'elenco. Questi elementi possono essere un blocco di HTML. Quando vengono riordinati, l'intero blocco verrà spostato.
data-i18n-list-item="item-key"
(Opzionale) L'ordine 'inizio' dell'elenco si presume sia letto dall'alto in basso nell'HTML. Se il tuo ordine è diverso, puoi numerare manualmente gli elementi (a partire da 1) per impostare l'ordine.
data-i18n-list-item-num="1"
(Speciale) Questo non è un tag che 'userai', è un tag che verrà creato se c'è un errore nel tuo formattazione. Se c'è un errore nel tuo codice di Ordine Elenco, l'elenco verrà ignorato e questo tag verrà creato sull'elemento contenitore dell'elenco con l'errore. Se non vedi l'elenco essere riordinato, come ti aspetti, controlla l'elemento genitore per un errore.
data-i18n-error="Messaggio di errore"
Aggiungi la chiave al tuo file di traduzione. Questo conterrà un elenco delimitato da virgole di tutte le chiavi degli elementi, nella lingua della traduzione originale. Riordinando queste chiavi si riordinano gli elementi. La chiave della lista può essere utilizzata per diverse liste, se tutti gli elementi da ordinare sono gli stessi elementi. L'HTML non deve essere lo stesso, solo le parole che vengono ordinate. Ad esempio, una lista di "Abilità" in D&D può apparire in diversi punti su un foglio con HTML totalmente diverso, ma possono tutti utilizzare la stessa chiave della lista. Utilizzerò il codice di esempio riportato di seguito per generare la mia chiave della lista.
"skills-list": "acrobatics,arcana,sleight-of-hand,survival"
Per riordinare questa lista per la lingua ceca, il valore della chiave della lista sarebbe:
"skills-list": "acrobatics,sleight-of-hand,arcana,survival"
Esempio:
<div data-i18n-list="skills-list"> // Etichetta il tuo contenitore di elenchi e puntalo alla chiave che verrà utilizzata per impostare l'ordine
<div> // nota che gli elementi sono in un sotto-contenitore, queste colonne esisteranno ancora dopo che avviene il riordinamento
<div data-i18n-list-item="acrobatics"> // Etichetta i tuoi elementi di elenco, questi sono i blocchi che verranno riordinati
<span data-i18n="acrobatics-u">ACROBATICA</span>
<input type="text" name="attr_npc_acrobatics" placeholder="0">
</div>
<div data-i18n-list-item="arcana">
<span data-i18n="arcana-u">ARCANA</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">DESTREZZA MANUALE</span>
<input type="text" name="attr_npc_sleight_of_hand" placeholder="0">
</div>
<div data-i18n-list-item="survival">
<span data-i18n="survival-u">SOPRAVVIVENZA</span>
<input type="text" name="attr_npc_survival" placeholder="0">
</div>
</div>
</div>
Lo stesso esempio solo, anziché fare scorrere l'elenco lungo le colonne e poi attraverso, faremo scorrere l'elenco attraverso le colonne e poi verso il basso:
<div data-i18n-list="skills-list">
<div>
<div data-i18n-list-item="acrobatics" data-i18n-list-item-num="1">
<span data-i18n="acrobatics-u">ACROBATICA</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">DESTREZZA DI MANO</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">SOPRAVVIVENZA</span>
<input type="text" name="attr_npc_survival" placeholder="0">
</div>
</div>
</div>
Passo Due, Generazione del File di Traduzione
Una volta che hai formattato il tuo foglio, seguendo le istruzioni sopra, puoi creare facilmente il tuo file di traduzione. Dopo aver caricato il tuo foglio nell'editor, vai nel gioco, e apri gli Strumenti per sviluppatori del tuo browser e vai alla console. In fondo alla console, dove puoi inserire il codice, digita "i18nOutput". (probabilmente inizierà ad autocompletarsi una volta che inizi a digitare) Premi invio per recuperare questo oggetto e verrà visualizzata una stringa JSON contenente tutte le chiavi che hai utilizzato con il relativo testo dall'elemento/placeholder. Dovresti quindi essere in grado di copiare questo testo nel tuo formato JSON preferito (opzionale, ma consigliato) e quindi nella scheda "Traduzione" nell'area delle Impostazioni di Gioco per Fogli Personalizzati.
Se desideri creare manualmente il file translation.json, puoi utilizzare il seguente formato:
{
"key": "string",
"key-2": "Another string."
}
Una volta che hai il tuo foglio formattato e il file di traduzione JSON salvato per il tuo foglio personalizzato, dovrebbe apparire esattamente come prima della traduzione, a condizione che tutto sia stato fatto correttamente.
Se vedi del testo rosso come [translation-key], questa è una chiave che stai dicendo al sistema di usare, ma che non hai inserito nel file di traduzione JSON. Se si utilizza il JSON generato dal sistema, non dovresti vedere nessuno di questi.
Una volta che hai un file di traduzione funzionante, puoi caricarlo insieme al resto del codice del tuo foglio nel percorso principale della cartella del tuo foglio personaggio con il nome "translation.json". Questo verrà automaticamente rilevato dal nostro sistema e caricato su Crowdin, dove potrà essere tradotto.
Modifica della tua traduzione
Se desideri modificare la tua traduzione dopo che è stata già generata, puoi modificare il tuo file translation.json e le modifiche verranno propagate ai file di lingua la prossima volta che vengono aggiornate le traduzioni. Tuttavia, alcune modifiche non causeranno la sovrascrittura dei valori di traduzione, anche se i valori non sono ancora stati tradotti. In altre parole, a volte le modifiche al file translation.json non verranno visualizzate nel tuo foglio.
Le modifiche che non attiveranno un aggiornamento includono modifiche in cui l'unica differenza è lo spazio bianco o i caratteri speciali e modifiche che solo rimuovono caratteri senza cambiare o aggiungere nuovi caratteri.
Invio delle modifiche a Roll20
VedereGuida per principianti a GitHub
Vedi anche
- ACSI - Automated Character Sheet Internationalizer. Uno strumento Linux che può risparmiare tempo durante l'inserimento e la creazione dei tag di lingua.