Words between clozes are invisible on AnkiDroid

[ALE10ANDER]

Whenever I have multiple Clozes on one card, any text between them becomes impossible to read.

For example, this card:

{{c1::“Put your sword back in its place,”}} Jesus said to him, {{c2::“for all who draw the sword will die by the sword.}}

{{c3::Matthew 26:52}}

Renders as this:

Is there a way to turn off this highlighting?

It renders just fine on the Windows app:

[Danika_Dakika]

I suspect you have highlighting/background color that is obscuring the text. Try changing AnkiDroid to the Light or Plain theme (like you’re using on desktop) to see if that makes a difference.

If that’s the problem, there are 3 Styling and formatting places that could be coming from. Look for background or background-color.

1. The styling for your note type, where classes of formatting can be defined overall for all of the cards, or for specific cards, or specific parts of cards.
2. The card templates themselves call those classes defined in styling, but they can also contain formatting for specific field replacements.
3. Formatting in the text of a specific note is controlled in the note editor by the editing toolbar. If there’s a lot of that to remove, Find and Replace might be useful. You might need to open the HTML view (click < > above the field) to see it in the field.

[ALE10ANDER]

Thanks for the reply!

• You are correct, the problem does not appear in plain mode on mobile!
• Changing background and background-color doesn’t seem to do anything.
• Currently, I have to make the change, sync on desktop, and then sync on web. Because the default card only has one cloze with no text between it (see image below), there’s no way for me to preview the change on desktop. Is there a way to change the previewed cloze?
• I don’t fully understand your point 2, but I suspect that’s where I will need to do more reading. Thank you!

[ALE10ANDER]

I found the issue. The HTML created puts in a span with an explicit styling. This is not a good default, but can easily be fixed by find and replace as you recommended, or with !important. Thank you!

{{c1::“Put your sword back in its place,”}}<span style="background-color: rgb(255, 255, 255);">&nbsp;Jesus said to him,&nbsp;</span>{{c2::“for all who draw the sword will die by the sword.}}<span style="background-color: rgb(255, 255, 255);"><br></span><br>{{c3::Matthew 26:52}}

[Danika_Dakika]

Things like this are usually copied in when you pasted the text. Find & Replace can sometimes be easy, but HTML offers some complications. You can see that in this field alone, you’ve got this in a span surrounding real text, and in a (pointless) span surrounding a <br> character. Even if you can override it in your template, it might be worth fixing it in the notes.

<span style="background-color: rgb(255, 255, 255);">&nbsp;Jesus said to him,&nbsp;</span>
<span style="background-color: rgb(255, 255, 255);"><br></span>

Usually you’ll want to keep whatever is between the open/close span tags and just get rid of the tags themselves. How easy that might be depends on how extensive the problem is, and whether there are legitimate span tags that you want to keep. You can start by searching your collection for span.

[matta]

If you are not sure how to do that, export your cards to a CSV. Then import the CSV into a spreadsheet program (e.g. LibreOffice Calc). It’s much easier to create a formula that pulls out the text and leaves the HTML behind, if that is what you seek.