I’ve been using Anki for a while (based on the Fluent Forever approach), and I’m at the point now where I’m trying to tailor how I’m using it to meet my needs more specifically.
I’m finding that as I make cards and set up relevant styles with CSS (e.g. using the noun gender as a css style that changes the background colour), it’s starting to get a bit chaotic. I’m having to copy and paste my layouts and style between various card types to make sure I’m using the same formatting everywhere, and inevitably ending up with problems.
Does anyone have recommendations for ways of managing the card layouts and styles that take advantage of some more “modern” software tools? e.g. Using Tailwind for CSS, editing in VSCode and having a live update, having a single css file that all the cards reference for styles etc etc.
Thanks,
Tom
P.S. It looks like there’s some other folks asking similar questions, but I figured I’d check if there was something new since these posts
I personally use an in-house build script + Anki-Connect (updateModelTemplates and updateModelStyling) to send the info to Anki. It’s definitely not live update level, but it’ll allow you to use whatever to generate your HTML/CSS such that you don’t have to copy/paste the results in every time. Note that the code is a bit messy and not made to generalize to any other template, but here it is for reference in case you’re interested.
What you can do is have the same note type with the same css of course, and apply styles selectively based on the tags your note has.
I do this for my language cards. Meaning all of my notes have the same note type (and the same basic layout) but colors and images change depending on which language the note is tagged with.
If that could help you - I’d be happy to share how I’m doing it. But there might even be a solution floating around the forums somewhere.
To build my notes I use a python package called genanki, which creates a note type from html and css files which means I can use any IDE to work on it outside of anki.
It’s actually not all too difficult to do. The script I provided is a pretty over-engineered solution to the problem. In it’s simplest form, the following is all it really is:
with open("front.html") as f:
front = f.read()
with open("back.html") as f:
back = f.read()
with open("style.css") as f:
style = f.read()
invoke("updateModelTemplates", ...)
invoke("updateModelStyling", ...)
The invoke function and the correct parameters can be found in Anki-Connect’s README.
It might happen only to me, but in my experience doing this leads to some caching problem so if I change _common.css it will not show the updated version, so I always end up having to create a file with a new name.
Interesting, I use Anki on windows and have not had such an issue with caching.
I use the same css classes in the design of cards for different note types and import a common css file into all cards. That way it’s easy to keep consistent styling across all cards, even for cards on different note types.
