CSS classes to discriminate between Desktop and AnkiWeb

Suggestions
1

Is your feature request related to a problem? Please describe.
My deck uses TTS tags on desktop and mobile clients, but these are not supported on AnkiWeb. Instead, plain text is shown in place of the TTS playback button. I’d like to hide this text when reviewing on AnkiWeb (see image).

image

Describe the solution you’d like
Anki provides CSS classes for different platforms and user agents (.win, .android, .chrome etc) to adjust the styling for each platform. On my installation, the Anki desktop client corresponds to the .chrome user agent and .win platform, so I’m not sure how to differentiate it from AnkiWeb running in a regular Chrome instance.

I wonder if it’s possible to insert additional CSS classes from the desktop or web clients (e.g. .anki-desktop or .ankiweb) to enable this change of style. This would probably be useful in various other use cases too.

Describe alternatives you’ve considered
Hiding the displayed text with other styling rules. It seems like my suggestion would be more flexible and not too hard to implement, so I’m proposing it here, but I will try to use this alternative in the meantime.

2

Here’s a probable way you can try. But I can’t guarantee its availability because my lack knowledge on HTML and JavaScript.

I’ve checked the difference of userAgent between Anki Desktop and AnkiWeb and I find there’s “QtWebEngine” in Anki Desktop’s.

So you could use the script below:

<script>
if( navigator.userAgent.match(/(QtWebEngine)/i) ) {
 	// When in Anki Desktop, do something.
} else {
	// When in AnkiWeb, do other thing.
}
</script>

Hope this would help you. And I’d like to know more elegant ways from other.

1 Like
3

Thanks for your help! I try to keep JavaScript in my cards to a minimum, but your suggestion worked well.

Here’s a small example from my card template that I ended up using:

<span id="TTS-Default">{{tts en_US:Term}}</span>
<script>
	if( navigator.userAgent.match(/(QtWebEngine)/i) ) {
 		// Anki Desktop - do nothing
	} else {
		// AnkiWeb - hide the TTS elements
		document.getElementById('TTS-Default').style.display = 'none';
	}
</script>

For other people interested in checking the browser and/or platform by using the userAgent string, here is some more information I found:
(it is generally not recommended because most browsers impersonate other browsers to maintain compatibility, but checking for “QtWebEngine” seems reasonable):

You can print out the userAgent string on your cards with the following code:

<script>
	// print out the userAgent string for debugging.
	document.getElementById('userAgentDiv').innerHTML = navigator.userAgent;	
</script>
<div id="userAgentDiv"></div>

For example, my desktop Anki client shows the following:
Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) QtWebEngine/6.6.1 Chrome/112.0.5615.213 Safari/537.36

Keeping the suggestion open because I think the CSS classes would be a more elegant solution.

1 Like