My Anki Wanikani Ultimate 2 Changes

$My Anki Wanikani Ultimate 2 Changes

Changes for the scripts of the Anki Wanikani Ultimate 2 deck, feel free to use them how you like.

Features:
- Automatic Romaji to Kana conversion in reading input using WanaKana.
- Multiple input support (separated by a space for readings and by a comma for meanings, 
  eg: "axe, loaf bread counter" or "あめ　あま").
  - Shows each right and wrong answer from your input.
- Automatic resizing of characters for small screens.
- Reordered the Back template of the cards to be more similar to the Wanikani site (reading related things come first in reading cards, 
  same for meaning).

Check the comments below for instructions on how to install and screenshots.
If you have any suggestion or some bug be sure to comment below and i will be glad to help.

AllChanges_meaning_back.js

{{FrontSide}}

<div id="card-back">
  <div id="meanings">
    <h2>Meanings</h2>
    <p>{{Meaning}}</p>
  </div>

  <div id="components">
    <h2>Components</h2>
    <div id="component-data" class="flex-container"></div>
  </div>

  <div id="meaning-mnemonic">
    <h2>Meaning Mnemonic</h2>
    <p>{{Meaning_Mnemonic}}</p>
    <p id="meaning-mnemonic-hint" class="mnemonic-hint">{{Meaning_Info}}</p>
  </div>

  <div id="readings">
    <h2>Readings</h2>
    <div class="flex-container">
      <div id="onyomi-readings" class="flex-item">
        <h3>On'yomi</h3>
        <p>{{Reading_Onyomi}}</p>
      </div>

      <div id="kunyomi-readings" class="flex-item">
        <h3>Kun'yomi</h3>
        <p>{{Reading_Kunyomi}}</p>
      </div>

      <div id="nanori-readings" class="flex-item">
        <h3>Nanori</h3>
        <p>{{Reading_Nanori}}</p>
      </div>

      <div id="other-readings" class="flex-item">
        <p>{{Reading}}</p>
      </div>
    </div>
    <div id="reading-audios">{{Audio}}</div>
  </div>

  <div id="reading-mnemonic">
    <h2>Reading Mnemonic</h2>
    <p>{{Reading_Mnemonic}}</p>
    <p id="reading-mnemonic-hint" class="mnemonic-hint">{{Reading_Info}}</p>
  </div>

  <div id="context-sentences">
    <h2>Context Sentences</h2>
  </div>
</div>

<!-- Insert speech type into meanings -->
<script>
  var div = document.getElementById("meanings");
  if (`{{Speech_Type}}` !== "") {
    var element = document.createElement("p");
    element.innerHTML = `<p>Part of Speech: {{Speech_Type}}`;
    div.appendChild(element);
  }
</script>

<!-- Add context sentences -->
<script>
  var div = document.getElementById("context-sentences");

  function appendContextSentence(jp, en) {
    if (jp !== "" && div) {
      var element = document.createElement("p");
      element.innerHTML = "<p>" + jp + "</br>" + en + "</p>";
      div.appendChild(element);
    }
  }

  appendContextSentence(`{{Context_jp}}`, `{{Context_en}}`);
  appendContextSentence(`{{Context_jp_2}}`, `{{Context_en_2}}`);
  appendContextSentence(`{{Context_jp_3}}`, `{{Context_en_3}}`);

  if (
    `{{Context_jp}}{{Context_en}}{{Context_jp_2}}{{Context_en_2}}{{Context_jp_3}}{{Context_en_3}}`.trim() ===
    ""
  ) {
    div.style.display = "none";
  }
</script>

<!-- Hide empty reading sections -->
<script>
  function disable_reading_div(id, readings) {
    var div = document.getElementById(id);
    if (div)
	{
		if (readings === "") {
      		div.style.display = "none";
    	} else {
     		div.style.display = "";
    	}
	}
  }

  disable_reading_div("onyomi-readings", `{{Reading_Onyomi}}`);
  disable_reading_div("kunyomi-readings", `{{Reading_Kunyomi}}`);
  disable_reading_div("nanori-readings", `{{Reading_Nanori}}`);
  disable_reading_div("other-readings", `{{Reading}}`);
  disable_reading_div(
    "readings",
    `{{Reading_Onyomi}}{{Reading_Kunyomi}}{{Reading_Nanori}}{{Reading}}`
  );
</script>

<!-- Populate components -->
<script>
  var components = `{{Components}}`.split(", ").filter((e) => e !== "");
  var componentNames = `{{Component_Names}}`
    .split(", ")
    .filter((e) => e !== "");
  var componentTypes = `{{Component_Types}}`
    .split(", ")
    .filter((e) => e !== "");

  var componentDataDiv = document.getElementById("component-data");

  for (var i = 0; i < components.length; i++) {
    var textDiv = document.createElement(componentTypes[i]);

    textDiv.innerHTML = components[i];

    var nameDiv = document.createElement("span");
    nameDiv.innerHTML = componentNames[i];

    var componentDiv = document.createElement("div");
    componentDiv.classList.add("component");
    componentDiv.classList.add("flex-item");

    componentDiv.appendChild(textDiv);
    componentDiv.appendChild(nameDiv);

    componentDataDiv.appendChild(componentDiv);
  }

  var componentsDiv = document.getElementById("components");
  if (components.length > 0) {
    componentsDiv.style.display = "";
  } else {
    componentsDiv.style.display = "none";
  }
</script>

<!-- Hide empty mnemonics -->
<script>
  function disableDiv(id, mnemonic) {
    var div = document.getElementById(id);
    if (div)
	{
		 if (mnemonic === "") {
      		div.style.display = "none";
   		 } else {
      		div.style.display = "";
    	}
	}
  }

  var meaningMnemonic = `{{Meaning_Mnemonic}}`;
  var meaningHint = `{{Meaning_Info}}`;
  var readingMnemonic = `{{Reading_Mnemonic}}`;
  var readingHint = `{{Reading_Info}}`;

  disableDiv("meaning-mnemonic", meaningMnemonic);
  disableDiv("meaning-mnemonic-hint", meaningHint);
  disableDiv("reading-mnemonic", readingMnemonic);
  disableDiv("reading-mnemonic-hint", readingHint);
</script>

