As mentioned in the basics section, Anki creates cards
automatically for use, based on your notes. You can configure the cards Anki
should create and what should be shown on them when adding or editing material
by clicking on the "Cards…" button. Please read the basics section if you
have not done so already, as the rest of this section assumes that you have
read it.
At the top of the window you’ll see a set of tabs, one for each card type. You
can click the plus on the right if you’d like to add another card type to the
current note type. Similarly, if you’d like to delete one, you can do so by
clicking the X on the tab.
On the top left is the front template, on the bottom left is the back
template, and in between them is the card styling section.
In Anki, templates are written in HTML, which is the language that web pages
are written in. The styling section is CSS, which is the language used for
styling web pages.
On the right is a preview of the front and back of the currently selected card.
If you opened the window while adding notes, the preview will be based on the
text you had typed into the Add Notes window. If you opened the window while
editing a note, the preview will be based on the content of that note. If you
opened the window from Tools → Manage Note Types, Anki will display each
field’s name in parentheses in place of content.
At the bottom of the window is a More button that gives you options to rename
or reorder the cards, as well as the following two options:
-
The "Deck Override" option allows you to change the deck that cards generated
from the current card type will be placed into. By default, cards are placed
into the deck you provide in the Add Notes window. If you set a deck here, that
card type will be placed into the deck you specified, instead of the deck
listed in the Add Notes window. This can be used if you want to separate cards
into different decks (for instance, for studying a language, to put production
cards in one deck and recognition cards in another). You can check which deck
the cards are currently going to by choosing Deck Override again.
-
The Browser Appearance option allows you to set different (perhaps simplified)
templates for display in the Question and Answer columns of the browser; see
browser appearance for more information.
Reverse Cards
If you want to reverse your existing cards, when editing a card, click the
Cards button, and then Flip.
If you want to create cards that go in both directions (e.g., both
"ookii"→"big" and "big"→"ookii"), you have several options. The simplest is
to select the "Basic (and reversed card)" built-in note type. This will
generate two cards, one in each direction.
If you want to generate reverse cards for only some of your material (perhaps
you only want to take the time to study reverses for the most important
material, or some of your cards don’t make sense reversed), you can select the
"Basic (optional reversed card)" note type. This note type generates a
forward-only card when you fill in only the first two fields; if you
additionally enter something in the "Add Reverse" field (like a y), Anki will
generate a reverse card as well. The contents of this field will never be
displayed on a card.
If you later decide you don’t want a reverse card that you added, you can
delete it by removing the text from the "Add Reverse" field. Similarly, if you
want to add a reverse card, you can add text to the “Add Reverse” field. If you
didn’t select the optional reverse note type to begin with, you can use Edit →
Change Note Type in the browser to change it.
|
Note
|
To avoid loss of scheduling information if you make an editing mistake,
Anki does not automatically delete cards after you remove the text from the
“add reverse” field. To complete the deletion, run Tools → Empty Cards from the
main window. |
If you’re using a more complex note type (for instance, one with three cards)
and you wish to generate specific cards only in certain situations, please see
the conditional replacement section.
Basic Templates
The most basic template looks something like this:
When you place text within curly brackets, Anki looks for a field by that
name, and replaces the text with the actual content of the field. You can
include as many fields as you wish.
|
Note
|
Field names are case sensitive. If you have a field named Front,
writing {{front}} will not work properly. |
Your templates are not limited to a list of fields. You can also include
arbitrary text on your templates. For example, if you’re studying capital
cities, and you’ve created a note type with a "Country" field, you might
create a question like this:
What's the capital city of {{Country}}?
The default back template will look something like this:
{{FrontSide}}
<hr id=answer>
{{Back}}
This means "show me the text that’s on the question, then a divider line, and
then the back field".
The id=answer part tells Anki where the divider is between the question and
the answer. This allows Anki to automatically scroll to the spot where the
answer starts when you press show answer on a long card (especially useful on
mobile devices with small screens). If you don’t want a horizontal line at the
beginning of the answer, you can use another HTML element such as a paragraph
or div instead.
Checking Your Answer
If you’d like to type in the answer and have Anki compare your input to the
real answer, you can do so by changing your template. Imagine your front
and back templates look like:
{{FrontSide}}
<hr id=answer>
{{Foreign Word}}
To type in the foreign word and check if you are correct, you need to edit
your question template so that it looks like this:
{{Native Word}}
{{type:Foreign Word}}
Note that we have added type: in front of the field we want to compare, and
it is copied into the answer section as well. If you don’t have FrontSide on
the back of your card, you will need to add the same type directive to the
answer side as well.
When reviewing, Anki will display a text box where you can type in the answer,
and upon hitting enter or showing the answer, Anki will show you which parts
you got right and which parts you got wrong. The text box’s font size will be
the size you configured for that field (via the "Fields" button when editing).
This feature does not change how the cards are answered, so it’s still up to
you to decide how well you remembered or not.
|
Note
|
Only one typing comparison can be used on a card. If you add the above
text multiple times, it will not work. It also only supports a single line, so
it is not useful for comparing against a field that is comprised on multiple lines. |
Anki uses a monospaced font for the answer comparison so that the "provided"
and "correct" sections line up. If you wish to override the font, you can put
the following at the bottom of your styling section:
code#typeans { font-family: "myfontname"; }
Advanced users can override the default type-answer colours with the css
classes typeGood, typeBad and typeMissed. At the time of writing, only the
computer version of Anki supports these classes.
It is also possible to type in the answer for cloze deletion cards. To do this,
add {{type:cloze:Text}} to both the front and back template, so the back looks
something like this:
{{FrontSide}}
<hr id=answer>
{{cloze:Text}}
{{type:cloze:Text}}
Note that unlike with regular cards, this must be added to both sides on a
cloze note type.
If there are multiple sections elided, you can separate the answers in the text
box with a comma.
|
Note
|
Type answer boxes will not appear in the "preview" dialog in the browser. When you review or look at the preview in the card
types window, they should display. |
Newlines
The template language needs a special command to create a new line. For
example, if you wrote the following in the template:
In the preview, you’d actually see:
To add a new line, you need to add a <br> code to the end of a line, like so:
The br code stands for "(line) br(eak)".
The same applies for fields. If you want to display two fields, one on each
line, you would use
{{Field 1}}<br>
{{Field 2}}
Card Styling
In between the front and back template is the card styling. Here you can
change the background colour of the card, the default font, the text
alignment, and so on.
The standard options available to you are:
-
font-family
-
The name of the font to use on the card. If your font has spaces in it like
"MS Unicode", then you need to surround the font name in double quotes as in
this sentence. It is also possible to use multiple fonts on one card; for
information on that, please see below.
-
font-size
-
The size of the font in pixels. When changing it, make sure you leave px at
the end.
-
text-align
-
Whether the text should be aligned in the center, left, or right.
-
color
-
The color of the text. Simple color names like blue, lightyellow and so
on will work, or you can use HTML color codes to select arbitrary colors.
Please see this webpage for more information.
-
background-color
-
The color of the card background.
Arbitrary CSS can be placed in the styling section - advanced users may wish
to do things like add a background image or gradient for example.
The styling is shared between all cards, which means that when you make an
adjustment it will affect all cards for that note type. It is also possible to
specify card-specific styling. The following example will use a yellow
background on all cards except the first one:
.card { background-color: yellow; }
.card1 { background-color: blue; }
One other thing to note is that Anki shrinks images to fit the screen by
default. You can change this by adding the following to the bottom of your
styling section:
img { max-width: none; max-height: none; }
|
Note
|
If you try to change the style for images and find that the star that appears
on a card is affected (for instance, it becomes way too large), you can target
it with the following: |
Field Styling
The default styling applies to the whole card. You can also make certain
fields or part of the card use a different font, color, and so on. This is
particularly important when studying foreign languages, as Anki will sometimes
be unable to correctly display characters unless an appropriate font has been
chosen.
Say you have an "Expression" field, and you want to give it the OSX Thai
font "Ayuthaya". Imagine your template already reads:
What is {{Expression}}?
{{Notes}}
What we need to do is wrap the text we want to style in some HTML. We will put
the following in front of the text:
And the following behind it:
By wrapping the text like the above, we tell Anki to style the wrapped text
with a custom style called "mystyle1", which we will create later.
Thus if we wanted the entire "What is …?" expression to use the Thai font,
we would use:
<div class=mystyle1>What is {{Expression}}?</div>
{{Notes}}
And if we wanted only the expression field itself to use the Thai font, we’d
use:
What is <div class=mystyle1>{{Expression}}</div>?
{{Notes}}
After we’ve edited the template, we now need to move to the Styling section
between the templates. Before editing it, it should look something like:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
Add your new style to the bottom, so it looks like:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.mystyle1 {
font-family: ayuthaya;
}
You can include any styling you want in the style. If you wanted to increase
the font size too, you’d change the mystyle1 section to look like:
.mystyle1 {
font-family: ayuthaya;
font-size: 30px;
}
It’s also possible to bundle custom fonts with your deck, so you don’t need to
install them on your computer or mobile device. Please see the
installing fonts section for more info.
Hint Fields
It’s possible to add a field to the front or back of a card, but make it
hidden until you explicitly show it. We call this a hint field. Before
adding a hint, please bear in mind that the easier you make it to answer a
question in Anki, the less likely you are to remember that question when you
encounter it in real life. Please have a read about the minimum information
principle on http://www.supermemo.com/articles/20rules.htm before proceeding.
First, you’ll need to add a field to store the hint in if you have not already.
Please see the fields section if you’re not sure how to do this.
Assuming you’ve created a field called MyField, you can tell Anki to hide it
by default by adding the following to your template:
If MyField is blank, nothing will be shown.
If you show the hint on the question and then reveal the answer, the hint will
be hidden again. If you want to have the hint always revealed when the answer
is shown, you will need to remove {{FrontSide}} from your back template and
manually add the fields you wish to appear.
|
Note
|
It is not currently possible to use a hint field for audio — the audio
will play regardless of whether you’ve clicked on the hint link. |
Special Fields
There are some special fields you can include in your templates:
The note's tags: {{Tags}}
The type of note: {{Type}}
The card's deck: {{Deck}}
The type of card ("Forward", etc): {{Card}}
The front text (only valid in back template): {{FrontSide}}
FrontSide will not include any audio that was on the front side of the card.
If you wish to have the same audio play on both the front and back of the
card, you’ll need to manually include the audio fields on the back as well.
As with other fields, special field names are case sensitive.
Card Generation & Deletion
Anki will not create cards with empty front sides. Thus if "My Field" was
empty, and one card’s front template included only that field, the card would
not be created.
If no cards can be created, then the Add Notes window will warn you and not
allow the note to be added until at least one card would be generated.
When you edit a previously added note, Anki will automatically create extra
cards if they were previously blank, but no longer so.
If your edits have made some cards blank, Anki will not delete them
immediately, as that could lead to accidental data loss. To remove empty cards,
in the main window go to Tools → Empty Cards. You will be shown a list of empty
cards and be given the option to delete them.
It is not possible to manually delete individual cards (rather than notes),
because they would end up being recreated the next time the note was edited.
Instead, you should make the relevant conditional replacement fields empty and
then use the Empty Cards option. (If you don’t have fields set up to control
card generation, please see the sections on reversed cards
and selective card generation.) If you need to do this
for many notes at once, you can use the find and replace
feature in the browser.
Anki does not consider special fields or non-field text for the purposes of
card generation. Thus if your front template looked like the following, no
card would be generated if Country was empty:
Where is {{Country}} on the map?
Selective Card Generation
Please read the previous section before you read this.
Sometimes you may want to generate extra cards for only some of your material,
such as testing your ability to recall the most important words of a set. You
can accomplish this by adding an extra field to your note, and adding some
text into it (such as "1") on the notes you want the extra card. Then in the
card template, you can make the card’s creation depend on that field being
non-empty. For more information on this, please see the conditional
replacement section below.
Anki does not scan templates for media references, because it is slow to do
so. This has implications for including media on the template.
Static Sounds/Images
If you wish to include images or sounds on your cards that are the same for
every card (eg, a company logo at the top of each card):
-
Rename the file so it starts with an underscore, eg "_logo.jpg". The
underscore tells Anki that the file is used by the template and it should
be exported when sharing the deck.
-
Add a reference to the media on your front or back template, like:
Field References
Media references to fields are not allowed. They may or may not display during
review, and will not work when checking for unused media, importing/exporting,
and so on. Examples that won’t work:
<img src="{{Expression}}.jpg">
[sound:{{Word}}]
[latex]{{Field 1}}[/latex]
Instead, you should include the media references in the field. Please
see the importing section for more information.
Conditional Replacement
It is possible to include certain text on your cards only if a field is empty
or not empty. An example:
This text is always shown.
{{#FieldName}}
This text is only shown if FieldName has text in it
{{/FieldName}}
{{^FieldName}}
This text is only shown if FieldName is empty
{{/FieldName}}
A real life example is only showing a label if the field is not empty:
{{#Tags}}Tags: {{Tags}}{{/Tags}}
You can also use conditional replacement to control which cards are generated.
This works since Anki will not generate cards which would
have a blank front side. For example, consider a card with two fields on the
front:
Normally a card would be generated if either the expression or notes field had
text in it. If you only wanted a card generated if expression was not empty,
then you could change the template to this:
{{#Expression}}
{{Expression}}
{{Notes}}
{{/Expression}}
And if you wanted to require both fields, you could use two conditional
replacements:
{{#Expression}}
{{#Notes}}
{{Expression}}
{{Notes}}
{{/Notes}}
{{/Expression}}
Keep in mind that, as mentioned in the card generation
section, this only works when you place the conditional replacement code on the
'front' of the card; if you do this on the back, you will simply end up with
cards with a blank back side. Similarly, since this works by checking if the front field would be empty, it is important to make sure you wrap the entire front side in the conditional replacement; for instance, the following would not work as expected:
{{#Expression}}
{{Expression}}
{{/Expression}}
{{Notes}}
The default behaviour can be thought of as an "OR" condition - cards are
created if the first field is non-empty, OR the second field is non-empty, and
so on. The behaviour above can be thought of as an "AND" condition - cards are
created if the first field is non-empty AND the second field is non-empty, and
so on.
A caveat: Anki is not currently able to mix AND and OR conditions. Thus the
following template, which says "require expression and notes, or field 3",
would not work:
{{#Expression}}
{{#Notes}}
{{Expression}}
{{Notes}}
{{/Notes}}
{{/Expression}}
{{Field 3}}
Another caveat is that negated expressions can not be used to control card
generation. That is, wrapping a template in {{^Field}} will not do what you
expect.
Cloze Templates
The cloze note type functions differently from regular note types. Instead of a
customizable number of card types, it has a single type which is shared by all
cloze deletions on a note.
As mentioned in the card generation section above, generation of regular cards
depends on one or more fields on the question being non-empty. Cloze deletion
note types are generated differently:
-
Anki looks on the front template for one or more cloze replacements,
like {{cloze:FieldName}}.
-
It then looks in the FieldName field for all cloze references, like
{{c1::text}}.
-
For each separate number, a card will be generated.
Conditional generation provides a special field so you can check which card
you are rendering. If you wanted to display the "hint1" field on the first
cloze, and "hint2" field on the second cloze for example, you could use the
following template:
{{cloze:Text}}
{{#c1}}
{{Hint1}}
{{/c1}}
{{#c2}}
{{Hint2}}
{{/c2}}
Other HTML
Your templates can contain arbitrary HTML, which means that all the layout
possibilities used on internet web pages can also be used on your cards.
Things like tables, lists, images, links to external pages and so on are all
supported. With tables for example, you could change the layout so that the
front and back of a card appear on the left and right instead of the top and
bottom.
Covering all of HTML’s features is outside the scope of this manual, but there
are plenty of good introductory guides to HTML available on the web if you’d
like to learn more.
Dictionary Links
You can also use field replacement to create dictionary links. Imagine you’re
studying a language and your favourite online dictionary allows you to search
for text using a web URL like:
http://example.com/search?q=myword
You could add an automatic link by doing the following in your template:
{{Expression}}
<a href="http://example.com/search?q={{Expression}}">check in dictionary</a>
The template above would allow you to search for each note’s expression by
clicking on the link while reviewing. There is a caveat however, so please see
the next section.
HTML Stripping
Like templates, fields are stored in HTML. In the dictionary link example
above, if the expression contained the word "myword" without any formatting,
then the HTML would be the same: "myword". But when you include formatting in
your fields, extra HTML is included. If "myword" was bolded for example, the
actual HTML would be "<b>myword</b>".
This can present a problem for things like dictionary links. In the above
example, the dictionary link would end up being:
<a href="http://example.com/search?q=<b>myword</b>">check in dictionary</a>
The extra characters in the link would likely confuse the dictionary site, and
you’re likely not to get any matches.
To solve this, Anki provides the ability to strip formatting from fields when
they are replaced. If you prefix a field name with text:, Anki will not
include any formatting. So a dictionary link that worked even with formatted
text would be:
<a href="http://example.com/search?q={{text:Expression}}">check in dictionary</a>
Browser Appearance
If your card templates are complex, it may be difficult to read the question and
answer columns (called "Front" and "Back") in the card list. The
"browser appearance" option allows you to define a custom template to be used only
in the browser, so you can include only the important fields and change the
order if you desire. The syntax is the same as in standard card templates.
RTL (right to left) text
If you’re learning a language that reads from right to left, you’ll need to
adjust the template like so:
<div dir=rtl>{{FieldThatHasRTLTextInIt}}</div>
If you were linked directly here, please see the start of this section for
more information.
Anki defines some special CSS classes that allow you to define different
styling for different platforms. The example below shows how to vary the font
depending on where you’re reviewing:
.win .jp { font-family: "MS Mincho"; }
.mac .jp { font-family: "Hiragino Mincho Pro"; }
.linux .jp { font-family: "Kochi Mincho"; }
.mobile .jp { font-family: "Hiragino Mincho ProN"; }
<div class=jp>{{Field}}</div>
Installing Fonts
If you’re using Anki on a work or school computer where you don’t have
permission to install new fonts, or you’re using Anki on a mobile device, it’s
possible to add fonts directly to Anki.
To add a font to Anki, it must be in the TrueType format. TrueType fonts have
a filename ending in .ttf, such as "Arial.ttf". Once you’ve located a TrueType
font, we’ll need to add it to the media folder:
-
Rename the file, adding an underscore at the start, so it becomes like
"_arial.ttf". Adding an underscore will tell Anki that this file will be
used on a template, and should not be deleted when checking for unused media.
-
In your computer’s file browser, go to your Documents folder, then the Anki
folder inside it, and then a folder called "User 1" (or your profile name
if you’ve renamed/added profiles).
-
Inside the folder, you should see a folder called collection.media. Drag
the renamed file to that folder.
After that, we need to update the template:
-
Click Add at the top of the main screen, and then select the note type
you want to change with the top left button.
-
Click Cards.
-
In the styling section, add the following text to the bottom, replacing
"_arial.ttf" with the name of the file you copied into your media folder:
@font-face { font-family: myfont; src: url('_arial.ttf'); }
|
Note
|
Only change the "arial" part, not the "myfont" part. |
After that, you can either change the font for the entire card, or for
individual fields. To change the font for the entire card, simply locate the
font-family: line in the .card section and change the font to "myfont". To
change the font for only certain fields, please see the Field Styling instructions above.
|
Note
|
Please make sure the filenames match exactly. If the file is called
arial.TTF and you write arial.ttf in your card templates, it will not work. |
Fonts on a Mac
Embedded fonts currently do not work on OS X. It is still possible to use
custom fonts, but they need to be installed system wide.
You can set up Anki to use the system font on a Mac computer, and an embedded
font elsewhere.
On your front or back template, wrap the field you want to style in the following
code, replacing "FieldName" with the name of your field.
<span style="mystyle">{{FieldName}}</span>
In the styling section, in addition to the font-face line described above,
add the following:
.mystyle { font-family: myfont; }
.mac .mystyle { font-family: Helvetica; }
Replace "Helvetica" with the name of the font you installed on your system.
Keep "myfont" as is, as it references the font you embedded.
Javascript
As Anki cards are treated like webpages, it is possible to embed some
Javascript on your cards via inline script tags in the template. As this is an
advanced feature, we can not guarantee any particular Javascript will work,
and can not provide any assistance when things are not working. If in doubt,
it’s best to avoid it.
Each Anki client may implement card display differently, so you will need to
test the behaviour across platforms. A number of clients are implemented
by keeping a long running webpage and dynamically updating parts of it as cards
are reviewed, so your Javascript will need to update sections of the document
rather than doing things like document.write.
Functions like window.alert are also not available. Anki will write
javascript errors to the terminal, so if you’re running on a Mac or Windows
computer, you’ll need to manually catch the errors and write them to the
document to see them. There is no debugger available, so to figure out
problems you’ll need to break down your code until you discover which parts
are causing problems.
