At this point we know how to translate almost everything we need to. But translating things can create its own problems. Imagine you have a skill list like this, sorted alphabetically:
- Athletics
- Deduction
- Martial Arts
- Stamina
- Willpower
That list looks fine in English, but what happens when it’s translated? The individual words will be translated properly, but now the list sequence might look completely random. It makes sense in English, but probably not in many other languages after translation.
Luckily, there are ways to make sure groups of things are ordered after translation.
Ordering Lists In The HTML
If you have a list of something, anything, in your html, you must first put it in a container, and then identify each item to be order.
Let’s assume you have a list of the preceding skill name.s First, you need to add the i18n tags to show it can be translated.
<div>
<span data-i18n="athletics">Athletics</span>
<span data-i18n="deduction">Deduction</span>
<span data-i18n="martial-arts">Martial Arts</span>
<span data-i18n="stamina">Stamina</span>
<span data-i18n="willpower">Willpower</span>
</div>Code language: HTML, XML (xml)Then you need to put them all in a container (data-18n-list), and identify each item to be sorted.
<div data-i18n-list="skills-list">
<div data-i18n-list-item="athletics">
<span data-i18n="athletics">Athletics</span>
</div>
<div data-i18n-list-item="deduction">
<span data-i18n="deduction">Deduction</span>
</div>
<div data-i18n-list-item="martial-arts">
<span data-i18n="martial-arts">Martial Arts</span>
</div>
<div data-i18n-list-item="stamina">
<span data-i18n="stamina">Stamina</span>
</div>
<div data-i18n-list-item="willpower">
<span data-i18n="willpower">Willpower</span>
</div>
</div>Code language: HTML, XML (xml)This puts every item in its own list item. Each item has its own name for sorting purposes.
You could also do this:
<div data-i18n-list="skills-list">
<span data-i18n="athletics" data-i18n-list-item="athletics">Athletics</span>
<span data-i18n="deduction" data-i18n-list-item="deduction">Deduction</span>
<span data-i18n="martial-arts" data-i18n-list-item="martial-arts">Martial Arts</span>
<span data-i18n="stamina" data-i18n-list-item="stamina">Stamina</span>
<span data-i18n="willpower" data-i18n-list-item="willpower">Willpower</span>
</div>Code language: HTML, XML (xml)This second method is superior if the list contains only these spans. But if you are also include attribute values and another elements, you want the whole block of elements to be sorted. For example:
<div data-i18n-list-item="athletics">
<span data-i18n="athletics">Athletics</span>
<input type="number" name="attr_athletics" value="10">
</div>
Code language: HTML, XML (xml)Putting everything inside a list item div ensures they are all sorted as one item. You probably want to keep the attribute name and score together!
The Final Step, Easy To Forget
You need to insert a manual entry into the translation.json file to show the desired ordering. In this case, it would be:
"skill-list": "athletics,deduction,martial-arts,stamina,willpower"Code language: JSON / JSON with Comments (json)Give this key the name of the list container (the data-i18n-list), and then the names of the list-items in the order they are in, in your language.
Roll20 doesn’t recognise acrobatic order, it needs to be shown what order you want to use.
Custom Sorting
If you want to put your own custom sorting, use a data-i18n-list-item-num tag. Like so:
<div data-i18n-list="skills-list">
<div data-i18n-list-item="athletics" data-i18n-list-item-num="1">
<span data-i18n="athletics">Athletics</span>
</div>
<div data-i18n-list-item="deduction" data-i18n-list-item-num="3">
<span data-i18n="deduction">Deduction</span>
</div>
<div data-i18n-list-item="martial-arts" data-i18n-list-item-num="5">
<span data-i18n="martial-arts">Martial Arts</span>
</div>
<div data-i18n-list-item="stamina" data-i18n-list-item-num="2">
<span data-i18n="stamina">Stamina</span>
</div>
<div data-i18n-list-item="willpower" data-i18n-list-item-num="4">
<span data-i18n="willpower">Willpower</span>
</div>
</div>Code language: HTML, XML (xml)Sorting Over Multiple Containers
There is another thing you can do. You can split the ordered items over multiple containers, as long as the list container is the topmost container. For example:
<div data-i18n-list="skills-list">
<div class="left-column">
<div data-i18n-list-item="athletics" data-i18n-list-item-num="1">
<span data-i18n="athletics">Athletics</span>
</div>
<div data-i18n-list-item="deduction" data-i18n-list-item-num="3">
<span data-i18n="deduction">Deduction</span>
</div>
<div data-i18n-list-item="martial-arts" data-i18n-list-item-num="5">
<span data-i18n="martial-arts">Martial Arts</span>
</div>
</div>
<div class="right-column">
<div data-i18n-list-item="stamina" data-i18n-list-item-num="2">
<span data-i18n="stamina">Stamina</span>
</div>
<div data-i18n-list-item="willpower" data-i18n-list-item-num="4">
<span data-i18n="willpower">Willpower</span>
</div>
</div>
</div>Code language: HTML, XML (xml)Dropdown Lists
Selections from a list can create problems. Imagine you have a list of skills, and players are meant to select one of them, like so:
<select name="attr_skill">
<option data-i18n="athletics">Athletics</option>
<option data-i18n="deduction">Deduction</option>
<option data-i18n="martialarts">Martial Arts</option>
<option data-i18n="stamina">Stamina</option>
<option data-i18n="willpower">Willpower</option>
</select>
<span data-i18n="selected-skill-label">Selected Skill</span>
<span name="attr_skill" data-i18n-dynamic></span>Code language: HTML, XML (xml)Here we have a list of options, where the items in the select are translated. The player selects one, and the choice they selected appears in the span below. Or does it?
That’s why the data-i18n-dynamic tag is there. It ensures the translated value appears. You don’t give this tag a value – it is just there to show this value comes from a translated list option.
Sorting a Dropdown
You can combine this with the previous sorting rule, and sort values inside the dropdown.
<select name="attr_skill" data-i18n-list="skill-list">
<option data-i18n="athletics" data-i18n-list-item="athletics">Athletics</option>
<option data-i18n="deduction" data-i18n-list-item="deduction">Deduction</option>
<option data-i18n="martialarts" data-i18n-list-item="martial-arts">Martial Arts</option>
<option data-i18n="stamina" data-i18n-list-item="stamina">Stamina</option>
<option data-i18n="willpower" data-i18n-list-item="willpower">Willpower</option>
</select>
<span data-i18n="selected-skill-label">Selected Skill</span>
<span name="attr_skill" data-i18n-dynamic></span>Code language: HTML, XML (xml)Translating sheets makes your code much longer!
Datalists
In theory, you should be able to use the same techniques with the datalist items, but there might be a bug with thus. We’ll come back to them later, when we talk about using sheet workers.
More To Come
Surely that’s everyything, you ask? sadly no, there’s still more esoteric stuff involving translations. I think there are four more posts. But we’ve covered the bulk of what you need to know, now. Whew.
