BUG: Invailid HTML when I edit text

Dear expert,

I often edit text by underlining, color, bold etc. But recently I found that the HTML editor always generates a lot of invalid HTML, as follows

<span style="color: var(--field-fg); font-family: -apple-system-body; background: var(--field-bg);">

It really bother me, could you fix it.
Thanks a lot.

Do you mean that the HTML editor only generates that? As is, the HTML is only invalid because the closing tag is missing, but otherwise it’s fine.

Hi, please refer to below picture.

I just edit content in field “audio”, I find fond style changed.

so I click button “</>” on the toolbar to check what happend?

there are a lot of invailid html tags in it.



There is nothing invalid in what you have showed. First of all, be aware that the brackets things are only part of Anki’s custom syntax. That is, [sound:...] is not valid HTML, but Anki will replace these with something valid when you review the card, to make it produce sound. Besides that, tags (things like <span ...> ... </span> where ... can be a lot of stuff) are perfectly valid HTML. In your case, <span style="color: var(--field-fg); font-family: -apple-system-body; background: var(--field-bg);"> ... </span> is a tag that applies some styling to the text inside (not very useful here since you have no text inside):

  • it will set the color of the text to the value of the variable --field-fg;
  • it will set the font the of text to -apple-system-body;
  • it will set the background color to the value of the variable --field-bg.

Thanks for your detailed explaination.

It seems these additional Tags are not useful for my styling, but only automaticlly generated after my copy&paste 、delete space、add break line operation etc.

for my case, this Tags can automaticlly change the default fonts I don’t want, I need to manually delete these tags in html editor.

do you have some methords to remove these additional Tags?

Thanks a lot.

I don’t use Anki Mobile so I’m not sure if there is a better solution, but there should be a Fx button that strips a field from its formatting (which should basically remove any such tag). You can find more information in the manual.

Those tags are not intended to be added. I tried some basic editing/copy+pasting between fields, but could not cause them to appear for me. Could you please figure out the minimum set of steps that causes them to appear, and then provide the instructions to me so I can try to reproduce the problem?

1 Like

I encountered this problem many times while editing with the IPad Pro 15.6

I could reproduce it by the following steps:
Copy this multi line text:


Select from letters A to B and click the cloze button

 Testing<br>{{c1::<div><u>ATest</u></div><div><u>&nbsp;TesB</u></div><div><span style="color: var(--field-fg); font-family: -apple-system-body; background: var(--field-bg);"><span style="color: var(--field-fg); background: var(--field-bg);">}}</span>t</span><br></div><div>Testing</div>

It would be great if you removed these span and style code snippets as they are not necessary. I often edit using Anki on android to avoid this bug

I restored the bug scenario.

Create two lines text which the line break Tag is ‘DIV’, then position the cursor at the beginning of LINE2, then delete with the back button, merge the two lines into one, then view the HTML, you will see that a bunch of garbage code is generated.

Thanks for the reproduction steps, I’ll look into it.

Sorry for the long delay. I think I’ve found a way to work around it - please let me know if you’d like to try the next beta.