Japanese vertical text editor

You already had some of that functionality implemented. I extended my script to include the font-size too and removed it from your own script.

You also had some illegal values for the alignment. The ones in bold are not alignment-values:
[justify,left,center,right,top,bottom,vertical horizontal];
(you also didnt separate vertical and horizontal with quotes)

For my method to work, you need to set something up like this within your Styling section:

Heres a demo of my rework:

Epilepsy warning, don't click if you hate quick color flashes

The font-size, alignment and writing-mode randomization should only be done once (on the front) in my opinion. So you should only include my script in the Front template. You could use Anki Persistence to share the random colors between front- and backside as well.

Is this what you wanted?

Click to see reworked template<div id="yomis" hidden> <p> <div class="randomJapanese shuffle colorize">{{Expression}}</div> {{#Traditional}} <div class="randomTraditionalChinese shuffle colorize">{{Traditional}}</div> {{/Traditional}} {{#Simplified}} <div class="randomSimplifiedChinese shuffle colorize">{{Simplified}}</div> {{/Simplified}} <div id="container"></div> </p> </div> <script> function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } function setRandomBackgroundColor() { const nightMode = document.body.classList.contains("night_mode"); document.body.style.background = randomHsl(!nightMode); } function randomHsl(lightColor) { const hue = (Math.random() * 361) | 0; const saturation = (50 + (Math.random() * 50)) | 0; let lightness = (Math.random() * 35) | 0; if (lightColor) { lightness += 65; } return `hsl(${hue}, ${saturation}%, ${lightness}%)`; } function colorizeEachChar(element) { const text = element.textContent; const nightMode = document.body.classList.contains("night_mode"); const resultArray = []; for (const char of text) { if (/\S/.test(char)) { resultArray.push( `<span style="color: ${randomHsl(nightMode)};">${char}</span>` ); } else { resultArray.push(" "); } } element.innerHTML = resultArray.join(""); } setTimeout(() => { // Randomize the color of each character document.querySelectorAll(".colorize").forEach(colorizeEachChar); // Randomize the order of the elements with the "shuffle" class const fields = [...document.querySelectorAll(".shuffle")]; shuffleArray(fields); const container = document.getElementById("container"); fields.forEach((fld, index) => { if (index !== 0) { container.appendChild(document.createElement("br")); } container.appendChild(fld); }); // Randomize the background color setRandomBackgroundColor(); // Un-hide the main container yomis.hidden = false; }, 0); </script> <script> var writingModes = ["horizontal-tb", "vertical-lr"]; var alignments = ["justify","left","right","center"]; var randomFontSize; var randomWritingMode; var randomAlignment; if(globalThis.onUpdateHook) { randomFontSize = Math.floor(Math.random() * 20) + Math.floor(Math.random() * 20)+ Math.floor(Math.random() * 20) + 10; randomWritingMode = writingModes[Math.floor(Math.random() * writingModes.length)]; randomAlignment = alignments[Math.floor(Math.random() * alignments.length)]; document.documentElement.style.setProperty('--random-font-size', randomFontSize + 'px'); document.documentElement.style.setProperty('--random-writing-mode', randomWritingMode); document.documentElement.style.setProperty('--random-alignment', randomAlignment); } </script>