<!-- Check the answer -->
<script>
  //some addons read the script too early:
  if (document.getElementById("typeans")) {
    var typedAnswer = "";
    var typedAnswer_element = document.getElementById("typeans");
    if (typedAnswer_element.querySelector(".typegiven")) {
      // the "typegiven" class exists only on iphone:
      typedAnswer = typedAnswer_element
        .querySelector(".typegiven")
        .querySelector(".typeBad").innerText;
    } else if (typedAnswer_element.querySelector(".typeBad")) {
      //for pc and android:
      typedAnswer = typedAnswer_element.querySelector(".typeBad").innerText;
    }

    typedAnswerLower = typedAnswer.toLowerCase();

    var meaningWhitelist = `{{Meaning_Whitelist}}`.toLowerCase().split(", ");
    var meaningBlacklist = `{{Meaning_Blacklist}}`.toLowerCase().split(", ");
    var readingWhitelist = `{{Reading_Whitelist}}`.toLowerCase().split(", ");
    var readingBlacklist = `{{Reading_Blacklist}}`.toLowerCase().split(", ");

    var correctAnswers = [];
    var incorrectAnswers = [];
    if (`{{Card}}` === "Meaning") {
      correctAnswers = meaningWhitelist;
      incorrectAnswers = meaningBlacklist;
    } else if (`{{Card}}` === "Reading") {
      correctAnswers = readingWhitelist;
      incorrectAnswers = readingBlacklist;
    }

    var answerDiv = document.createElement("div");
    answerDiv.setAttribute("id", "typeans");
    answerDiv.innerHTML = typedAnswer;
    document.getElementById("typeans").replaceWith(answerDiv);

	function answerListIncorrect(correctArr, answerStr, separator)
	{
		const respArr = answerStr.split(separator);
		let incorrectList = [];
		for (let r of respArr)
		{
			const trimmed = r.trim();
			if (!correctArr.includes(trimmed))
			{
				incorrectList.push(trimmed);
			}
		}
		return incorrectList;
	}
	 
	var answersSplit = typedAnswerLower.split(',');
	answersSplit = answersSplit.map(ans => ans.trim().toLowerCase());
    var incorrectList = answerListIncorrect(correctAnswers, typedAnswerLower, ',');
	var incorrectListAnswers = answerListIncorrect(incorrectAnswers, typedAnswerLower, ',');

    if (typedAnswerLower === "") {
      answerDiv.style.display = "none";
    } else if (incorrectListAnswers.length === 0) {
      answerDiv.classList.add("incorrect");
    } else if (incorrectList.length === 0) {
      answerDiv.classList.add("correct");
	} else if (incorrectList.length > 0) {
      answerDiv.classList.add("incorrect");
    } else {
	  answerDiv.classList.add("incorrect");
    }

	const cardDiv = document.getElementById('card-back');
	const incdiv = document.createElement('div');
	incdiv.style = 'width: 100%; text-align: center; margin-top: 12px;';
	cardDiv.insertBefore(incdiv, cardDiv.firstChild);
	for (const ans of incorrectList)
	{
		if (ans === '') continue;

		const span = document.createElement('span');
        span.innerHTML = ans;
		span.classList.add('inputBox');
		span.classList.add('incorrect');
		span.style = 'width: fit-content; padding: 8px 12px 8px 12px; border-radius: 2px; margin-right: 8px;';
        incdiv.appendChild(span);
	}

	const corrdiv = document.createElement('div');
	corrdiv.style = 'width: 100%; text-align: center;';
	cardDiv.insertBefore(corrdiv, incdiv);
	for (const ans of correctAnswers)
	{
		if (!answersSplit.includes(ans)) continue;

		const span = document.createElement('span');
        span.innerHTML = ans;
		span.classList.add('inputBox');
		span.classList.add('correct');
		span.style = 'width: fit-content; padding: 8px 12px 8px 12px; border-radius: 2px; margin-right: 8px;';
        corrdiv.appendChild(span);
	}
  }
</script>

<!-- Generate tooltips -->
<script>
  function setTooltips(tags, text) {
    for (var i = 0; i < tags.length; i++) {
      tags[i].setAttribute("title", text);
    }
  }

  var kanji = document.getElementsByTagName("kanji");
  var radicals = document.getElementsByTagName("radical");
  var vocab = document.getElementsByTagName("vocab");
  var reading = document.getElementsByTagName("reading");

  setTooltips(kanji, "kanji");
  setTooltips(radicals, "radical");
  setTooltips(vocab, "vocab");
  setTooltips(reading, "reading");
</script>

AllChanges_meaning_front.js

<div id="card-front">
  <div id="quest">
    <div id="quest-display">
      <span id="quest-char">
        {{Characters}}
      </span>
	</div>
    <div id="quest-name"></div>
    <div class="input">
      {{type:Do_Not_Modify}}
    </div>
  </div>
</div>

<script>
 var injectScript = (src) => {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.async = true;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    };

  var shrink = () => {
        var textSpan = document.getElementById("quest-char");
        var textDiv = document.getElementById("quest");
		if (!textSpan || !textDiv)
			return;
		   
        var size = 144;
        textSpan.style.fontSize = size + 'px';

		while (textSpan.offsetWidth > textDiv.offsetWidth)
		{
			textSpan.style.fontSize = parseInt(textSpan.style.fontSize.replace('px', '')) - 32 + 'px';
		}
		textSpan.style.fontSize = parseInt(textSpan.style.fontSize.replace('px', '')) - 8 + 'px';
    }

  shrink();

  var questName = "{{Card}}";
  if ("{{Object_Type}}" === "Radical") {
    questName = "Name";
  }

  var questNameDiv = document.getElementById("quest-name");
  questNameDiv.innerHTML = "{{Object_Type}} <b>" + questName + "</b>";

  if ("{{Card}}" === "Meaning") {
    questNameDiv.classList.add("quest");
  } else if ("{{Card}}" === "Reading") {
    questNameDiv.classList.add("quest2");
  }

  var questDisplayDiv = document.getElementById("quest-display");

  if ("{{Object_Type}}" == "Radical") {
    questDisplayDiv.classList.add("radical");
  } else if ("{{Object_Type}}" == "Kanji") {
    questDisplayDiv.classList.add("kanji");
  } else if ("{{Object_Type}}" == "Vocabulary") {
    questDisplayDiv.classList.add("vocab");
  }

  var answerDiv = document.getElementById("typeans");
  if (answerDiv !== null) {
    answerDiv.setAttribute("placeholder", "Your Response");
  }
</script>

AllChanges_reading_back.js

{{FrontSide}}

