# CSS display issue on mobile

**URL:** <https://forums.ankiweb.net/t/css-display-issue-on-mobile/60577>\
**Category:** Help\
**Created:** [May 8, 2025, 8:16pm UTC](https://forums.ankiweb.net/t/css-display-issue-on-mobile/60577 "2025-05-08T20:16:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![emanuel19861](https://avatars.discourse-cdn.com/v4/letter/e/e5b9ba/32.png) [@emanuel19861](https://forums.ankiweb.net/u/emanuel19861)\
**Post date:** [May 8, 2025, 8:16pm UTC](https://forums.ankiweb.net/t/css-display-issue-on-mobile/60577/1 "2025-05-08T20:16:18Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/d/2/d2f2631e72d456f6c36693f3921a672db32d6b9a.png)

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

 ![Screenshot_20250508_224341](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/3X/3/4/349cf409acb56ba55c825c1af35059c42082c526.jpeg)

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**
>
> ```auto
> #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>"
> 
> ```

---

<div class="post-metadata">

**Author:** ![SuhasK](https://avatars.discourse-cdn.com/v4/letter/s/bbe5ce/32.png) [@SuhasK](https://forums.ankiweb.net/u/SuhasK)\
**Post date:** [May 9, 2025, 5:26am UTC](https://forums.ankiweb.net/t/css-display-issue-on-mobile/60577/2 "2025-05-09T05:26:01Z")

</div>

Have you considered using the built-in ruby character functionality? Learn more about that [here](https://docs.ankiweb.net/templates/fields.html#ruby-characters).

Also, if you want to inspect the card, there is [a way to do that](https://github.com/ankidroid/Anki-Android/wiki/Development-Guide#html-javascript-inspection) on mobile.

---

<div class="post-metadata">

**Author:** ![emanuel19861](https://avatars.discourse-cdn.com/v4/letter/e/e5b9ba/32.png) [@emanuel19861](https://forums.ankiweb.net/u/emanuel19861)\
**Post date:** [May 18, 2025, 7:56am UTC](https://forums.ankiweb.net/t/css-display-issue-on-mobile/60577/3 "2025-05-18T07:56:28Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [June 17, 2025, 7:56am UTC](https://forums.ankiweb.net/t/css-display-issue-on-mobile/60577/4 "2025-06-17T07:56:37Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.