Advanced formatting - ankidroid/Anki-Android GitHub Wiki

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.

Advanced users may attach Chrome's dev tools to Android for a better template development experience.

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

To 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;
}

Auto change color in night-mode

In style.css

.card {
  --text-color1: black;
}

.card.night_mode {
  --text-color1: white;
}

.title {
   color: var(--text-color1);
}

To access the above color in JavaScript

<div class="text">Some Text</div>

<script>

var text_color = getComputedStyle(document.querySelector(".title")).color;
console.log(text_color);

</script>

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

Detect if card is running under AnkiDroid (JS)

document.documentElement.classList.contains("android"); //AnkiDroid

See: https://github.com/ankidroid/Anki-Android/blob/main/AnkiDroid/src/main/assets/card_template.html#L2 or https://github.com/ankidroid/Anki-Android/issues/6886

Hide content during execution of `onUpdateHook`

With version 2.15, AnkiDroid supports the onUpdateHook, to schedule JavaScript before MathJax renders. This is useful, if you want to make text replacements in the content of the card.

But in this case, you will also want to hide the content of the card, until all text replacements finished. AnkiDesktop will hide it automatically, but AnkiDroid will only do so, if you also happen to use MathJax. If you want to hide the content of the card until after the onUpdateHook executes, regardless of whether MathJax executes, you can use the following:

.android .card:not(.mathjax-rendered) {
    visibility: hidden;
}

Designing custom cards layout for buttons

See AnkiDroid Javascript API