CSS rendering problem with AnkiMobile (Unlike the Desktop app) : visibility:collapse;

AnkiMobile (iPhone/iPad)
1

I have a problem with the CSS rendering of my cards with the IOS application. I use media queries so that my cards adapt to different screens, whether or not displaying certain elements.
To do this, I use the visibility: collapse property. This works well with the Anki for Mac application, but does not give the desired rendering on iPhone. I apply this property to a table and according to W3C:
“This value removes a row or column. The space taken up by the row or column will be available for other content.”

Here is for example my HTML code:

<table>
<tr class = noscreen>
<td> {{Verso1}} </td>
</tr>
<tr>
<td> {{Verso2}} </td>
</tr>
</table>

and the CSS code:
.pasalecran {
visibility: collapse;
}

The problem is that in the iOS app, the value “collapse” is interpreted as the value “hidden”. This means that the content {{Verso1}} is not displayed BUT the space occupied by {{Verso1}} always takes up space.

Here’s what I get with the Mac app:

http://pcsi2.net/Anki/AnkiForMac.png

and with the AnkiMobile app:

AnkiMobile
AnkiMobile1088×484 9.25 KB

Thank you very much (in advance) for your advice. Is this a known problem? I specify that I do not wish to use display: none; because the {{Verso1}} content would come out of the stream, which would cause other problems when changing the orientation of a smartphone for example.

2 
{{#Verso1}}
<tr class = noscreen>
<td> {{Verso1}} </td>
</tr>
{{/Verso1}}

this will make

<tr class = noscreen>
<td> {{Verso1}} </td>
</tr>

not show at all when {{Verso1}} is empty.

Read more - Anki manual

3

Thank you for your reply. I understand the interesting technique, but here, {{Verso1}} is not empty and {{Verso2}} is not empty because I want to display {{Verso1}} or {{Verso2}} depending on the size of the screen.
So I don’t think I can use the example you give.

My code works very well with the Desktop application for Mac (I will test under windows) but not with AnkiMobile.

4

if by different screens you mean “mobile” and “desktop” you can use .mobile class instead of what you’re using.

.something {font-size: 24px}
.mobile .something {font-size: 12px}

and use

<div class="something">{{Field}}</div>

on your template.

in this way, anki will use {font-size: 12px} on mobile, and font-size: 24px} on other platforms

image
image1920×1080 115 KB

image
image818×634 14.4 KB

image
image1920×1080 132 KB

image
image1920×1076 134 KB

image
image622×1280 66.8 KB

2 Likes
5

Thanks for your example. I will use it in my explanations I did not know the class. Mobile, but it’s interesting, but I don’t think my problem is there because I know how to manage different screens with media queries.

Here is a card and the HTML and CSS code of the type I used. I reproduced your example.
Click on Capture-1.png
Click on Capture-2.png
Here’s what I get with the MAC app :

Click on Capture-3.png (I can just add 2 links and 1 image)

I don’t want to use the value “hidden” because it produces unwanted space.
This is why I use the value “collapse” applied to a row in an array and which allows me to free up the space used by the row whose property “visibility” has the value “collapse”.

Click on Capture-4.png

Here’s what I get, with the Mac app:
Click on Capture-5.png

and with AnkiMobile:
Click on Capture-6.jpeg

This is what is expected. However, I would like to remove a line from this table with AnkiMobile but that line remains visible with the Mac application.

So I changed the CSS code:
Click on Capture-7.png

I get this with the MAC app, this is what I want:
Click on Capture-8.png

But (bad surprise) with AnkiMobile:

Click on Capture-9.jpeg

My problem is that the CSS code “visibility: collapse;” is not interpreted correctly (I think) with AnkiMobile while it is interpreted correctly with the Mac application.

Thank you for your example and of course your time.

6

AnkiMobile uses Apple’s WebKit to render cards, and it appears it does not support the functionality you desire:

https://caniuse.com/#feat=mdn-css_properties_visibility_collapse

Curiously that page seems to indicate Chrome behaves the same way, so I’m surprised it works in the computer version. Perhaps you could accomplish the same thing by using flexbox or a grid instead?

7

Thanks a lot for your answer ! I understood the problem: webkit.

In fact, I did some tests and my code works under Firefox; Chrome and even Opera, but Safari misinterprets visibility: collpase;

Pity. This will force me to make clever calculations on the space to be removed depending on the size of the font …

Thank you again for your comment.

1 Like