No line breaks in furigana on AnkiWeb and AnkiDroid

Anki Help
30

I fixed my setupCard() function so it now also works in browsers (tested with Chrome and Firefox on Linux). The issue was that jQuery is not available in browsers. And loading it as explained here did not work either.

So now I am converting the <br> elements by \n before splitting them:

			var textWithLineBreaks = rt.innerHTML.replace(/<br\s*\/?>/gi, '\n');
			var arr = textWithLineBreaks.split('\n');

This is the complete recognition front template:

<div class="jp" id="fldExpression">{{masu-form}}</div>
<br><br>

{{#Sample}}
<div class="jp hint" id="fldSample">{{Sample}}</div>
{{/Sample}}
<br><br>

<div class="jp hint" id="fldReading" style="display: none;">{{furigana:masu-reading}}</div>
<br><br>

<script language="javascript">

var ex = document.getElementById('fldExpression');
var rd = document.getElementById('fldReading');

function setupCard() {
	var rubyElements = rd.querySelectorAll('ruby');
	var newDiv = document.createElement('div');
	newDiv.className = 'jp';
	newDiv.appendChild(document.createElement('ruby'));
	var parentRuby = newDiv.children[0];

	rubyElements.forEach((ruby) => {
		var rb = ruby.querySelector('rb');
		var rtElements = ruby.querySelectorAll('rt');
		var newRuby = document.createElement('ruby');
		newRuby.appendChild(document.createTextNode(rb.textContent));
		parentRuby.appendChild(newRuby);

		rtElements.forEach((rt) => {
			var textWithLineBreaks = rt.innerHTML.replace(/<br\s*\/?>/gi, '\n');
			var arr = textWithLineBreaks.split('\n');
			var newRt = document.createElement('rt');
			newRt.appendChild(document.createTextNode(arr[0]));
			newRuby.appendChild(newRt);

			if (arr[1]) {
				var newRt = document.createElement('rt');
				newRt.appendChild(document.createTextNode(arr[1]));
				parentRuby.appendChild(newRt);
				parentRuby.appendChild(document.createElement('rb'));
			}
		});
	});

	rd.innerHTML = newDiv.innerHTML	+ '<br>';
}

var isSame = ex.innerText.valueOf() === rd.innerText.valueOf();

if(!isSame) {
		window.setTimeout(function() {rd.style.display = 'block';},5000);
}

window.setTimeout(setupCard, 1000);

</script>