<div id="card-back">
  <div id="readings">
    <h2>Readings</h2>
    <div class="flex-container">
      <div id="onyomi-readings" class="flex-item">
        <h3>On'yomi</h3>
        <p>{{Reading_Onyomi}}</p>
      </div>

      <div id="kunyomi-readings" class="flex-item">
        <h3>Kun'yomi</h3>
        <p>{{Reading_Kunyomi}}</p>
      </div>

      <div id="nanori-readings" class="flex-item">
        <h3>Nanori</h3>
        <p>{{Reading_Nanori}}</p>
      </div>

      <div id="other-readings" class="flex-item">
        <p>{{Reading}}</p>
      </div>
    </div>
    <div id="reading-audios">{{Audio}}</div>
  </div>

  <div id="reading-mnemonic">
    <h2>Reading Mnemonic</h2>
    <p>{{Reading_Mnemonic}}</p>
    <p id="reading-mnemonic-hint" class="mnemonic-hint">{{Reading_Info}}</p>
  </div>

  <div id="meanings">
    <h2>Meanings</h2>
    <p>{{Meaning}}</p>
  </div>

  <div id="components">
    <h2>Components</h2>
    <div id="component-data" class="flex-container"></div>
  </div>

  <div id="context-sentences">
    <h2>Context Sentences</h2>
  </div>

  <div id="meaning-mnemonic">
    <h2>Meaning Mnemonic</h2>
    <p>{{Meaning_Mnemonic}}</p>
    <p id="meaning-mnemonic-hint" class="mnemonic-hint">{{Meaning_Info}}</p>
  </div>
</div>

<!-- Insert speech type into meanings -->
<script>
  var div = document.getElementById("meanings");
  if (`{{Speech_Type}}` !== "") {
    var element = document.createElement("p");
    element.innerHTML = `<p>Part of Speech: {{Speech_Type}}`;
    div.appendChild(element);
  }
</script>

<!-- Add context sentences -->
<script>
  var div = document.getElementById("context-sentences");

  function appendContextSentence(jp, en) {
    if (jp !== "") {
      var element = document.createElement("p");
      element.innerHTML = "<p>" + jp + "</br>" + en + "</p>";
      div.appendChild(element);
    }
  }

  appendContextSentence(`{{Context_jp}}`, `{{Context_en}}`);
  appendContextSentence(`{{Context_jp_2}}`, `{{Context_en_2}}`);
  appendContextSentence(`{{Context_jp_3}}`, `{{Context_en_3}}`);

  if (
    `{{Context_jp}}{{Context_en}}{{Context_jp_2}}{{Context_en_2}}{{Context_jp_3}}{{Context_en_3}}`.trim() ===
    ""
  ) {
    div.style.display = "none";
  }
</script>

<!-- Hide empty reading sections -->
<script>
  function disable_reading_div(id, readings) {
    var div = document.getElementById(id);
    if (readings === "") {
      div.style.display = "none";
    } else {
      div.style.display = "";
    }
  }

  disable_reading_div("onyomi-readings", `{{Reading_Onyomi}}`);
  disable_reading_div("kunyomi-readings", `{{Reading_Kunyomi}}`);
  disable_reading_div("nanori-readings", `{{Reading_Nanori}}`);
  disable_reading_div("other-readings", `{{Reading}}`);
  disable_reading_div(
    "readings",
    `{{Reading_Onyomi}}{{Reading_Kunyomi}}{{Reading_Nanori}}{{Reading}}`
  );
</script>

<!-- Populate components -->
<script>
  var components = `{{Components}}`.split(", ").filter((e) => e !== "");
  var componentNames = `{{Component_Names}}`
    .split(", ")
    .filter((e) => e !== "");
  var componentTypes = `{{Component_Types}}`
    .split(", ")
    .filter((e) => e !== "");

  var componentDataDiv = document.getElementById("component-data");

  for (var i = 0; i < components.length; i++) {
    var textDiv = document.createElement(componentTypes[i]);

    textDiv.innerHTML = components[i];

    var nameDiv = document.createElement("span");
    nameDiv.innerHTML = componentNames[i];

    var componentDiv = document.createElement("div");
    componentDiv.classList.add("component");
    componentDiv.classList.add("flex-item");

    componentDiv.appendChild(textDiv);
    componentDiv.appendChild(nameDiv);

    componentDataDiv.appendChild(componentDiv);
  }

  var componentsDiv = document.getElementById("components");
  if (components.length > 0) {
    componentsDiv.style.display = "";
  } else {
    componentsDiv.style.display = "none";
  }
</script>

<!-- Hide empty mnemonics -->
<script>
  function disableDiv(id, mnemonic) {
    var div = document.getElementById(id);
    if (mnemonic === "") {
      div.style.display = "none";
    } else {
      div.style.display = "";
    }
  }

  var meaningMnemonic = `{{Meaning_Mnemonic}}`;
  var meaningHint = `{{Meaning_Info}}`;
  var readingMnemonic = `{{Reading_Mnemonic}}`;
  var readingHint = `{{Reading_Info}}`;

  disableDiv("meaning-mnemonic", meaningMnemonic);
  disableDiv("meaning-mnemonic-hint", meaningHint);
  disableDiv("reading-mnemonic", readingMnemonic);
  disableDiv("reading-mnemonic-hint", readingHint);
</script>

<!-- Check the answer -->
<script>
  //some addons read the script too early:
  if (document.getElementById("typeans")) {
    var typedAnswer = "";
    var typedAnswer_element = document.getElementById("typeans");
    if (typedAnswer_element.querySelector(".typegiven")) {
      // the "typegiven" class exists only on iphone:
      typedAnswer = typedAnswer_element
        .querySelector(".typegiven")
        .querySelector(".typeBad").innerText;
    } else if (typedAnswer_element.querySelector(".typeBad")) {
      //for pc and android:
      typedAnswer = typedAnswer_element.querySelector(".typeBad").innerText;
    }

    typedAnswerLower = typedAnswer.toLowerCase();

    var meaningWhitelist = `{{Meaning_Whitelist}}`.toLowerCase().split(", ");
    var meaningBlacklist = `{{Meaning_Blacklist}}`.toLowerCase().split(", ");
    var readingWhitelist = `{{Reading_Whitelist}}`.toLowerCase().split(", ");
    var readingBlacklist = `{{Reading_Blacklist}}`.toLowerCase().split(", ");

    var correctAnswers = [];
    var incorrectAnswers = [];
    if (`{{Card}}` === "Meaning") {
      correctAnswers = meaningWhitelist;
      incorrectAnswers = meaningBlacklist;
    } else if (`{{Card}}` === "Reading") {
      correctAnswers = readingWhitelist;
      incorrectAnswers = readingBlacklist;
    }

    var answerDiv = document.createElement("div");
    answerDiv.setAttribute("id", "typeans");
    answerDiv.innerHTML = typedAnswer;
    document.getElementById("typeans").replaceWith(answerDiv);

    function answerListIncorrect(correctArr, answerStr, separator)
	{
		const respArr = answerStr.split(separator);
		let incorrectList = [];
		for (let r of respArr)
		{
			const trimmed = r.trim();
			if (!correctArr.includes(trimmed))
			{
				incorrectList.push(trimmed);
			}
		}
		return incorrectList;
	}
	 
	var answersSplit = typedAnswerLower.split(' ');
    var incorrectList = answerListIncorrect(correctAnswers, typedAnswerLower, ' ');
	var incorrectListAnswers = answerListIncorrect(incorrectAnswers, typedAnswerLower, ' ');

    if (typedAnswerLower === "") {
      answerDiv.style.display = "none";
    } else if (incorrectListAnswers.length === 0) {
      answerDiv.classList.add("incorrect");
    } else if (incorrectList.length === 0) {
      answerDiv.classList.add("correct");
	} else if (incorrectList.length > 0) {
      answerDiv.classList.add("incorrect");
    } else {
	  answerDiv.classList.add("incorrect");
    }

	const cardDiv = document.getElementById('card-back');
	const incdiv = document.createElement('div');
	incdiv.style = 'width: 100%; text-align: center; margin-top: 12px;';
	cardDiv.insertBefore(incdiv, cardDiv.firstChild);
	for (const ans of incorrectList)
	{
		if (ans === '') continue;

		const span = document.createElement('span');
        span.innerHTML = ans;
		span.classList.add('inputBox');
		span.classList.add('incorrect');
		span.style = 'width: fit-content; padding: 8px 12px 8px 12px; border-radius: 2px; margin-right: 8px;';
        incdiv.appendChild(span);
	}

	const corrdiv = document.createElement('div');
	corrdiv.style = 'width: 100%; text-align: center;';
	cardDiv.insertBefore(corrdiv, incdiv);
	for (const ans of correctAnswers)
	{
		if (!answersSplit.includes(ans)) continue;

		const span = document.createElement('span');
        span.innerHTML = ans;
		span.classList.add('inputBox');
		span.classList.add('correct');
		span.style = 'width: fit-content; padding: 8px 12px 8px 12px; border-radius: 2px; margin-right: 8px;';
        corrdiv.appendChild(span);
	}
}

