I’ve made a custom flashcard template that displays ruby text above Chinese characters.
And it works fine on PC with text displayed properly:
However, on my phone, the ruby text is displayed next to the character:
This is made even more frustrating as I cannot even inspect element on my phone to see exactly what is going on.
Does anyone have any idea what can cause this behavior?
Thank you!
Flashcard code
#separator:tab
#html:true
"<br>
<div class=""HanziCloze""><ruby>除<rt>chú</rt></ruby><span class=""cloze"" data-cloze=""<ruby>上<rt>shàng</rt></ruby><ruby>述<rt>shù</rt></ruby>"" data-ordinal=""1"">[...]</span><ruby>提<rt>tí</rt></ruby><ruby>到<rt>dào</rt></ruby><ruby>的<rt>de</rt></ruby><ruby>企<rt>qǐ</rt></ruby><ruby>业<rt>yè</rt></ruby>,<ruby>还<rt>hái</rt></ruby><ruby>有<rt>yǒu</rt></ruby><ruby>很<rt>hěn</rt></ruby><ruby>多<rt>duō</rt></ruby><ruby>行<rt>háng</rt></ruby><ruby>业<rt>yè</rt></ruby><ruby>需<rt>xū</rt></ruby><ruby>要<rt>yào</rt></ruby><ruby>智<rt>zhì</rt></ruby><ruby>慧<rt>huì</rt></ruby><ruby>物<rt>wù</rt></ruby><ruby>流<rt>liú</rt></ruby>。</div>
<hr>
<div class=""PinyinCloze""></div>
<div style='font-family: ""Arial""; font-size: 20px;'>Other than the companies mentioned above, there are still many industries that need intelligent logistics.</div>
<button id=""toggleRuby"">Show pinyin</button>
<script>
// Show Pinyin button
(function() {
const toggleRubyButton = document.getElementById('toggleRuby');
const rtElements = document.querySelectorAll('rt');
var rubyVisible = false;
// Apply compact layout initially
document.body.classList.add('compact-ruby');
// Find all ruby elements and add compact class
const rubyElements = document.querySelectorAll('ruby');
rubyElements.forEach(ruby => {
ruby.classList.add('compact');
});
toggleRubyButton.style.visibility = rtElements.length > 0 ? ""visible"" : ""hidden"";
toggleRubyButton.addEventListener('click', function() {
rtElements.forEach(rt => {
rt.style.visibility = rubyVisible ? 'hidden' : 'visible';
});
rubyVisible = !rubyVisible;
// Toggle compact class on all ruby elements
rubyElements.forEach(ruby => {
if (rubyVisible) {
ruby.classList.remove('compact');
} else {
// Don't add compact to cloze elements
if (!ruby.closest('.cloze')) {
ruby.classList.add('compact');
}
}
});
// Toggle global class
if (rubyVisible) {
document.body.classList.remove('compact-ruby');
} else {
document.body.classList.add('compact-ruby');
}
toggleRubyButton.textContent = rubyVisible ? 'Hide pinyin' : 'Show pinyin';
});
})();
// Toggle pinyin on double click
(function() {
const rubyContainers = document.querySelectorAll('ruby');
rubyContainers.forEach(ruby => {
ruby.addEventListener('dblclick', function() {
const rt = this.querySelector('rt');
if (rt) {
const newVisibility = rt.style.visibility === 'visible' ? 'hidden' : 'visible';
rt.style.visibility = newVisibility;
// Manage spacing for this specific ruby element
if (newVisibility === 'visible') {
this.classList.remove('compact');
} else {
this.classList.add('compact');
}
}
});
// Add compact class initially
ruby.classList.add('compact');
});
})();
</script>" "<br>
<div class=""HanziCloze""><ruby>除<rt>chú</rt></ruby><span class=""cloze"" data-ordinal=""1""><ruby>上<rt>shàng</rt></ruby><ruby>述<rt>shù</rt></ruby></span><ruby>提<rt>tí</rt></ruby><ruby>到<rt>dào</rt></ruby><ruby>的<rt>de</rt></ruby><ruby>企<rt>qǐ</rt></ruby><ruby>业<rt>yè</rt></ruby>,<ruby>还<rt>hái</rt></ruby><ruby>有<rt>yǒu</rt></ruby><ruby>很<rt>hěn</rt></ruby><ruby>多<rt>duō</rt></ruby><ruby>行<rt>háng</rt></ruby><ruby>业<rt>yè</rt></ruby><ruby>需<rt>xū</rt></ruby><ruby>要<rt>yào</rt></ruby><ruby>智<rt>zhì</rt></ruby><ruby>慧<rt>huì</rt></ruby><ruby>物<rt>wù</rt></ruby><ruby>流<rt>liú</rt></ruby>。</div>
<hr>
<div class=""PinyinCloze"" id=""ClozeBack""></div>
<div style='font-family: ""Arial""; font-size: 20px;'>Other than the companies mentioned above, there are still many industries that need intelligent logistics.</div>
<button id=""toggleRuby"">Show pinyin</button>
<script>
// Show Pinyin button
(function() {
const toggleRubyButton = document.getElementById('toggleRuby');
const rtElements = document.querySelectorAll('rt');
var rubyVisible = false;
// Apply compact layout initially
document.body.classList.add('compact-ruby');
// Find all ruby elements and add compact class
const rubyElements = document.querySelectorAll('ruby');
rubyElements.forEach(ruby => {
ruby.classList.add('compact');
});
// Find and show only the rt elements within cloze spans
const clozeSpans = document.querySelectorAll('.cloze');
clozeSpans.forEach(cloze => {
const clozeRubyRt = cloze.querySelectorAll('rt');
clozeRubyRt.forEach(rt => {
rt.style.visibility = 'visible';
rt.style.display = 'block';
});
});
toggleRubyButton.style.visibility = rtElements.length > 0 ? ""visible"" : ""hidden"";
toggleRubyButton.addEventListener('click', function() {
rtElements.forEach(rt => {
rt.style.visibility = rubyVisible ? 'hidden' : 'visible';
});
rubyVisible = !rubyVisible;
// Toggle compact class on all ruby elements
rubyElements.forEach(ruby => {
if (rubyVisible) {
// Remove compact from all when showing all pinyin
ruby.classList.remove('compact');
} else {
// When hiding pinyin, add compact to non-cloze elements
const isInCloze = ruby.closest('.cloze') !== null;
if (!isInCloze) {
ruby.classList.add('compact');
}
}
});
// Toggle global class
if (rubyVisible) {
document.body.classList.remove('compact-ruby');
} else {
document.body.classList.add('compact-ruby');
}
toggleRubyButton.textContent = rubyVisible ? 'Hide pinyin' : 'Show pinyin';
});
})();
// Toggle pinyin on double click
(function() {
const rubyContainers = document.querySelectorAll('ruby');
rubyContainers.forEach(ruby => {
ruby.addEventListener('dblclick', function() {
const rt = this.querySelector('rt');
if (rt) {
const newVisibility = rt.style.visibility === 'visible' ? 'hidden' : 'visible';
rt.style.visibility = newVisibility;
// Manage spacing for this specific ruby element
if (newVisibility === 'visible') {
this.classList.remove('compact');
} else {
this.classList.add('compact');
}
}
});
});
})();
</script>"