Clicking "Flip" scrambles code

Anki Suggestions
1

When I was trying to write a new card template I have encountered a strange behaviour.

The setup:

  1. I’m in Card Types for [Deck] window.
  2. I have a card type selected
  3. The code in Front Template and Back Template is as below.

The path:

  1. I click the Flip button

Effect:

Some code disappears, some parts get switched between the Front and the Back template. The preview gets mangled, but it follows the changes it code at least. The results of the aforementioned scrambling can be found below the code for Front Template and Back Template code.

Original code:

Front Template:

[anki:tts lang=zh_CN]{{Simplified}}[/anki:tts]
[anki:tts lang=zh_CN]{{Simplified sentence}}[/anki:tts]

Back Template:

{{FrontSide}}

<br/>

<div style='font-family: "Arial"; font-size: 30px; color: gold'> 
	<b>{{Simplified}}</b>
</div> 

</br>

<div style='font-family: "Liberation Sans"; font-size: 23px;'>
	{{Simplified sentence}}
</div>

<hr id=answer>

<div style='font-family: "Liberation Sans"; font-size: 30px; padding: 5px'>{{Meaning}} </div>
<div style='font-family: "Liberation Sans"; font-size: 20px;'>{{Sentence translation}}</div>

<ruby>有<rt>you</rt></ruby>

<script>

</script>

After clicking once Flip:

(starting with Front Template selected)

Front Template:

<div style='font-family: "Liberation Sans"; font-size: 30px; padding: 5px'>{{Meaning}} </div>
<div style='font-family: "Liberation Sans"; font-size: 20px;'>{{Sentence translation}}</div>

<ruby>有<rt>you</rt></ruby>

<script>

</script>

Back Template:

{{FrontSide}}

<hr id=answer>

[anki:tts lang=zh_CN]{{Simplified}}[/anki:tts]

[anki:tts lang=zh_CN]{{Simplified sentence}}[/anki:tts]

Quick notes

I’ve tried looking in the documentation for what the button is supposed to be doing but I’ve found nothing (not that I’ve searched all that hard) but, as you might have noticed, after pushing the button the following had simply disappeared:

<br/>

<div style='font-family: "Arial"; font-size: 30px; color: gold'> 
	<b>{{Simplified}}</b>
</div> 

</br>

<div style='font-family: "Liberation Sans"; font-size: 23px;'>
	{{Simplified sentence}}
</div>

I don’t think that’s what should be happening.

My anki version is 25.02.5 so this bug (if it’s even a bug might have been solved already), I’ve tried upgrading but I’m running Ubuntu 22.04 and upgrading to the newest version makes anki cry about glib or smth. :<

2

As far as I remember, Anki has always behaved this way (and still does in the latest release).

When you click Flip, what happens is:

  1. Front template: its contents are moved to the back template, below <hr id=answer>.
  2. Back template: the part of the template under <hr id=answer> is moved to the front template; anything above <hr id=answer> is removed and replaced with {{FrontSide}}.

I think the Flip button was designed around the default “Basic” template and doesn’t work well with more complex or customized templates like yours.
Perhaps the Flip button could be improved. I remember other users mentioning similar issues.

A couple of ideas (just brainstorming):

  1. Back template: when clicking Flip, keep everything above <hr id=answer> exactly as is. Probably not ideal, but it would prevent content loss.
  2. When clicking Flip, move everything that was on the back template to the front template (excluding <hr id=answer> and {{FrontSide}}, if present). Perhaps invert it so that everything that was above <hr id=answer> ends up below, and vice versa.
3

@jcznk is correct – your templates are too complicated to use with Flip. If the <hr id=answer> is missing, or does anything other than mark the line between what’s on the front and what’s on the back, it won’t work.

I’ll move this to the correct category for a suggestion – either for different behavior, or a more elegant failure case.