</script>

<!-- Generate tooltips -->
<script>
  function setTooltips(tags, text) {
    for (var i = 0; i < tags.length; i++) {
      tags[i].setAttribute("title", text);
    }
  }

  var kanji = document.getElementsByTagName("kanji");
  var radicals = document.getElementsByTagName("radical");
  var vocab = document.getElementsByTagName("vocab");
  var reading = document.getElementsByTagName("reading");

  setTooltips(kanji, "kanji");
  setTooltips(radicals, "radical");
  setTooltips(vocab, "vocab");
  setTooltips(reading, "reading");
</script>

AllChanges_reading_front.js

<div id="card-front">
  <div id="quest">
	<div id="quest-display">
      <span id="quest-char">
        {{Characters}}
      </span>
	</div>
    <div id="quest-name"></div>
    <div class="input" id="quest_input">
      {{type:Do_Not_Modify}}
    </div>
  </div>
</div>

<script>
 var injectScript = (src) => {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.async = true;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    };
 var shrink = () => {
        var textSpan = document.getElementById("quest-char");
        var textDiv = document.getElementById("quest");
		if (!textSpan || !textDiv)
			return;
		
        textSpan.style.fontSize = 144 + 'px';

		while (textSpan.offsetWidth > textDiv.offsetWidth)
		{
			textSpan.style.fontSize = parseInt(textSpan.style.fontSize.replace('px', '')) - 32 + 'px';
		}
		textSpan.style.fontSize = parseInt(textSpan.style.fontSize.replace('px', '')) - 8 + 'px';
    }

  (async () => {
        if (typeof eviter_offset === 'undefined') {
            await injectScript('_wanakana.min.js');
        }
	if (!wanakana) return;
        var inputDiv = document.getElementById('quest_input');  
        const inputs = inputDiv.getElementsByTagName('input');
		for(let input of inputs)
		{
			wanakana.bind(input);
		    input.placeholder = 'かな';
		}
		shrink();
    })();

  var questName = "{{Card}}";
  if ("{{Object_Type}}" === "Radical") {
    questName = "Name";
  }

  var questNameDiv = document.getElementById("quest-name");
  questNameDiv.innerHTML = "{{Object_Type}} <b>" + questName + "</b>";

  if ("{{Card}}" === "Meaning") {
    questNameDiv.classList.add("quest");
  } else if ("{{Card}}" === "Reading") {
    questNameDiv.classList.add("quest2");
  }

  var questDisplayDiv = document.getElementById("quest-display");

  if ("{{Object_Type}}" == "Radical") {
    questDisplayDiv.classList.add("radical");
  } else if ("{{Object_Type}}" == "Kanji") {
    questDisplayDiv.classList.add("kanji");
  } else if ("{{Object_Type}}" == "Vocabulary") {
    questDisplayDiv.classList.add("vocab");
  }

  var answerDiv = document.getElementById("typeans");
  if (answerDiv !== null) {
    answerDiv.setAttribute("placeholder", "Your Response");
  }
</script>

How to install:

1 - In Anki, go to tools at the top > "Manage Note Types" > select "Wanikani Meaning + Reading Model" and click "cards..." at the right side.

2 - Replace all card models with the files above (look at the menu on the top of the window). For example: Copy the contents of the "AllChanges_reading_back.js" file and replace everything here with it:

Errors are always there on the back templates, don't worry about them.

3 - Click save and sync your changes if you so wish.

Just one more thing to do if you want the automatic Kana conversion:

1 - Go here: WanaKana. Click the download button and download the .js file.
If clicking on download just redirects you to a text page, right click the page and click "Save As..." and save the file anywhere.
IMPORTANT: Make sure to save the file named exactly "_wanakana.min.js", underline and all, or it won't work.

2 - Go to your media folder, for me (windows) it was "C:\Users\myusername\AppData\Roaming\Anki2\yourankiprofilename\collection.media", it's a folder with a bunch of audio and font files used by the deck, and paste the file there.

All done, have fun :)

I'm not too knowledgeable, but how do I implement only the auto character resizing?

I already did the WanaKana auto-input from hemmer a while back. Also, what do you mean by "Reordered the Back template of the cards to be more similar to the Wanikani site (reading-related things come first in reading cards, same for meaning).", not sure I understand.

Thank you!

I'm not too knowledgeable, but how do I implement only the auto character resizing?

I already did the WanaKana auto-input from hemmer a while back. Also, what do you mean by "Reordered the Back template of the cards to be more similar to the Wanikani site (reading-related things come first in reading cards, same for meaning).", not sure I understand.

Thank you!

Heya, about the reordering part:
What i did was basically make things that are related to the card in question appear first, like on a reading card the first thing shown to you when you answer is reading information, as opposed to the original where the meanings would come first regardless, so you would have to scroll all the way down to see the reading related info.

About the auto character resizing you can use this piece of code right here:

