Anki For people oblivious to anki, it can be downloaded here and there is also a great manual is much more, and much less than a flashcard app. Here I plan on setting out some of the not so obivous, yet useful features of Anki.

Card Formatting

Anki uses a simple templating system to take the text you input into the note fields and display it in a pleasing way in the form of your cards
You can access these templates by clicking on Cards in the add cards window
. These templates can be easily altered to present the information on your cards however you choose.

The basic building block of an Anki template are the references to fields in a note. This is done through double curly braces (e.g. {{<Field Name>}}). When Anki sees these it places the text from that field in their place. There are some special values that Anki reserves which can make your life easier:

  • {{FrontSide}} - Places all the text on the front side of a card in place; useful on the backs of cards
  • {{Tags}} - displays the tags of a cards
  • {{Card}} - displays the name of that Card
  • {{Type}} - displays the name of that Note Type
  • {{Deck}} and {{Subdeck}} - displays deck information
A simple Anki template.
A simple Anki template.

Conditional Fields

Baked into Anki’s templates is a system to carry out rudimentary logic. Using the tags {{#<Field Name>}} and {{/<Field Name>}}, Anki will only render the content between them if there is some text in the field <Field Name>. The opposite is also true using {{^<Field Name>}} and {{/<Field Name>}}, where content is only rendered if <Field Name> is blank. These can be useful to only display something if it exists:

{{#Extra}}
This is some extra information:
<br>
{{Extra}}
{{/Extra}}

Furthermore, Anki will only generate a card if the front of the card isn’t blank, so we can use this to conditionally generate a card:

{{#Condition}}
{{Front}}
{{/Condition}}

This is how the stock Anki “Basic (optional reversed card)” note type is made.

HTML and CSS Formatting

Anki relies on HTML and CSS, two of the fundamental technologies of the web. You’re currently reading this page courtesy of your browser (Firefox, Chrome, Edge, etc) interpreting HTML and CSS sent to it from a central server. Each Anki flashcard is effectively a small webpage running inside Anki In fact Anki relies on QT Web Engine to show you your cards, which is based off Chromium, the open source components of Google’s Chrome Browser. .

One of the primary benefits is that you can use all of the tools that go into making websites look appealing, to do the same to your Anki cards. While it may seem daunting at first, you can go a long way with just a few basic principles.

The default basic card starts you off with some basic CSS styling that is applied to the whole card through the CSS class card.

/* All of these can be changed to apply styles to the whole card */
.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    background-color: white;
}

You can change the look of the whole card by modifying the properties contained in the curly braces immediately after .card
For instance, you can try changing background-color: white; to background-color: lightblue;. You can change it to any other colour using its Hex Code
.

However, often we might want to style individual elements or fields with their own style. In your card templates, put a <div> around the element you want to style, and give it a class that somewhat describes what you want.

<div class="title">{{Front}}</div>

Then in your Styling section, reference the class you selected from earlier, then choose the properties you want to apply to that text These pages, CSS Text and CSS Font, give a good overview of some of the ways you can style the text in your cards. .

.title {
    color: red;
    text-decoration: underline;
    font-weight: bold;
}

This should result in the text on the front of your card to be bold, underlined, and red. Do not forget the full stop before the name of your class, otherwise it will not appropriately style your text. You can read up on CSS Selectors, if you want to learn how to have finer control over the elements in your cards.

The special keys from earlier (such as {{Deck}} and {{Type}}) can be used as CSS selectors too. This allows you to style cards automatically based on attributes about that card.

<div class="{{Deck}}">{{Front}}</div>

And then in the styling section Note that you cannot use the template keys in the Styling section, only the Templates. :

/* for example if you have two decks called Art and Music */
.Art {
    color: blue;
}
.Music {
    color: purple;
}

Consistent CSS Styling

It can be useful to keep all of your CSS for all your card types in the same file. This allows you to create a consistent look and feel across all your cards, while minimising code duplication. To achieve this, simply create a file _<your_chosen_name>.css
Remember start the file’s name with an underscore. This tells anki not to delete it when you next check media.
in your collections media folder, and move all your CSS there. Then in the Styling field put the line @include "_<your_chosen_name>.css".

You can now style your cards from one central file instead.

Hints

Anki has built in systems to deal with hints, which will work regardless of platform or card type. For cloze deletion one can simply:

The Capital of England is {{c1:London::Not Cardiff or Edinburgh}}
# This will be rendered as
The Capital of England is [Not Cardiff or Edinburgh]

There are several ways to implement hints in non-cloze type cards. Both of which involve having a hint field that can be selectively shown should you want it. The first is Anki’s native way, on the front of a card inlude the following:

# Front Template:
{{Front}}
<br>
{{#<Hint Field>}}{{hint:<Hint Field>}}{{/<Hint Field>}}

This will put a blue link on the front of your card, which when clicked will turn into your hint.

A similar result can also be achieved through a small amount of CSS, which will reveal your hint on mouse hover or tapping on mobile.

# Front Template:
{{Front}}
<br>
{{#Hint}}
<div id="hint">Hint:</div>
<div id="hidden">{{Hint}}</div>
{{/Hint}}

Then in the styling section put:

#hidden {
  display: none;
}
#hint:hover + #hidden {
  display: block;
}

Please bear in mind the minimum information principle One of the Rules of Formulating Knowledge from Supermemo ; if you’re routinely requiring the hint to correctly answer the card then it may be time to refactor it.

Typing Fields

Instead of clicking through to the next card, built into Anki is the feature to type an answer instead. You will then be shown how your answer differed from the correct one. This can be particularly useful when learning languages or spelling.

To enable this feature do the following to the front template of your card, and remove the reference to that field from the back.

{{Front}}
<br>
{{type::<Field to Type>}}