AnkiDroid CSS

1,071 views
Skip to first unread message

Vix

unread,
Oct 31, 2012, 7:28:55 PM10/31/12
to anki-a...@googlegroups.com
In the most recent version of Anki (2.0.2) Damien set CSS to "Strict" (by adding a <!doctype html> tag to the base HTML on the reviewer). Causing CSS that worked prior for such things as horizontal and vertical card centering, to break. New alternatives were found but these new methods don't work on AnkiDroid. The prior centering methods worked on both Anki and Ankidroid, which leads me to believe to believe that Ankidroid is using a non-strict CSS rendering method (ie: poorly formed CSS is acceptable).

Anyone know a way to get this working on AnkiDroid? Or can we consider this a bug for lack of cross platform similarity?

Current styling for vert/horiz centering is:
html, body, .card, .tablecontent, #qa { height: 100% !important; }

.cellformat { vertical-align: center; }

.tablecontent { width: 100%; }

.hide { visibility: hidden; }


Front Temp:

<table class="tablecontent">

<tr><td class="cellformat">{{Front}}</td></tr>

</table>


Back Temp:

<table class="tablecontent">

<tr><td class="cellformat">

{{Front}}

<hr id=answer>

{{Back}}

</td></tr></table>


Houssam Salem

unread,
Nov 2, 2012, 4:44:17 AM11/2/12
to anki-a...@googlegroups.com
My decks' centering broke with the new Anki Deskop as well. I didn't think it was "non-compliant" :(. Oh well. I'll try finding a solution to this. In the worst case, we might just have to have two styling sections, one prefixed with .mobile and the other with :not(.mobile) (or whatever the correct way is). The main issue with this is that AnkiMobile also uses .mobile, where I suspect it will conflict and break something. Perhaps AnkiDroid should have its own class (or an additional class) like .android.

The Anki changelog says "Anki is now stricter about invalid CSS, to make it more consistent with the other clients.". If that's the case, then perhaps AnkiDroid should also be strict with CSS to follow suit.

Houssam Salem

unread,
Nov 3, 2012, 1:21:59 PM11/3/12
to anki-a...@googlegroups.com
Here's an almost bare-bones template that works on Anki and AnkiDroid. In AnkiWeb, it consumes the entire window, so it's not very usable there. I might fix that eventually.



On Thursday, November 1, 2012 10:28:55 AM UTC+11, Vix wrote:

ospalh

unread,
Nov 5, 2012, 4:58:44 AM11/5/12
to anki-a...@googlegroups.com


Am Donnerstag, 1. November 2012 00:28:55 UTC+1 schrieb Vix:
(...)

.cellformat { vertical-align: center; }

(...)
Oh, dear, i guess i am in part to blame for this whole story.
(The point is that AnkiWeb was using strict CSS parsing and i kind-of seem to have been the first to notice that something worked on  the desktop and not on AnkiWeb. (I had messed up my CSS, dropped "px" from font sizes.))

Anyway, the W3C CSS vallidator tells me:
"""

Sorry! We found the following errors (1)

URI : TextArea

3 .cellformat Value Error : vertical-align center is not a vertical-align value : center
"""

AFAIS the allowed value that comes closest is "vertical-align: middle;"




ospalh

unread,
Nov 5, 2012, 5:01:55 AM11/5/12
to anki-a...@googlegroups.com


Am Montag, 5. November 2012 10:58:44 UTC+1 schrieb ospalh:
(...) the W3C CSS vallidator t (...):

Try this link instead.

ospalh

unread,
Nov 5, 2012, 5:15:33 AM11/5/12
to anki-a...@googlegroups.com


Am Freitag, 2. November 2012 09:44:17 UTC+1 schrieb Houssam Salem:
(...) one prefixed with .mobile and the other with :not(.mobile) (or whatever the correct way is). (...)
Hmm. There still seems to be something strange going on.
Looks like":not(.mobile){...}" is correct CSS3, but doesn't work.
For testing, i tried
"""
:not(.mobile) {color:red;}

.mobile {color:blue;}

"""
and i got red text on AnkiDroid...

Houssam Salem

unread,
Nov 5, 2012, 11:03:09 AM11/5/12
to anki-a...@googlegroups.com
Here's a better minimal template for centering things that should work everywhere. There are small hacks to make it work in AnkiWeb which should probably be added to AnkiWeb proper. I'll open a bug on that.

Houssam Salem

unread,
Nov 5, 2012, 11:47:46 AM11/5/12
to anki-a...@googlegroups.com
I think it's a specificity issue with the :not selector. This will work:

body:not(.mobile){ color: red; }

.mobile{ color: blue; }


Must be something odd about how that :not works. 

ospalh

unread,
Nov 8, 2012, 7:45:40 AM11/8/12
to anki-a...@googlegroups.com


Am Montag, 5. November 2012 17:47:46 UTC+1 schrieb Houssam Salem:
I think it's a specificity issue with the :not selector. This will work:

body:not(.mobile){ color: red; }

.mobile{ color: blue; }

Thanks. That's something i've been looking for.
Reply all
Reply to author
Forward
0 new messages