var shrink = () => {
        var textSpan = document.getElementById("quest-char");
        var textDiv = document.getElementById("quest");
	if (!textSpan || !textDiv)
		return;
		
        textSpan.style.fontSize = 144 + 'px';

	while (textSpan.offsetWidth > textDiv.offsetWidth)
	{
		textSpan.style.fontSize = parseInt(textSpan.style.fontSize.replace('px', '')) - 32 + 'px';
	}
	textSpan.style.fontSize = parseInt(textSpan.style.fontSize.replace('px', '')) - 8 + 'px';
}
shrink();

Go to your front card templates and paste it right below the first <script> you find. Also, be aware that i didn't test the auto resizing that much, only ever used it in my pc and in my old phone, so it could not work that well, doesn't hurt to try though.

If you have any problems report them here and i can try to fix them.

Thank you for the reply!

seems like it's not working how I imagined it

here's where I pasted it.

Hi, how would I do the automatic text to kana in mac? I've downloaded the .js file, but I don't really know where to put it

for anyone that wants to use dark and/or light mode on pc and/or mobile, i modified the style tab so you can use both modes respectively. i also adjusted this little annoyance:

to apply the changes follow the instructions above and then replace the contents in the style tab with the following below.
replace the style in

Wanikani Meaning + Reading Model with

@font-face {
  font-family: "Hiragino Kaku Gothic Pro W3";
  src: url("_hirakakyprow3.otf");
}

:root {
  --background-color-light: #ededed;
  --background-color-dark: #a0a0a0;

  --font-color-dark: #444444;
  --font-color-light: white;

  --border-color: darkgray;

  --shadow-color: darkgray;

  --kanji-color: #f100a1;
  --kanji-color-dark: #b30077;

  --reading-color: #484848;
  --reading-color-dark: #0a0a0a;

  --radical-color: #00a0f1;
  --radical-color-dark: #0077b2;

  --vocab-color: #9e00ed;
  --vocab-color-dark: #7600b1;

  --incorrect-color: #f03;
  --correct-color: #88cc00;
}

.card {
  font-family: arial;
  color: black;
  background-color: white;
  line-height: 1.6;
  margin: 0px;
  padding: 0px;
  border-color: var(--border-color);
}

#card-front {
  font-size: 20px;
  text-align: center;
  line-height: normal;
}

#card-back {
  font-size: 15px;
  text-align: left;
  max-width: 80ch;
  margin: auto;
  padding: 2%;
}

kanji {
  background-color: var(--kanji-color);
  box-shadow: 2px 2px var(--kanji-color-dark);
}

reading {
  background-color: var(--reading-color);
  box-shadow: 2px 2px var(--reading-color-dark);
}

radical {
  background-color: var(--radical-color);
  box-shadow: 2px 2px var(--radical-color-dark);
}

vocabulary {
  background-color: var(--vocab-color);
  box-shadow: 2px 2px var(--vocab-color-dark);
}

kanji,
reading,
radical,
vocabulary,
.primary-highlight {
  color: var(--font-color-light);
  padding: 3px;
  margin: 0px 2px 0px 0px;
  border-radius: 4px;
}

/* front of card */

.quest {
  background-image: linear-gradient(to bottom, #efefef, #e0e0e0);
  box-shadow: 0px 1px 5px 0px var(--shadow-color);
  color: black;
  line-height: 40px;
}

.quest2 {
  background-image: linear-gradient(to bottom, #323232, #000000);
  color: white;
  line-height: 40px;
}

#typeans {
  box-shadow: 0px 2px 3px 0px var(--shadow-color);
  line-height: 40px;
  text-align: center;
  height: 40px;
  border: 0;
  outline-style: none;
  font-family: arial;
  margin: 0px;
}

/* back of card */

#card-back h2 {
  border-bottom: 1px solid;
}

.correct {
  background: var(--correct-color);
  color: var(--font-color-light);
}

.incorrect {
  background: var(--incorrect-color);
  color: var(--font-color-light);
}

#meanings p {
  font-weight: bold;
}

#reading-audios {
  text-align: center;
}

#components {
  display: inline;
}

#components:empty {
  display: none;
}

.component radical,
.component kanji,
.component vocabulary {
  font-size: 30px;
  margin: px;
}

.component span {
  font-size: 20px;
  margin: 5px;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-item {
  flex-direction: column;
}

.mnemonic-hint {
  font-style: italic;
  background-color: var(--background-color-dark);
  margin: 1% 0;
  padding: 2%;
}

.radical {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 100px;
  color: var(--font-color-light);
  background-color: var(--radical-color);
}

.kanji {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 180px;
  color: var(--font-color-light);
  background-color: var(--kanji-color);
}

.vocab {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 150px;
  color: var(--font-color-light);
  background-color: var(--vocab-color);
}

.hiragana {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 25 px;
}

.text {
  font-family: "Ubuntu Light", "HelveticaNeueLT Std Lt";
  font-style: "italics";
}

.radicon {
  color: var(--font-color-light);
  font-size: 100px;
}

#fixed-bottom {
  position: fixed;
  bottom: 0px;
  float: left;
}

/*
  Icon Font: WakaFont
*/

@font-face {
  font-family: "WakaFont";
  src: url("_WakaFont.eot");
  src: url("_WakaFont.eot?#iefix") format("embedded-opentype"),
    url("_WakaFont.woff") format("woff"),
    url("_WakaFont.ttf") format("truetype"),
    url("_WakaFont.svg#WakaFont") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "WakaFont";
    src: url("_WakaFont.svg#WakaFont") format("svg");
  }
}

[data-icon]:before {
  content: attr(data-icon);
}

