A Folha de Personagem i18n, ou internacionalização, permitir-lhe-á desenhar a sua folha de personagemde tal forma que a nossa comunidade de tradutores poderá traduzir a sua folha para a sua língua, tornando essa língua disponível para qualquer pessoa no Roll20. Se sua ficha foi traduzida para outro idioma, digamos francês, e alguém que usa sua ficha tem o idioma da conta configurado para francês, sua ficha será exibida com os textos traduzidos para esse usuário.
Projetando sua ficha
Configurar a sua folhapara poder responder ao serviço i18n é muito simples, mas pode demorar algum tempo, especialmente se estiver a trabalhar com uma folha pré-existente de grandes dimensões. Existem 2 etapas que você deve seguir para permitir que sua ficha seja traduzida. Primeiro, marque os elementos que você deseja conter o texto traduzido. Segundo, crie um arquivo de traduções que contenha todas as strings que serão traduzidas. Este arquivo será alimentado em nosso serviço de tradução, Crowdin, onde nossos voluntários podem traduzir string por string para outro idioma. Isso gerará o mesmo arquivo de tradução em todos os outros idiomas, que usaremos quando alguém tiver esse idioma selecionado no Roll20.
Como criar um único design que possa se adequar a vários tamanhos de texto traduzido pode ser difícil, adicionamos uma classe ao elemento pai "charsheet" para permitir que você tenha CSS separado para idiomas individuais. A classe é "lang-[código de idioma de 2 caracteres]", portanto, se o idioma for inglês "lang-en" ou francês "lang-fr". Isso permitirá que você, depois que sua ficha for traduzida, altere um estilo especificamente para um idioma, se o novo texto para esse idioma não se encaixar no seu design atual.
Primeira etapa, formatação da ficha
Você vai querer adicionar o atributo "data-i18n=[unique-key]" a cada elemento que contém texto que você deseja traduzir. Mantenha todo o texto que já está lá no elemento, porque ele pode ser usado para gerar o arquivo de tradução quando você terminar (explicado posteriormente). É especialmente importante que o texto permaneça lá enquanto o código sheet-i18n está apenas no Dev, caso contrário, sua planilha não funcionará mais no site principal até que o sheet-i18n seja implementado no principal. Se você quiser mais exemplos de como as traduções i18n funcionam, confira a5ª Edição OGL da Roll20 que já foi formatada com o texto i18n.
Texto Padrão
<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>
Observe como cada span neste bloco de código tem o atributo data-i18n com uma chave que referencia o texto contido no span. Observe também que há HTML dentro do span, isso é completamente normal. O HTML será marcado pelo Crowdin para que seja fácil para eles copiarem e colarem o HTML em sua tradução. Embora o HTML seja aceitável dentro da tradução, tente mantê-lo o mais simples possível, pois os tradutores provavelmente não têm conhecimento de programação e podem ter problemas ao copiar o código se não for simples. É muito importante que cada string única tenha uma chave única; observe que, como este texto está todo em maiúsculas, estou usando um -u no final de cada chave. Isso ocorre porque essas palavras aparecem mais tarde na planilha, mas estão em caixa alta.
Há casos em que você desejará adicionar contexto adicional à chave que o tradutor pode não obter apenas com o texto, como no caso de abreviações.
<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>
Observe que as chaves para os textos V, S e M soletram exatamente para o que o único caractere está se referindo. Caso contrário, o tradutor não teria ideia do que "V" significa. Dessa forma, o tradutor pode mudar V para a primeira letra de qualquer "Verbal" em seu idioma, se for diferente.
Texto do Atributo do Elemento
Muitas vezes você terá texto dentro de um atributo de elemento que precisa ser traduzido, por exemplo, marcador de posição e títulos. Para substituir o texto nesses atributos, você pode usar "data-i18n-[attribute]='key'" para informar ao analisador que a chave que você está fornecendo deve ser usada para substituir o texto dentro do atributo fornecido. Por exemplo, se você estivesse substituindo o texto em um atributo de espaço reservado:
<input name="attr_weapon_name" data-i18n-placeholder="weapon-name" placeholder="Hand Axe" />
Os atributos suportados são: título, alt, aria-label, label, espaço reservado
Substituição de Variável
Um caso especial é se você tiver texto dentro de uma string que não deseja traduzir, você pode usar variáveis especiais e o atributo "data-i18n-vars".
<span data-i18n="var-test" data-i18n-vars="will not|be translated">Este texto {{0}} {{1}}</span>
O texto dentro do atributo data-i18n-vars será dividido pelo caractere "|" e colocado em um array. Você pode então referenciar esse array usando {{[index]}} para referenciar a linha específica do array.
Substituição de Chave Dinâmica
Existem algumas situações em que você precisa buscar uma tradução com base em uma chave em mudança. Por exemplo, você tem um menu suspenso de "seleção de classe" onde o usuário pode selecionar sua classe. Os nomes de classe que aparecem nesta lista podem ser traduzidos usando as ferramentas normais. Mas, você não pode traduzir o valor dentro da opção na caixa de seleção. (fazemos isso para que, se você mudar de idioma, os dados da planilha não precisem ser traduzidos. O sistema de tradução permanece exclusivamente no front-end e não na camada de dados) Em vez disso, onde você deseja exibir esse nome de classe, traduzido, você marca o span com o atributo "data-i18n-dynamic". Isso dirá ao analisador para usar o valor que normalmente apareceria no span como a chave para buscar uma tradução.
// Essa parte não precisa mudar <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">Opções de Classe</span> (<span name="attr_class" data-i18n-dynamic></span>)
{ "Barbarian":"Bárbaro", "Bard":"Bardo", "Cleric":"Clerigo", "Druid":"Druida" }
Agora, com o código acima, quando você selecionar "Bárbaro" na caixa de seleção, "Barbarian" será salvo em attr_class. Mas quando a ficha é atualizada e o span com o nome="attr_class" normalmente seria preenchido com "Barbarian", em vez disso, "Barbarian" será usado como chave para referenciar o JSON de tradução e exibir "Bárbaro" no lugar.
Consultar ao Testar
O texto nas consultas de rolagem não pode ser traduzido no HTML da ficha do personagem, no entanto, usandoScripts do Worker da Fichae atributos, o texto pode ser traduzido em JavaScript e substituído na consulta de rolagem.
<script type="text/worker">
on("sheet:opened", function(eventInfo){
setAttrs({
bonusmacro: getTranslationByKey("ask-bonus")
});
});
</script>
<span style="display: none" data-i18n="ask-bonus">Qual é o seu bônus?</span> <button type='roll' value='[[d20 + ?{@{bonusmacro}|0}]]' ></button>
A tag <span> não aparecerá, mas fará com que a chave "ask-bonus" seja incluída no arquivo de tradução gerado. O script criará um atributo chamado "bonusmacro" com o valor "Qual é o seu bônus?", e o botão de rolagem usará esse valor para enviar o comando, "[[d20 + ?{Qual é o seu bônus?|0}]]". Se a planilha for aberta enquanto outro arquivo de tradução estiver ativo, ela definirá o atributo com o novo valor traduzido para "bonusmacro". Essa técnica pode ser usada para substituir chaves individuais, ou um único atributo pode ser usado para armazenar uma consulta complexa, com o Script do Trabalhador da Planilha inserindo chaves traduzidas no código da consulta conforme necessário.
<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">Você está rolando com Vantagem ou Desvantagem?</span>
<span style="display: none" data-i18n="neither">Nenhum</span>
<span style="display: none" data-i18n="advantage">Vantagem</span>
<span style="display: none" data-i18n="withadvantage">com Vantagem</span>
<span style="display: none" data-i18n="disadvantage">Desvantagem</span>
<span style="display: none" data-i18n="withdisadvantage">com Desvantagem</span>
<button type='roll' value='[[@{rollquery}]]' ></button>
Este exemplo criará a seguinte rolagem usando o arquivo de tradução padrão
[[?{Você está rolando com Vantagem ou Desvantagem?|Nenhum,d20|Vantagem,2d20kh1[com Vantagem]|Desvantagem,2d20kl1[com Desvantagem]}]]
Modelos de Rolagem
HTML estático dentro da definição do modelo de rolagem da ficha pode usar todas as ferramentas acima, incluindo Chaves Dinâmicas. Se estiver na definição do modelo de rolagem da ficha, o código como {{strength-key}} dará o valor traduzido de qualquer que seja o valor de {{strength-key}}. Se você deseja enviar valores traduzidos dinamicamente dentro de uma função de rolagem, use a ferramenta abaixo.
Dentro de uma função de rolagem, usando um modelo de rolagem, você pode envolver qualquer texto em "^{ [key] }" para indicar que o texto é uma chave de tradução. Este texto será substituído pela versão traduzida associada a essa chave. Essa etapa ocorre após a substituição dos valores da ficha do personagem, então "^{ @{ability_key} }" onde ability_key = STRENGTH será interpretado como "^{STRENGTH}" e exibirá o valor de tradução que você tem para "STRENGTH". Isso também funciona na chave, para os pares chave/valor usados na função allprops(). Por exemplo: "{{^{TEXT}=@{content} }}" terá o valor de tradução para "TEXT" como "{{key}}" dentro da função allprops().
Ordenação de Lista
Se você tiver uma lista de itens em um contêiner, que em inglês está ordenada alfabeticamente, e quiser poder alterar a ordem em outros idiomas, você pode usar essa ferramenta. A reordenação respeitará toda a formatação atual na lista, então mesmo que sua lista abranja vários subcontêineres, tudo deve permanecer formatado da mesma maneira.
Identifique o contêiner. Todos os itens da lista devem estar dentro do contêiner, caso contrário, serão ignorados:
data-i18n-list="list-key"
Identificar os itens individuais na lista. Esses itens podem ser um bloco de HTML. Quando eles são reordenados, todo o bloco será movido.
data-i18n-list-item="item-key"
(Opcional) A ordem "inicial" da lista é assumida como sendo lida de cima para baixo no HTML. Se a sua ordem for diferente, você pode numerar manualmente os itens (começando em 1) para definir a ordem.
data-i18n-list-item-num="1"
(Especial) Esta não é uma tag que você irá "usar", é uma tag que será criada se houver um erro com a formatação. Se houver um erro com o seu código de Ordem da Lista, a lista será ignorada e esta tag será criada no elemento do contêiner da lista com o erro. Se você não estiver vendo a lista sendo reordenada, como você espera, verifique o elemento pai em busca de um erro.
data-i18n-error="Mensagem de Erro"
Adicione a chave ao seu arquivo de tradução. Isso conterá uma lista separada por vírgulas de todas as chaves dos itens, no idioma da tradução original. Reordenar estas chaves irá reordenar os itens. A chave da lista pode ser usada para várias listas, se todos os itens sendo ordenados forem os "mesmos" itens. O HTML não precisa ser o mesmo, apenas as palavras que estão sendo ordenadas. Por exemplo, uma lista de "Habilidades" em D&D pode aparecer em vários lugares em uma planilha com HTML totalmente diferente, mas todas podem usar a mesma chave de lista. Vou usar o código de exemplo abaixo para gerar minha chave de lista.
"skills-list":"acrobatics,arcana,sleight-of-hand,survival"
Para reordenar esta lista para o idioma tcheco, o valor da chave da lista ficaria assim:
"skills-list":"acrobatics,sleight-of-hand,arcana,survival"
Exemplo:
<div data-i18n-list="skills-list"> // Rotule seu contêiner de lista e aponte para a chave que ele usará para definir a ordem
<div> // observe que os itens estão em um subcontêiner, essas colunas ainda existirão após a reordenação ocorrer
<div data-i18n-list-item="acrobatics"> // Rotule seus itens de lista, esses são os blocos que serão reordenados
<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">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">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>
O mesmo exemplo, em vez de fazer a lista descer pelas colunas e depois atravessar, vamos fazer a lista atravessar as colunas e depois descer:
<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>
Passo Dois, Gerando o Arquivo de Tradução
Depois de formatar sua folha, seguindo as instruções acima, você pode criar facilmente seu arquivo de tradução. Depois de carregar sua folha no editor, vá para o jogo, e abra as Ferramentas de Desenvolvedor para o seu navegador e vá para o console. Na parte inferior do console, onde você pode inserir código, digite "i18nOutput". (provavelmente começará a ser preenchido automaticamente assim que você começar a digitar) Pressione enter para recuperar esse objeto, e ele irá exibir uma string JSON contendo todas as chaves que você usou com o texto correspondente de dentro do elemento/placeholder. Você deve então conseguir copiar esse texto para o formato JSON de sua preferência (opcional, mas recomendado) e em seguida, para a guia "Tradução" na área de Configurações Personalizadas da Folha de Jogo.
Se você deseja criar o translation.json manualmente, você pode usar o seguinte formato:
{
"key": "string",
"key-2": "Outra string."
}
Depois de ter sua folha formatada e o arquivo de tradução JSON salvo para sua folha personalizada, ela deve parecer exatamente como antes de você traduzir tudo, desde que tudo tenha sido feito corretamente.
Se você ver algum texto vermelho como [translation-key], essa é uma chave que você está instruindo o sistema a usar, mas não inseriu no arquivo de tradução JSON. Se você usar o JSON gerado pelo sistema, você não deverá ver nenhum desses.
Depois de ter um arquivo de tradução funcional, você pode fazer o upload disso junto com o resto do código da sua ficha para a pasta raiz da sua ficha de personagem como "translation.json". Isso será automaticamente detectado pelo nosso sistema e enviado para o Crowdin, onde poderá ser traduzido.
Alterando sua tradução
Se você desejar alterar sua tradução depois que ela já tiver sido gerada, você pode editar seu arquivo translation.json e as alterações serão propagadas para os arquivos de idioma na próxima atualização das traduções. No entanto, certas alterações não farão com que os valores de tradução sejam sobrescritos, mesmo que os valores ainda não tenham sido traduzidos. Em outras palavras, às vezes as alterações no translation.json não aparecerão na sua ficha.
Alterações que não acionarão uma atualização incluem alterações onde a única diferença é espaço em branco ou caracteres especiais e alterações que apenas removem caracteres e não alteram ou adicionam novos caracteres.
Enviando suas alterações para o Roll20
ConsulteGuia para iniciantes em GitHub
Veja também
- ACSI - Automated Character Sheet Internationalizer. Uma ferramenta Linux que pode economizar algum tempo ao inserir e criar as tags de idioma.