Advanced formatting

This page contains a collection of tips for formatting your cards on AnkiDroid. The document assumes that you know how to edit card templates. Please check this tutorial video for an introduction to card editing on Anki Desktop.

Make flashcards vertically center aligned

The recommended way to center-align your cards is to add the following code to the .card class in the "Styling" section of you card templates

.card {
  ...
  position: absolute;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-align: stretch;
  -webkit-box-pack: center;
  -webkit-box-orient: vertical;
}

If you only want the cards to be centered on AnkiDroid and don't care about consistency with other clients, a simpler way is to go to "Settings -> Reviewing -> Center align" and enable the check box.

Make long words "wrap"

Since Android 4.4 Kit-Kat, Android no longer automatically breaks up long words so that they don't stretch past the edge of the screen. This can be particularly troublesome if you have gestures enabled, because you'll sometimes have to swipe left twice (once to scroll to the edge of the Webview, and again to actually get the swipe to register).

You can fix this issue by adding the following to the .card class in the "Styling" section of you card templates:

.card {
 ...
 word-wrap: break-word;
}

Use formatting like bold and italic with custom fonts

Some custom fonts (especially for Asian languages like Japanese) have separate font files for applying bold, etc. You can get these multiple files working using the official "font-face" method, by using the sample below for the "Styling" section of the card template:

.card {
 ...
 font-family: NotoSansJP;
}

@font-face { font-family: "NotoSansJP"; src: url('_NotoSansJP-Regular.otf'); }
@font-face { font-family: "NotoSansJP"; src: url('_NotoSansJP-Bold.otf'); font-weight: bold; }

Remove the audio play button from flashcards

If you prefer to use the "replay audio" action in the menu, and have the play button hidden on the flashcards, add the following to the bottom of the "Styling" section of your card template:

.replaybutton {display: none;}

Customize night-mode colors

AnkiDroid contains a very basic color inverter that e.g. changes white to black and black to white when night mode is enabled. If you prefer to disable the inverter and setup your own colors, you should include a .night_mode class in your styling. For example, the following will use a dark grey background instead of black when night mode is enabled. Note that contrary to the other examples on this page there should not be a space between the .card and .night_mode classes:

.card.night_mode {
 color: white;
 background-color: #303030;
}

Invert color of images in night-mode

The default color inversion algorithm does not affect images, with the consequence that images which have a transparent background and black lines will end up appearing invisible when night-mode is enabled. If you would like the color of images to be inverted when using night mode, you can set the following CSS selectors in addition to the .card.night_mode styling mentioned above. Note that these filters will generally only work on Android 4.4+.

.night_mode img {
 filter: invert(1); -webkit-filter:invert(1);
}

Alternatively, if you only want images with a certain class to be inverted (for instance LaTeX images), then you can specify that class name instead of img:

.night_mode .latex {
 filter: invert(1); -webkit-filter:invert(1);
}

Hide the input box on cards using the "type in the answer" feature

.mobile input#typeans{
display: none;
}

Remove the margin when displaying images

Add the following CSS to your card template

.card img {max-width: 100%; max-height: none;}
.mobile .card img {max-width: 100%; max-height: none;}
.mobile .card {margin: 0.5ex 0em;}
.mobile #content {margin: 0.5ex 0em;}

Drawing area on the front card (good for Kanji practice!)

With some JavaScript it's possible to draw shapes on the front card and display what was drawn on the back card for reference. This is quite convenient to practice writing Kanji!

A third party AnkiDroid user made his code open source: you can get it, along with an example deck on anki-canvas' project page

Designing custom cards layout for buttons

The AnkiDroid answers buttons (Again/Hard/Good/Easy) can be called using JavaScript functions. The following functions are available after AnkiDroid 2.11 .

showAnswer()
buttonAnswerEase1()
buttonAnswerEase2()
buttonAnswerEase3()
buttonAnswerEase4()
ankiMarkCard()
ankiToggleFlag()

showAnswer()
Usage: Perform Show Answer Click using this function

<button onclick="showAnswer();">Show Answer From JS</button>

buttonAnswerEase1()
Usage: Perform Show Answer Click using this function

<button onclick="buttonAnswerEase1();">Again</button>

Same for other buttonAnswerEase

ankiMarkCard()
Usage: Mark / Unmark current card using JavaScript

<button onclick="ankiMarkCard();">Mark / Unmark Current Card</button>

ankiToggleCard()

Usage: pass the arguments none, "red", "orange", "green", "blue" for flagging respective flag. This function used to flag the current card.

For flagging red in current card.

<button onclick="ankiToggleCard("red");">Red Flag</button>

Number from 0...4 can be used to flag. 0 - none 1 - red 2 - orange 3 - green 4 - blue

Usage: pass 0 to 4 in ankiToggleCard()
For flagging green in current card

<button onclick="ankiToggleCard(3);">Green Flag</button>

Following information is available in Card

New Card Count
Learn Card Count
Review Card Count
ETA
Mark
Flag

To access those values use AnkiDroidJS. followed by respective functions
For accessing remaining time use

AnkiDroidJS.ankiGetETA();

To get all information about current card / deck

 <script>
        console.log(AnkiDroidJS.ankiGetNewCardCount());
        console.log(AnkiDroidJS.ankiGetLrnCardCount());
        console.log(AnkiDroidJS.ankiGetRevCardCount());
        console.log(AnkiDroidJS.ankiGetCardMark());
        console.log(AnkiDroidJS.ankiGetCardFlag());
        console.log(AnkiDroidJS.ankiGetETA());
 </script>