[data-icon]:before,
.radical-animal:before,
.radical-arrows:before,
.radical-bar:before,
.radical-bear:before,
.radical-beggar:before,
.radical-black-hole:before,
.radical-blackjack:before,
.radical-boob:before,
.radical-bookshelf:before,
.radical-butcher:before,
.radical-cactus:before,
.radical-cat-pirate:before,
.radical-chester:before,
.radical-chinese:before,
.radical-circus:before,
.radical-cleat:before,
.radical-cloak:before,
.radical-clown:before,
.radical-coffin:before,
.radical-comb:before,
.radical-corn:before,
.radical-cow-god:before,
.radical-creeper:before,
.radical-death-star:before,
.radical-egg:before,
.radical-explosion:before,
.radical-fish-stick:before,
.radical-fish-tail:before,
.radical-flowers:before,
.radical-football:before,
.radical-four:before,
.radical-gambler:before,
.radical-geoduck:before,
.radical-grass:before,
.radical-greenhouse:before,
.radical-gun:before,
.radical-hat:before,
.radical-hercules:before,
.radical-hick:before,
.radical-hills:before,
.radical-horns:before,
.radical-key:before,
.radical-kick:before,
.radical-lantern:before,
.radical-leaf:before,
.radical-mohawk:before,
.radical-morning:before,
.radical-mustache:before,
.radical-nailbat:before,
.radical-ox:before,
.radical-pi:before,
.radical-poem:before,
.radical-pool:before,
.radical-pope:before,
.radical-potato:before,
.radical-propaganda:before,
.radical-psychopath:before,
.radical-ribs:before,
.radical-rocket:before,
.radical-roof:before,
.radical-sauron:before,
.radical-saw:before,
.radical-shark:before,
.radical-sick:before,
.radical-signpost:before,
.radical-slice:before,
.radical-slinky:before,
.radical-sock:before,
.radical-spikes:before,
.radical-splinter:before,
.radical-squid:before,
.radical-stick:before,
.radical-superman:before,
.radical-tofu:before,
.radical-tombstone:before,
.radical-train:before,
.radical-triceratops:before,
.radical-trident:before,
.radical-tsunami:before,
.radical-umbrella:before,
.radical-viking:before,
.radical-water-slide:before,
.radical-womb:before,
.radical-worm:before,
.radical-zombie:before {
  display: inline-block;
  font-family: "WakaFont";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.radical-animal:before {
  content: "\f100";
}
.radical-arrows:before {
  content: "\f101";
}
.radical-bar:before {
  content: "\f102";
}
.radical-bear:before {
  content: "\f103";
}
.radical-beggar:before {
  content: "\f104";
}
.radical-black-hole:before {
  content: "\f105";
}
.radical-blackjack:before {
  content: "\f106";
}
.radical-boob:before {
  content: "\f107";
}
.radical-bookshelf:before {
  content: "\f108";
}
.radical-butcher:before {
  content: "\f109";
}
.radical-cactus:before {
  content: "\f10a";
}
.radical-cat-pirate:before {
  content: "\f10b";
}
.radical-chester:before {
  content: "\f10c";
}
.radical-chinese:before {
  content: "\f10d";
}
.radical-circus:before {
  content: "\f10e";
}
.radical-cleat:before {
  content: "\f10f";
}
.radical-cloak:before {
  content: "\f110";
}
.radical-clown:before {
  content: "\f111";
}
.radical-coffin:before {
  content: "\f112";
}
.radical-comb:before {
  content: "\f113";
}
.radical-corn:before {
  content: "\f114";
}
.radical-cow-god:before {
  content: "\f115";
}
.radical-creeper:before {
  content: "\f116";
}
.radical-death-star:before {
  content: "\f117";
}
.radical-egg:before {
  content: "\f118";
}
.radical-explosion:before {
  content: "\f119";
}
.radical-fish-stick:before {
  content: "\f11a";
}
.radical-fish-tail:before {
  content: "\f11b";
}
.radical-flowers:before {
  content: "\f11c";
}
.radical-football:before {
  content: "\f11d";
}
.radical-four:before {
  content: "\f11e";
}
.radical-gambler:before {
  content: "\f11f";
}
.radical-geoduck:before {
  content: "\f120";
}
.radical-grass:before {
  content: "\f121";
}
.radical-greenhouse:before {
  content: "\f122";
}
.radical-gun:before {
  content: "\f123";
}
.radical-hat:before {
  content: "\f124";
}
.radical-hercules:before {
  content: "\f125";
}
.radical-hick:before {
  content: "\f126";
}
.radical-hills:before {
  content: "\f127";
}
.radical-horns:before {
  content: "\f128";
}
.radical-key:before {
  content: "\f129";
}
.radical-kick:before {
  content: "\f12a";
}
.radical-lantern:before {
  content: "\f12b";
}
.radical-leaf:before {
  content: "\f12c";
}
.radical-mohawk:before {
  content: "\f12d";
}
.radical-morning:before {
  content: "\f12e";
}
.radical-mustache:before {
  content: "\f12f";
}
.radical-nailbat:before {
  content: "\f130";
}
.radical-ox:before {
  content: "\f131";
}
.radical-pi:before {
  content: "\f132";
}
.radical-poem:before {
  content: "\f133";
}
.radical-pool:before {
  content: "\f134";
}
.radical-pope:before {
  content: "\f135";
}
.radical-potato:before {
  content: "\f136";
}
.radical-propaganda:before {
  content: "\f137";
}
.radical-psychopath:before {
  content: "\f138";
}
.radical-ribs:before {
  content: "\f139";
}
.radical-rocket:before {
  content: "\f13a";
}
.radical-roof:before {
  content: "\f13b";
}
.radical-sauron:before {
  content: "\f13c";
}
.radical-saw:before {
  content: "\f13d";
}
.radical-shark:before {
  content: "\f13e";
}
.radical-sick:before {
  content: "\f13f";
}
.radical-signpost:before {
  content: "\f140";
}
.radical-slice:before {
  content: "\f141";
}
.radical-slinky:before {
  content: "\f142";
}
.radical-sock:before {
  content: "\f143";
}
.radical-spikes:before {
  content: "\f144";
}
.radical-splinter:before {
  content: "\f145";
}
.radical-squid:before {
  content: "\f146";
}
.radical-stick:before {
  content: "\f147";
}
.radical-superman:before {
  content: "\f148";
}
.radical-tofu:before {
  content: "\f149";
}
.radical-tombstone:before {
  content: "\f14a";
}
.radical-train:before {
  content: "\f14b";
}
.radical-triceratops:before {
  content: "\f14c";
}
.radical-trident:before {
  content: "\f14d";
}
.radical-tsunami:before {
  content: "\f14e";
}
.radical-umbrella:before {
  content: "\f14f";
}
.radical-viking:before {
  content: "\f150";
}
.radical-water-slide:before {
  content: "\f151";
}
.radical-womb:before {
  content: "\f152";
}
.radical-worm:before {
  content: "\f153";
}
.radical-zombie:before {
  content: "\f154";
}

and in

Wanikani Meaning Model with

@font-face {
  font-family: "Hiragino Kaku Gothic Pro W3";
  src: url("_hirakakyprow3.otf");
}

:root {
  --background-color-light: #ededed;
  --background-color-dark: #a0a0a0;

  --font-color-dark: #444444;
  --font-color-light: white;

  --border-color: darkgray;

  --shadow-color: darkgray;

  --kanji-color: #f100a1;
  --kanji-color-dark: #b30077;

  --reading-color: #484848;
  --reading-color-dark: #0a0a0a;

  --radical-color: #00a0f1;
  --radical-color-dark: #0077b2;

  --vocab-color: #9e00ed;
  --vocab-color-dark: #7600b1;

  --incorrect-color: #f03;
  --correct-color: #88cc00;
}

.card {
  font-family: arial;
  color: black;
  background-color: white;
  line-height: 1.6;
  margin: 0px;
  padding: 0px;
  border-color: var(--border-color);
}

#card-front {
  font-size: 20px;
  text-align: center;
  line-height: normal;
}

