La internacionalización de la hoja de personaje, o i18n, te permitirá diseñar tu hoja de personajede tal manera que nuestra comunidad de traductores pueda traducir tu hoja a su idioma, haciendo que ese idioma esté disponible para cualquier persona en Roll20. Si tu hoja ha sido traducida a otro idioma, como el francés, y alguien que utiliza tu hoja tiene su idioma de cuenta configurado en francés, tu hoja mostrará los textos traducidos para ese usuario.
Diseñando tu hoja
Configurar tu hoja de personajepara poder responder al servicio de i18n es muy sencillo, solo puede llevar algo de tiempo, especialmente si estás trabajando con una hoja preexistente grande. Hay 2 pasos que debes seguir para permitir que tu hoja sea traducida. Primer paso, marca los elementos que deseas que contengan el texto traducido. Segundo paso, crea un archivo de traducciones que contenga todas las cadenas que se traducirán. Este archivo se enviará a nuestro servicio de traducción, Crowdin, donde nuestros voluntarios podrán traducir cadena por cadena a otro idioma. Esto generará el mismo archivo de traducción en todos los demás idiomas, que luego utilizaremos cuando alguien tenga ese idioma seleccionado en Roll20.
Dado que crear un solo diseño que pueda adaptarse a múltiples tamaños de texto traducido puede ser difícil, hemos agregado una clase al elemento padre "charsheet" para permitirte tener CSS separado para idiomas individuales. La clase es "lang-[código de idioma de 2 caracteres]", por lo que si el idioma es inglés "lang-en" o francés "lang-fr". Esto te permitirá, después de que tu hoja haya sido traducida, cambiar un estilo específicamente para un idioma, si el nuevo texto para ese idioma no se ajusta a tu diseño actual.
Primer Paso, Formato de la Hoja
Querrás agregar el atributo "data-i18n=[unique-key]" a cada elemento que tenga texto en él que quieras traducir. Mantén todo el texto que ya está ahí en el elemento, porque se puede usar para generar tu archivo de traducción cuando hayas terminado (explicado más adelante). Es especialmente importante que el texto permanezca allí mientras el código sheet-i18n solo esté en Dev, de lo contrario, tu hoja dejará de funcionar en el sitio principal hasta que sheet-i18n llegue a main.Si quieres más ejemplos de cómo funcionan las traducciones i18n, echa un vistazo a la hoja de la5th Edition OGL de Roll20que ya ha sido formateada con el texto i18n.
Texto estándar
<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>
Observa cómo cada span en este bloque de código tiene el atributo data-i18n con una clave que hace referencia al texto contenido en el span. También observa que hay HTML dentro del span, esto está totalmente bien. El HTML será marcado por Crowdin para que sea fácil para ellos copiar y pegar el HTML en su traducción. Si bien el HTML está permitido dentro de la traducción, trata de mantenerlo lo más simple posible porque es probable que los traductores no sean expertos en código y puedan tener problemas para copiar el código si no es simple. Es muy importante que cada cadena única tenga una clave única; observa que, dado que este texto está todo en mayúsculas, estoy usando un -u al final de cada clave. Esto se debe a que estas palabras aparecen más adelante en la hoja, pero están en mayúsculas.
Hay casos en los que querrás agregar contexto adicional a la clave que el traductor podría no obtener solo del texto, como con las abreviaturas.
<div class="row">
<span data-i18n="components:-u">COMPONENTES:</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>
Observa que las claves para los textos V, S y M deletrean exactamente a qué se refiere el único carácter. De lo contrario, el traductor no tendría idea de qué significa "V". De esta manera, el traductor puede cambiar V por la primera letra de lo que sea que signifique "Verbal" en su idioma si es diferente.
Texto de Atributo de Elemento
Muchas veces tendrás texto dentro de un atributo de elemento que necesita ser traducido, por ejemplo, marcadores de posición y títulos. Para reemplazar el texto en estos atributos, puedes usar "data-i18n-[attribute]='key'" para indicarle al analizador que la clave que estás proporcionando debe usarse para reemplazar el texto dentro del atributo dado. Por ejemplo, si estás reemplazando el texto en un atributo de marcador de posición:
<input name="attr_weapon_name" data-i18n-placeholder="weapon-name" placeholder="Hand Axe" />
Los atributos admitidos son: título, alt, aria-label, label, placeholder
Reemplazo de variables
Un caso especial es si tienes texto dentro de una cadena que no deseas traducir, puedes usar variables especiales y el atributo "data-i18n-vars".
<span data-i18n="var-test" data-i18n-vars="will not|be translated">Este texto {{0}} {{1}}</span>
El texto dentro del atributo data-i18n-vars se dividirá por el carácter "|" y se colocará en una matriz. Luego puedes hacer referencia a esa matriz usando {{[index]}} para referenciar la fila específica de la matriz.
Reemplazo de clave dinámica
Hay algunas situaciones en las que necesitas obtener una traducción basada en una clave cambiante. Por ejemplo, tienes un menú desplegable de "selección de clase" donde el usuario puede seleccionar su clase. Los nombres de clase que aparecen en esta lista se pueden traducir utilizando las herramientas normales. Pero no puedes traducir el valor dentro de la opción en el cuadro de selección. (hacemos esto para que si cambias de idioma, los datos de la hoja no tengan que ser traducidos. El sistema de traducción se mantiene puramente en el front-end y no en la capa de datos) En su lugar, donde quieras mostrar este nombre de clase, traducido, marcas el span con el atributo "data-i18n-dynamic". Esto le dirá al analizador que use el valor que normalmente aparecería en el span como la clave para obtener una traducción.
// Esta parte no tiene que cambiar <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">Opciones de Clase</span> (<span name="attr_class" data-i18n-dynamic></span>)
{ "Barbarian":"Bárbaro", "Bard":"Bardo", "Cleric":"Clerigo", "Druid":"Druida" }
Ahora, con el código anterior, cuando seleccionas "Bárbaro" en el cuadro de selección, se guardará "Barbarian" en el atributo attr_class. Pero cuando la hoja se actualiza y el span con name="attr_class" normalmente se llenaría con "Barbarian", en su lugar se utilizará "Barbarian" como clave para hacer referencia al JSON de traducción y mostrar "Bárbaro" en su lugar.
Consulta de tiradas
El texto en las consultas de tiradas no se puede traducir en el HTML de la hoja de personaje, sin embargo, utilizandoScripts de Trabajo de Hojay atributos, el texto se puede traducir en JavaScript y sustituirse en la consulta de tirada.
<script type="text/worker">
on("sheet:opened", function(eventInfo){
setAttrs({
bonusmacro: getTranslationByKey("ask-bonus")
});
});
</script>
<span style="display: none" data-i18n="ask-bonus">¿Cuál es tu bonificación?</span> <button type='roll' value='[[d20 + ?{@{bonusmacro}|0}]]' ></button>
La etiqueta <span> no aparecerá, pero hará que la clave "ask-bonus" se incluya en el archivo de traducción generado. El script creará un atributo llamado "bonusmacro" con el valor "¿Cuál es tu bonificación?", y el botón de lanzamiento usará ese valor para enviar el comando, "[[d20 + ?{¿Cuál es tu bonificación?|0}]]". Si la hoja se abre mientras otro archivo de traducción está activo, establecerá el atributo con el nuevo valor traducido para "bonusmacro". Esta técnica se puede utilizar para sustituir claves individuales, o se puede utilizar un solo atributo para almacenar una consulta compleja, con el Script del Trabajador de la Hoja insertando claves traducidas en el código de consulta según sea necesario.
<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ás lanzando con Ventaja o Desventaja?</span>
<span style="display: none" data-i18n="neither">Ninguna</span>
<span style="display: none" data-i18n="advantage">Ventaja</span>
<span style="display: none" data-i18n="withadvantage">con Ventaja</span>
<span style="display: none" data-i18n="disadvantage">Desventaja</span>
<span style="display: none" data-i18n="withdisadvantage">con Desventaja</span>
<button type='roll' value='[[@{rollquery}]]' ></button>
Este ejemplo creará la siguiente tirada usando el archivo de traducción predeterminado
[[?{¿Estás lanzando con Ventaja o Desventaja?|Ninguna,d20|Ventaja,2d20kh1[con Ventaja]|Desventaja,2d20kl1[con Desventaja]}]]
Plantillas de Tirada
El HTML estático dentro de la definición de la plantilla de tirada de la hoja puede usar todas las herramientas anteriores, incluidas las Claves Dinámicas. Si está en la definición de la plantilla de tirada de la hoja, el código como {{strength-key}} dará el valor traducido de lo que sea el valor de {{strength-key}}. Si desea enviar valores traducidos dinámicamente dentro de una función de tirada, use la siguiente herramienta.
Dentro de una función de rollo, utilizando una plantilla de rollo, puedes envolver cualquier texto en "^{ [key] }" para denotar el texto como una clave de traducción. Este texto será reemplazado por la versión traducida asociada con esa clave. Este paso ocurre después de que los valores de la hoja de personaje se intercambian, por lo que "^{ @{ability_key} }" donde ability_key = STRENGTH se analizará como "^{STRENGTH}" y mostrará cualquier valor de traducción que tengas para "STRENGTH". Esto también funciona en la clave, para los pares clave/valor utilizados en la función allprops(). Por ejemplo: "{{^{TEXT}=@{content} }}" tendrá el valor de traducción para "TEXT" como "{{key}}" dentro de la función allprops().
Orden de la lista
Si tienes una lista de elementos en un contenedor, que en inglés está ordenada alfabéticamente, y quieres poder cambiar el orden en otros idiomas, puedes usar esta herramienta. La reordenación respetará todo el formato actual de la lista, por lo que incluso si tu lista abarca varios subcontenedores, todo debería mantenerse formateado de la misma manera.
Identifica el contenedor. Todos los elementos de la lista deben estar dentro del contenedor, de lo contrario se ignorarán:
data-i18n-list="list-key"
Identifique los elementos individuales de la lista. Estos elementos pueden ser un bloque de HTML. Cuando se reordenen, se moverá todo el bloque.
data-i18n-list-item="item-key"
(Opcional) Se supone que el orden "inicial" de la lista se lee de arriba abajo en el HTML. Si su orden es diferente, puede numerar manualmente los artículos (empezando por el 1) para establecer el orden.
data-i18n-list-item-num="1"
(Especial) Esta no es una etiqueta que usted "utilizará", es una etiqueta que se creará si hay un error con su formato. Si se produce un error con su código de orden de lista, se ignorará la lista y se creará esta etiqueta en el elemento contenedor de la lista con el error. Si no ve que la lista se reordena como espera, compruebe si hay algún error en el elemento padre.
data-i18n-error="Mensaje de error"
Añada la clave a su archivo de traducción. Contendrá una lista delimitada por comas de todas las claves de los artículos, en el idioma de la traducción original. Reordenar estas claves reordenará los elementos. La clave de la lista se puede utilizar para varias listas, si todos los elementos que se están ordenando son los "mismos" elementos. El HTML no tiene que ser el mismo, solo las palabras que se están ordenando. Por ejemplo, una lista de "Habilidades" en D&D puede aparecer en varios lugares en una hoja con un HTML totalmente diferente, pero todos pueden usar la misma clave de lista. Usaré el código de ejemplo a continuación para generar mi clave de lista.
"skills-list":"acrobatics,arcana,sleight-of-hand,survival"
Para reordenar esta lista para el idioma checo, el valor de la clave de la lista se vería así:
"skills-list":"acrobatics,sleight-of-hand,arcana,survival"
Ejemplo:
<div data-i18n-list="skills-list"> // Etiqueta tu contenedor de lista y apunta al key que se utilizará para establecer el orden
<div> // nota que los elementos están en un subcontenedor, estas columnas seguirán existiendo después de que ocurra la reordenación
<div data-i18n-list-item="acrobatics"> // Etiqueta tus elementos de lista, estos son los bloques que se reordenarán
<span data-i18n="acrobatics-u">ACROBACIAS</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">DESTREZA DE MANOS</span>
<input type="text" name="attr_npc_sleight_of_hand" placeholder="0">
</div>
<div data-i18n-list-item="survival">
<span data-i18n="survival-u">SUPERVIVENCIA</span>
<input type="text" name="attr_npc_survival" placeholder="0">
</div>
</div>
</div>
El mismo ejemplo, en lugar de tener la lista en columnas y luego en filas, vamos a tener la lista en filas y luego en columnas:
<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>
Paso Dos, Generando el Archivo de Traducción
Una vez que hayas formateado tu hoja siguiendo las instrucciones anteriores, puedes crear fácilmente tu archivo de traducción. Después de cargar tu hoja en el editor,ve al juego,y abre las Herramientas para Desarrolladores de tu navegador y ve a la consola. En la parte inferior de la consola, donde puedes ingresar código, escribe "i18nOutput". (probablemente comenzará a autocompletar una vez que comiences a escribir) Presiona enter para obtener este objeto, y mostrará una cadena JSON que contiene todas las claves que has utilizado con el texto correspondiente del elemento/espacio reservado. Luego podrás copiar este texto en tu formato JSON favorito (opcional, pero recomendado) y luego en la pestaña "Traducción" en el área de Configuración Personalizada de la Hoja de Juego.
Si deseas crear manualmente el archivo translation.json, puedes utilizar el siguiente formato:
{
"key": "string",
"key-2": "Otra cadena."}
}
Una vez que tengas tu hoja formateada y el archivo de traducción JSON guardado para tu hoja personalizada, debería verse exactamente como antes de traducir todo, siempre y cuando todo se haya hecho correctamente.
Si ves algún texto en rojo como [translation-key], esta es una clave que le estás indicando al sistema que use, pero no has ingresado en el archivo de traducción JSON. Si utilizas el JSON generado por el sistema, no deberías ver ninguno de estos.
Una vez que tengas un archivo de traducción funcional, puedes subirlo junto con el resto del código de tu hoja a la raíz de la carpeta de tu hoja de personaje como "translation.json". Esto será recogido automáticamente por nuestro sistema y subido a Crowdin, donde podrá ser traducido.
Cambiar tu traducción
Si deseas cambiar tu traducción después de que ya haya sido generada, puedes editar tu archivo translation.json y los cambios se propagarán a los archivos de idioma la próxima vez que se actualicen las traducciones. Sin embargo, ciertos cambios no harán que los valores de traducción se sobrescriban, incluso si los valores aún no han sido traducidos. En otras palabras, a veces los cambios en el translation.json no se mostrarán en tu hoja.
Los cambios que no desencadenarán una actualización incluyen cambios en los que la única diferencia es el espacio en blanco o los caracteres especiales, y cambios que solo eliminan caracteres sin cambiar o agregar nuevos caracteres.
Enviar tus cambios a Roll20
VerGuía para principiantes de GitHub
Ver también
- ACSI - Internationalizador Automático de Hojas de Personaje. Una herramienta de Linux que puede ahorrar algo de tiempo al insertar y crear las etiquetas de idioma.