Currently reviewing some of my anki cards and for some strange reason the formatting of them has all gone strange: random parts of the text are highlighted, some of the font colours have been changed to black so I can’t even really read the words on the back of the cards and the alignment of the text is all mixed up.
Please can someone help, thank you!
Pretty likely the problem is going to be the card template contents or the Styling. Could you post the whole content from (just paste the text in three sections not a screenshot, if you could):
Which you’ll find in the card template editor:
[A note: when you post your templates, put them in a –
```
codeblock
```
– with 3 backticks above and below, or the forum might parse some of your formatting.]
Thanks so much for the reply. These are the card template contents for each exactly as seen:
Front template
{{Front}}
Back template
{{FrontSide}}
<hr id=answer>
{{Back}}
Stlying
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
Looks good / normal to me.
Can you go to your card browser, find a card with unwanted formatting and press the < > button next to the field? It will display the html version of that field. Please paste the html here, so we can check if that is the culprit.
Also: Are your cards with unwanted formatting using this exact card template that you showed us here? E.g. if your cloze cards look like the formatting is off, then we’d have to see the templates of the cloze cards.
Something I just noticed using the cards this morning as compared to last night, is that the formatting error actually only occurs when my laptop goes into ‘Night Mode’ and the brightness is changed. Could that help in trying to solve it?
Yes, it could. But we need an html sample of one of your cards that aren’t formatted correctly. See
Couldn’t find the <> button next to the ‘field?’, could you please expand?
But what I have found is that when I go to “Browse”, pick one flashcard and then go to “Cards…”, on the preview side there is the ‘Options’ drop down menu on the ‘Preview’ side. When I select ‘Night Mode’ and toggle to the ‘back preview’ of the card that is when it shows the formatting as all messed up: text colour changes to black on some words which blends into the background and then means I can’t read them. However, the codes for “Front”, “Back” and “Style” are all the same as what I posted before so not sure what it is that changes.
In the card editor, it’s this button with “Toggle HTML Editor” tooltip shown
Since the problem wasn’t the HTML or CSS in your card template. Perhaps there is some html in the fields themselves that is doing something weird. Possibly there’s something like <span style="color: black"> ... </span>
But what I have found is that when I go to “Browse”, pick one flashcard and then go to “Cards…”, on the preview side there is the ‘Options’ drop down menu on the ‘Preview’ side. When I select ‘Night Mode’ and toggle to the ‘back preview’ of the card that is when it shows the formatting as all messed up: text colour changes to black on some words which blends into the background and then means I can’t read them. However, the codes for “Front”, “Back” and “Style” are all the same as what I posted before so not sure what it is that changes.
Switching to Night Mode ought to switch background to dark and text color to white unless there is some CSS in the card template or the field’s html saying that text color should always be something else.
This is what I found when I found the toggle on the card like you instructed:
<b><div><img src="Screenshot%202024-12-19%20at%2013.46.41.png"><span style="font-weight: 400;"><br></span></div><div><span style="font-weight: 400;">(noun)</span></div><ul><li><div><span style="color: rgb(37, 37, 40); font-weight: 400;">the state or capacity of being everywhere, especially at the same time</span></div></li></ul><div><span style="font-weight: 400;">E.g</span></div><ul><li><b><span style="font-weight: 400;">‘the </span><span style="font-weight: 400; font-style: italic;">ubiquity</span><span style="font-weight: 400;"> of mobile phones means you don’t really need a watch’</span></b></li></ul></b>
No clue what it means if anyone can help decipher it or find a fix for this problem!
That is a picture.
Modifies how thick your text will be (→ you can make it bolder).
This sets a specific font color to a black / grey tone. This might be the problem you’re experiencing when turning on dark / night mode, as this text won’t change to the inverse color now (it stays black / grey no matter the theme).
This makes the font italic.
I’d remove the color style if I where you. That should probably fix your issue.
Thanks so much. Do I have to do that for every card I make or is there a way I can code it to make sure that all the cards colour is able to turn to white when in dark mode when the background changes to black?
You could probably use something like regex. I never used it in anki though, so someone else would have to help you.
As an example, in javascript you could use this regex:
/\bcolor\b: *\brgb\b\(\d+, *\d+, *\d+,* *\d*.*\d*\);*/g
This will find all instances of those color attributes, like e.g. those below:
color: rgb(37, 37, 40);
color: rgb(37,37,40);
color: rgb(37, 37, 40, 0.4);
color: rgb(37, 37, 255, 0.40998);
You can test this regex and play around with it (including seeing detailed info) in sites like these:
Unfortunately, if you have a lot of formatting in your note fields, you have to remove it from there before formatting on your card templates, note type Styling, or theme can control.
Find and Replace is your best bet. It’s important to craft a good regex search and limit your Find to certain fields and notes – to make sure you’re not changing (or breaking) anything you intended to keep. Regex looks like gibberish 
, but it’s actually pretty easy to get the hang of.
What helps is that you don’t have to remove the entire <span> or <div> tag (so you also don’t have to remove their ending tag </> partners), you only need to remove the part that’s changing the color. This will be a good time to make a fresh backup [File > Create Backup] before you start making changes and remember that you can Edit > Undo to get back from almost anything.
As a first step, do as many searches as you can to find samples of HTML that you want to change – and HTML that you want to keep. Then if you need help fine-tuning your regex, someone should be able to take a look!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.