#card-back {
  font-size: 15px;
  text-align: left;
  max-width: 80ch;
  margin: auto;
  padding: 2%;
}

kanji {
  background-color: var(--kanji-color);
  box-shadow: 2px 2px var(--kanji-color-dark);
}

reading {
  background-color: var(--reading-color);
  box-shadow: 2px 2px var(--reading-color-dark);
}

radical {
  background-color: var(--radical-color);
  box-shadow: 2px 2px var(--radical-color-dark);
}

vocabulary {
  background-color: var(--vocab-color);
  box-shadow: 2px 2px var(--vocab-color-dark);
}

kanji,
reading,
radical,
vocabulary,
.primary-highlight {
  color: var(--font-color-light);
  padding: 3px;
  margin: 0px 2px 0px 0px;
  border-radius: 4px;
}

/* front of card */

.quest {
  background-image: linear-gradient(to bottom, #efefef, #e0e0e0);
  box-shadow: 0px 1px 5px 0px var(--shadow-color);
  color: black;
  line-height: 40px;
}

.quest2 {
  background-image: linear-gradient(to bottom, #323232, #000000);
  color: white;
  line-height: 40px;
}

#typeans {
  box-shadow: 0px 2px 3px 0px var(--shadow-color);
  line-height: 40px;
  text-align: center;
  height: 40px;
  border: 0;
  outline-style: none;
  font-family: arial;
  margin: 0px;
}

/* back of card */

#card-back h2 {
  border-bottom: 1px solid;
}

.correct {
  background: var(--correct-color);
  color: var(--font-color-light);
}

.incorrect {
  background: var(--incorrect-color);
  color: var(--font-color-light);
}

#meanings p {
  font-weight: bold;
}

#reading-audios {
  text-align: center;
}

#components {
  display: inline;
}

#components:empty {
  display: none;
}

.component radical,
.component kanji,
.component vocabulary {
  font-size: 30px;
  margin: 5px;
}

.component span {
  font-size: 20px;
  margin: 5px;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-item {
  flex-direction: column;
}

.mnemonic-hint {
  font-style: italic;
  background-color: var(--background-color-dark);
  margin: 1% 0;
  padding: 2%;
}

.radical {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 100px;
  color: var(--font-color-light);
  background-color: var(--radical-color);
}

.kanji {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 180px;
  color: var(--font-color-light);
  background-color: var(--kanji-color);
}

.vocab {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 150px;
  color: var(--font-color-light);
  background-color: var(--vocab-color);
}

.hiragana {
  font-family: "Hiragino Kaku Gothic Pro W3";
  font-size: 25 px;
}

.text {
  font-family: "Ubuntu Light", "HelveticaNeueLT Std Lt";
  font-style: "italics";
}

.radicon {
  color: var(--font-color-light);
  font-size: 100px;
}

#fixed-bottom {
  position: fixed;
  bottom: 0px;
  float: left;
}

/*
  Icon Font: WakaFont
*/

@font-face {
  font-family: "WakaFont";
  src: url("_WakaFont.eot");
  src: url("_WakaFont.eot?#iefix") format("embedded-opentype"),
    url("_WakaFont.woff") format("woff"),
    url("_WakaFont.ttf") format("truetype"),
    url("_WakaFont.svg#WakaFont") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "WakaFont";
    src: url("_WakaFont.svg#WakaFont") format("svg");
  }
}

[data-icon]:before {
  content: attr(data-icon);
}

