Sharing some CSS, Javascript codes for ANKI

Sharing some CSS, Javascript codes for ANKI

pastebin link

( I was surprised they did the song for a Conan movie. I only watched some Conan movies in Japanese  just to learn mandarin since the subs match the dub. But the movies I saw were solid movies with a plot so it’s serendipity at its best. at first I didn’t like tokyo jihen’s new album. I would listen to the songs but I felt nothing and I just didn’t feel a connection. I go back to the album a week or two later and now I’m obsessed and I gotta listen to the songs over and over again until I get over them. Though im not sure it’s possible since I’m still not over their song tokyo from the last album/single. I could hear that a couple hundred more times. I have yet to grow sick of it. Just replace the word Tokyo with whatever city you live in or live near or been to a lot and relate away.  )

CSS gets pasted into the Styling FIELD which you access through the add card window. Just click on cards… (next to the Fields…)

CSS for line breaks

p:first-letter {font-weight: bold; color: white; border-style: dashed; border-color: black; font-size: 50px}

This stuff gets pasted in Styling (shared between cards)

Back :

This CSS code let’s you change the css for the first letter of the word after a line break which is <p> . so for the card picture I put the <p> before the field name a la <p>{{Word}}.  In the back I have it as {{Word}} without the <p> preceding it. In the card text themselves I use <br> instead of <p> so I don’t get all these blanked out letters every time there is a line break. By default anki uses <br> for line breaks so it only becomes an issue when I mass import stuff. This is really useful for automatically making single cloze cards out of basic cards. It’s especially the case for 1-2 syllable Korean words. Seeing the default vocab card format with just the word or cards with the word and the definition on the front do nothing for me so I’m so glad there’s a CSS way to automate this.

The css applies to both sides of the card based on the way it’s written. However you can modify it so that the first-letter of the word after p looks a certain way in the front and a certain on the back. I don’t bother with that because I just need something clozed in the front.

CSS for italic/bold/underline
This stuff gets pasted in Styling (shared between cards)

b {color: #000000; font-size:32px ;}
.front i {color: #ffffff; font-size:1px ; }
.ba i {color: #black; font-size:28px; font-style: normal; font-weight: bold;

It let’s you change the css of the text based on whether the text is bold, underlined, or italicized. So if you want you can make the underlined text ununderlined and bold or italicized text not italicized etc etc.

So in my css code it changes the color of bold text to black and makes the font a bigger size than the non-bolded part. It makes the Italicized text disappear pretty much since I told it to make it white and tiny. It makes the italic text on the back of the card black, bold, and a little bigger and NOT ITALICIZED. For the .ba i you have to paste <div class=ba> in the Back Template section to apply it. Likewise you have to paste <dic class=Front> in the front template section to apply it. The italic thing is so convenient because there’s many times I’d rather italicize it then to delete the text or move the text another field.  also I never italicize text since I’d rather underline or bold the text so I adore this css trick.

example

back:

the [] and the text inside of it were italicized

Javascript for find and replace text

I use this with an autohotkey script (wraps selected text with *- etc ) so I can easily make the font size of the text bigger. so it replaces *- with <span style =~> and it replaces -* with </span>. For this javascript to work you have to paste <div class=”front”> in the Front Template to apply it. The reason I use this despite the ability to modify the CSS of clozed text via .cloze is because the .cloze only applies to the cloze you’re being tested on. So if you’re being tested on C1 card only the text that’s clozed with c1 are affected by the .cloze css to make the text bigger etc etc. Meanwhile the C2 stuff is unaffected.

.cloze {
font-size: 40px;
font-weight: bold;

This gets pasted in the Front Template section:
<script>
fields = document.querySelectorAll(‘.front’);
for(var i=0; i<fields.length; i++) {
fields[i].innerHTML = fields[i].innerHTML
.replace(/\*-/g, ‘ <span style=”font-size:49px”>’)
.replace(/-\*/g, ‘</span>’)
}
</script>

 

Javascript for changing appearance of clozes
This javascript changes the appearance of cloze from the default {..} to |___|.

This gets pasted in the Front Template section:

<script>
var cloze = document.querySelectorAll(“.cloze”);
for(var i = 0; i < cloze.length; i++){
cloze[i].textContent = “| __|”;
}
</script>

Lastly, I find these regex codes useful. In anki if you go to browse and and press control alt f you can find and replace text. so with [a-zA-Z][a-zA-Z0-9]*  in the find field with regular expression checked you can delete all the english in a field and with [\u3131-\uD79D]*  with regular expression checked you can delete all the hangeul in a field. Sometimes I want to put a field on the front but it gives away the answer so this is a really easy surefire way to kill the answer.

[a-zA-Z][a-zA-Z 0-9]*

[\u3131-\uD79D]*

also

[\u4e00-\u9fa5]*
use this for mandarin!!!

([一-龯])*

For japnese