CSS display issue on mobile

AnkiDroid (Android) Help
1

I’ve made a custom flashcard template that displays ruby text above Chinese characters.
And it works fine on PC with text displayed properly:

image
image1552×522 37 KB

However, on my phone, the ruby text is displayed next to the character:

Screenshot_20250508_224341
Screenshot_20250508_2243411096×1300 171 KB

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=""&lt;ruby&gt;上&lt;rt&gt;sh&#xE0;ng&lt;&#x2F;rt&gt;&lt;&#x2F;ruby&gt;&lt;ruby&gt;述&lt;rt&gt;sh&#xF9;&lt;&#x2F;rt&gt;&lt;&#x2F;ruby&gt;"" 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>"
2

Have you considered using the built-in ruby character functionality? Learn more about that here.

Also, if you want to inspect the card, there is a way to do that on mobile.

2 Likes
3

Update for anyone finding this in the future:

The browser is still applying inline-block to your <rt> even though you’ve added style="display: block !important;" because of the special rendering mode for ruby annotations, where <rt> elements are assigned the internal display type ruby-text by the browser. This gets interpreted as inline-block, and overrides even !important rules in many cases.

Basically, under the hood, Anki is still implementing adding <ruby> tags with <rb> and <rt> child elements to the text, so the browser will force its damned stylesheet overriding anything you add.

The only solution seems to be using your own custom html tags <MyRuby> and just implement it however you like.

Hope this helps!

And again, thank you to @SuhasK for the suggestions, I’ve learned so much using them!

1 Like