[data-icon]:before,
.radical-animal:before,
.radical-arrows:before,
.radical-bar:before,
.radical-bear:before,
.radical-beggar:before,
.radical-black-hole:before,
.radical-blackjack:before,
.radical-boob:before,
.radical-bookshelf:before,
.radical-butcher:before,
.radical-cactus:before,
.radical-cat-pirate:before,
.radical-chester:before,
.radical-chinese:before,
.radical-circus:before,
.radical-cleat:before,
.radical-cloak:before,
.radical-clown:before,
.radical-coffin:before,
.radical-comb:before,
.radical-corn:before,
.radical-cow-god:before,
.radical-creeper:before,
.radical-death-star:before,
.radical-egg:before,
.radical-explosion:before,
.radical-fish-stick:before,
.radical-fish-tail:before,
.radical-flowers:before,
.radical-football:before,
.radical-four:before,
.radical-gambler:before,
.radical-geoduck:before,
.radical-grass:before,
.radical-greenhouse:before,
.radical-gun:before,
.radical-hat:before,
.radical-hercules:before,
.radical-hick:before,
.radical-hills:before,
.radical-horns:before,
.radical-key:before,
.radical-kick:before,
.radical-lantern:before,
.radical-leaf:before,
.radical-mohawk:before,
.radical-morning:before,
.radical-mustache:before,
.radical-nailbat:before,
.radical-ox:before,
.radical-pi:before,
.radical-poem:before,
.radical-pool:before,
.radical-pope:before,
.radical-potato:before,
.radical-propaganda:before,
.radical-psychopath:before,
.radical-ribs:before,
.radical-rocket:before,
.radical-roof:before,
.radical-sauron:before,
.radical-saw:before,
.radical-shark:before,
.radical-sick:before,
.radical-signpost:before,
.radical-slice:before,
.radical-slinky:before,
.radical-sock:before,
.radical-spikes:before,
.radical-splinter:before,
.radical-squid:before,
.radical-stick:before,
.radical-superman:before,
.radical-tofu:before,
.radical-tombstone:before,
.radical-train:before,
.radical-triceratops:before,
.radical-trident:before,
.radical-tsunami:before,
.radical-umbrella:before,
.radical-viking:before,
.radical-water-slide:before,
.radical-womb:before,
.radical-worm:before,
.radical-zombie:before {
  display: inline-block;
  font-family: "WakaFont";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.radical-animal:before {
  content: "\f100";
}
.radical-arrows:before {
  content: "\f101";
}
.radical-bar:before {
  content: "\f102";
}
.radical-bear:before {
  content: "\f103";
}
.radical-beggar:before {
  content: "\f104";
}
.radical-black-hole:before {
  content: "\f105";
}
.radical-blackjack:before {
  content: "\f106";
}
.radical-boob:before {
  content: "\f107";
}
.radical-bookshelf:before {
  content: "\f108";
}
.radical-butcher:before {
  content: "\f109";
}
.radical-cactus:before {
  content: "\f10a";
}
.radical-cat-pirate:before {
  content: "\f10b";
}
.radical-chester:before {
  content: "\f10c";
}
.radical-chinese:before {
  content: "\f10d";
}
.radical-circus:before {
  content: "\f10e";
}
.radical-cleat:before {
  content: "\f10f";
}
.radical-cloak:before {
  content: "\f110";
}
.radical-clown:before {
  content: "\f111";
}
.radical-coffin:before {
  content: "\f112";
}
.radical-comb:before {
  content: "\f113";
}
.radical-corn:before {
  content: "\f114";
}
.radical-cow-god:before {
  content: "\f115";
}
.radical-creeper:before {
  content: "\f116";
}
.radical-death-star:before {
  content: "\f117";
}
.radical-egg:before {
  content: "\f118";
}
.radical-explosion:before {
  content: "\f119";
}
.radical-fish-stick:before {
  content: "\f11a";
}
.radical-fish-tail:before {
  content: "\f11b";
}
.radical-flowers:before {
  content: "\f11c";
}
.radical-football:before {
  content: "\f11d";
}
.radical-four:before {
  content: "\f11e";
}
.radical-gambler:before {
  content: "\f11f";
}
.radical-geoduck:before {
  content: "\f120";
}
.radical-grass:before {
  content: "\f121";
}
.radical-greenhouse:before {
  content: "\f122";
}
.radical-gun:before {
  content: "\f123";
}
.radical-hat:before {
  content: "\f124";
}
.radical-hercules:before {
  content: "\f125";
}
.radical-hick:before {
  content: "\f126";
}
.radical-hills:before {
  content: "\f127";
}
.radical-horns:before {
  content: "\f128";
}
.radical-key:before {
  content: "\f129";
}
.radical-kick:before {
  content: "\f12a";
}
.radical-lantern:before {
  content: "\f12b";
}
.radical-leaf:before {
  content: "\f12c";
}
.radical-mohawk:before {
  content: "\f12d";
}
.radical-morning:before {
  content: "\f12e";
}
.radical-mustache:before {
  content: "\f12f";
}
.radical-nailbat:before {
  content: "\f130";
}
.radical-ox:before {
  content: "\f131";
}
.radical-pi:before {
  content: "\f132";
}
.radical-poem:before {
  content: "\f133";
}
.radical-pool:before {
  content: "\f134";
}
.radical-pope:before {
  content: "\f135";
}
.radical-potato:before {
  content: "\f136";
}
.radical-propaganda:before {
  content: "\f137";
}
.radical-psychopath:before {
  content: "\f138";
}
.radical-ribs:before {
  content: "\f139";
}
.radical-rocket:before {
  content: "\f13a";
}
.radical-roof:before {
  content: "\f13b";
}
.radical-sauron:before {
  content: "\f13c";
}
.radical-saw:before {
  content: "\f13d";
}
.radical-shark:before {
  content: "\f13e";
}
.radical-sick:before {
  content: "\f13f";
}
.radical-signpost:before {
  content: "\f140";
}
.radical-slice:before {
  content: "\f141";
}
.radical-slinky:before {
  content: "\f142";
}
.radical-sock:before {
  content: "\f143";
}
.radical-spikes:before {
  content: "\f144";
}
.radical-splinter:before {
  content: "\f145";
}
.radical-squid:before {
  content: "\f146";
}
.radical-stick:before {
  content: "\f147";
}
.radical-superman:before {
  content: "\f148";
}
.radical-tofu:before {
  content: "\f149";
}
.radical-tombstone:before {
  content: "\f14a";
}
.radical-train:before {
  content: "\f14b";
}
.radical-triceratops:before {
  content: "\f14c";
}
.radical-trident:before {
  content: "\f14d";
}
.radical-tsunami:before {
  content: "\f14e";
}
.radical-umbrella:before {
  content: "\f14f";
}
.radical-viking:before {
  content: "\f150";
}
.radical-water-slide:before {
  content: "\f151";
}
.radical-womb:before {
  content: "\f152";
}
.radical-worm:before {
  content: "\f153";
}
.radical-zombie:before {
  content: "\f154";
}

make sure to @ me in case something broken or needs adjustments.

Nice work, thanks!

Hi, how would I do the automatic text to kana in mac? I've downloaded the .js file, but I don't really know where to put it

For Mac it should be /Users/USERNAME/Library/Application Support/Anki2/ANKIUSER/collection.media, e.g. USERNAME is your Mac name and ANKIUSER is the Anki username (in my case User 1)

Hi, how would I do the automatic text to kana in mac? I've downloaded the .js file, but I don't really know where to put it

For most linux distributions it should be ~/.local/share/Anki2/ANKIUSER/collection.media (atleast this is what it was for me). Where ~ is your home directory and as LinkCable mentioned, ANKIUSER is the Anki username, which was 'User 1' in my case as well.

for anyone that wants to use dark and/or light mode on pc and/or mobile, i modified the style tab so you can use both modes respectively. i also adjusted this little annoyance:

to apply the changes follow the instructions above and then replace the contents in the style tab with the following below. replace the style in

Wanikani Meaning + Reading Model with
and in

Wanikani Meaning Model with
make sure to @ me in case something broken or needs adjustments.

Hi, would you happen to know how to auto resize text for long words on mobile. I've tried the above code but it doesnt seem to work for me? Also on mobile the answer box does not extend to the full length of the screen. Any help would great. Thank you all.

Thank you so much for the work you put in!!

I just have a rather rudimentary question; the first set of changes to Back and Front are only applied in "WaniKani Meaning + Reading" right? Do I also need to do the same in "WaniKani Meaning Model"?
Not talking about the style ones, but the first set of changes

Anyone who knows, pls tell
Thanks again.

Edit: checked again; don't think I need to - so silly of me. Computer's not my subject but oh the things I have to do for Japanese

in order to make the shrink function works I added:

#quest-char {
	white-space: nowrap;
}

to the styling field

Thanks for this, Great job

If anybody want to use the night mode just add:

.nightMode #card-back {
	color: white;
}
.nightMode .correct {
	background: #659900;
}
.nightMode #meaning-mnemonic-hint,
.nightMode #reading-mnemonic-hint {
	color: #505050;
}

to the cards styles

great job, I looked for the Anki Wanikani deck version like you had but can't find where to download it.

https://discord.gg/gR7VuVbhXr

…

On Sun, Aug 20, 2023 at 7:57 PM Abderrahmantbs ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ great job, I looked for the Anki Wanikani deck but can't find where to download it. — Reply to this email directly, view it on GitHub <https://gist.github.com/daxav/ffa5f857300a145d76a9e38cf620d947#gistcomment-4666182> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHV6VLENST5GLIV5M4TUWLTXWH3TJBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTAOBRGY4DENZSU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

-- Regards, J. Nikolai Tamayo