Skip to content

JP Resources

A collection of tips and tricks, primarily related to CSS, Yomitan templates, and ShareX. Other resources can be found to the left sidebar.

This page was inspired by Marv's resources page, which has a bunch of different but equally awesome resources. I highly recommend checking it out!

If you encounter any problems, have any questions, etc., feel free to contact me on discord aquafina_water_bottle, or submit an issue. I exist on the TheMoeWay and Refold (Japanese) servers.

Master Project List

This contains the list of all my current projects that relate to learning Japanese.

  • jp-mining-note

    jp-mining-note is a highly customizable Anki card template for studying Japanese, designed to be visually appealing and simple to use without sacrificing functionality. Easily paired with most automatic card creation workflows, this aims to make your experience with Anki as smooth as possible.

    • JPMN Manager

      JPMN Manager is a simple Anki add-on that makes it possible to seemlessly install and update jp-mining-note, and makes working with the note a little easier.

  • Local Audio Server for Yomitan

    This Anki add-on runs a local server of which Yomitan can fetch audio files from, using a database containing over 200,000 unique expressions. With this setup, you are able to create Anki cards nearly instantaneously, and get word audio without a working internet connection.

  • JPMN Handlebars Package

    Instructions on how to use the JPMN handlebars for any note type, not just jp-mining-note. Most notably, these handlebars make it very easy to select and export dictionaries into Anki.

  • All Anki note templates I can find

    I catalogue all note templates I can possibly find (that isn't jp-mining-note, and made for learning Japanese) here.

CSS (Yomitan)

How-To: Add Custom CSS In Yomitan

To add custom CSS in Yomitan, do the following:

  1. Head over to Yomitan settings (Yomitan extension marker -> cogwheel)
  2. Go to Appearance → Configure custom CSS...
  3. Add the CSS to the top section.
  4. Close the window.
Demo (click here)

how to add custom css to Yomitan

Not selecting or copying furigana

If you want to select / copy the main word within Yomitan without copying the furigana, you can use the following CSS:

.headword-term ruby rt {
  user-select: none;
}

Note

The above is actually general enough to use for Anki cards itself, say with the following CSS: 

ruby rt {
  user-select: none;
}

Limiting the number of frequency lists

/* Only shows the first 2 frequency lists */
span.frequency-group-item:nth-child(n+3) {
  display: none;
}
(Thanks Marv#5144 for the CSS. Original message on TMW server)
Demo (click here)

limit frequencies demo

Limiting the number of pitch accent dictionaries

The following CSS displays only the first 2 pitch accent dictionaries: 

/* Only shows the first 2 pitch accent dictionaries */
li.pronunciation-group:nth-child(n+3) {
  display: none;
}

Make the pitch accent dictionary text a bit grey by default, and to make specifically the "NHK" and "大辞泉" white (change these two to any dictionary you find to be of higher quality) 

/* Greys out all pitch accent dictionary names */
/* Sets NHK and 大辞泉 pitch accent dictionaries to a white name */
.tag[data-category="pronunciation-dictionary"] {
  --tag-text-color: #c8bfdb;
}
.tag[data-details="大辞泉"], .tag[data-details="NHK"] {
  --tag-text-color: #FFFFFF;
}
Demo (click here)

limit pitch accent dictionaries demo

Hide the dictionary, but allow it to be used by Anki

The default way to hide a dictionary is by disabling the dictionary under Yomitan's Dictionaries section. However, if you disable the dictionary, you cannot export it into Anki, which is a problem if you are using a bilingual profile but you want to export monolingual definitions.

Steps:

  1. Ensure that the dictionary is enabled in your Yomitan profile.
  2. Add the following CSS for the desired dictionaries (this has to be done for each individual dictionary):
li.definition-item[data-dictionary='DICTIONARY'] {
  display: none;
}
Example CSS for JMdict (click here) 
li.definition-item[data-dictionary='JMdict (English)'] {
  display: none;
}
Demo (click here)

hide dictionary in Yomitan

Hide bilingual definitions until hover

Add the following CSS for the desired dictionaries (this has to be done for each individual dictionary): 

li.definition-item[data-dictionary='DICTIONARY'] .gloss-list {
  opacity: 0;
}
li.definition-item[data-dictionary='DICTIONARY']:hover .gloss-list {
  opacity: 1;
}
Example CSS for JMdict (click here) 
li.definition-item[data-dictionary='JMdict (English)'] .gloss-list {
  opacity: 0;
}
li.definition-item[data-dictionary='JMdict (English)']:hover .gloss-list {
  opacity: 1;
}
Demo (click here)

hide bilingual dictionaries until hover

Remove the "Add Reading" button

This removes the small green button to add the reading.

button[title^="Add reading"] {
  display:none;
}
Demo (click here)

remove add reading button
Left: without CSS. Right: with CSS.

Coloring Dictionaries

Darius has some CSS here that uniquely colors popular dictionaries.

CSS (Other)

left quote comparisons

Ensuring 「」 properly quotes the text

If your text contains quotes, the following CSS ensures that it is properly stylized:

.jp-quote-text {
  text-indent: -1em;
  padding-left: 1em;
}

On the example to the right, the first quote is the standard display without any custom CSS. The second quote is with the aforementioned CSS.

An example JSFiddle can be found here.

Changing the Japanese font on Discord

Note

Discord's codebase is always subject to change, so this method may not work in the future.

  1. Get BetterDiscord so you can use custom CSS.
  2. In Discord Settings → Custom CSS section, add the following: 
    :lang(ja), :lang(ja-JP) {
    --font-primary: "gg sans","YOUR-PREFERRED-FONT","Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,Osaka,"MS PGothic","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-display: var(--font-primary);
}
Example CSS for Noto Sans (click here) 
:lang(ja), :lang(ja-JP) {
    --font-primary: "gg sans","Noto Sans CJK JP","Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,Osaka,"MS PGothic","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-display: var(--font-primary);
}
Discord's default CSS (click here) 
:lang(ja), :lang(ja-JP) {
    --font-primary: "gg sans","Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,Osaka,"MS PGothic","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-display: "gg sans","Hiragino Sans","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,Osaka,"MS PGothic","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

Note

If you are using the browser version of Discord, you can also change the font with the Stylus extension. I personally don't use this, so I'll leave it to the user to figure out the settings. ;)

Changelog
  • 22/12/01: Changed Whitney to gg sans to match with Discord's new font
  • 22/12/05: Added --font-display, added missing Noto Sans to all the fonts

Yomitan Templates / Handlebars

Note

If you are using the jp-mining-note template, most things here will likely not be useful for you as the Yomitan templates that comes with the note already contains most of these features and more.

How-To: Edit Yomitan Fields

  1. Navigate to Yomitan Settings.
  2. Go to the Anki section.
  3. Select Anki card format....
Demo (click here)

how to edit yomitan fields

The above showcases option 2 of this example.

How-To: Edit Yomitan Templates (Handlebars)

  1. Navigate to Yomitan Settings.
  2. Make sure that advanced settings are turned on (bottom left corner).
  3. Go to the Anki section
  4. Select Configure Anki card templates...
Demo (click here)

how to edit yomitan templates

Grab only the first pitch accent dictionary

Adds the following Yomitan Fields:

  • {pitch-accents-single-dict}: Pitch accent in text (downstep) format
  • {pitch-accent-graphs-single-dict}: Pitch accent in svg graph format
  • {pitch-accent-positions-single-dict}: Pitch accent in positions (number) format
Template code (click here) 
{{#*inline "pitch-accent-list-single-dict"}}
    {{~#if (op ">" pitchCount 1)~}}<ol>{{~/if~}}
    {{~#eachUpTo pitches 1~}}
        {{~#each pitches~}}
            {{~#if (op ">" ../../pitchCount 1)~}}<li>{{~/if~}}
                {{~> pitch-accent-item-disambiguation~}}
                {{~> pitch-accent-item format=../../format~}}
            {{~#if (op ">" ../../pitchCount 1)~}}</li>{{~/if~}}
        {{~/each~}}
    {{~else~}}
        No pitch accent data
    {{~/eachUpTo~}}
{{/inline}}

{{#*inline "pitch-accents-single-dict"}}
    {{~> pitch-accent-list-single-dict format='text'~}}
{{/inline}}

{{#*inline "pitch-accent-graphs-single-dict"}}
    {{~> pitch-accent-list-single-dict format='graph'~}}
{{/inline}}

{{#*inline "pitch-accent-positions-single-dict"}}
    {{~> pitch-accent-list-single-dict format='position'~}}
{{/inline}}
Modified version of the above for Anime Cards (click here) 
{{#*inline "pitch-accent-list-single-dict"}}
    {{~#if (op ">" pitchCount 1)~}}{{~/if~}}
    {{~#eachUpTo pitches 1~}}
        {{~#each pitches~}}
            {{~#if (op ">" ../../pitchCount 1)~}}{{~/if~}}
                {{~> pitch-accent-item-disambiguation~}}
                {{~> pitch-accent-item format=../../format~}}
            {{~#if (op ">" ../../pitchCount 1)~}}{{~/if~}}
        {{~/each~}}
    {{~else~}}
    {{~/eachUpTo~}}
{{/inline}}

{{#*inline "pitch-accents-single-dict"}}
    {{~> pitch-accent-list-single-dict format='text'~}}
{{/inline}}

{{#*inline "pitch-accent-graphs-single-dict"}}
    {{~> pitch-accent-list-single-dict format='graph'~}}
{{/inline}}

{{#*inline "pitch-accent-positions-single-dict"}}
    {{#regexReplace "<(.|\n)*?>" ""}}{{~> pitch-accent-list-single-dict format='position'~}}{{/regexReplace}}
{{/inline}}

(Thanks An#7416 for the template code. Original message on TMW server).

Export only the selected text (only if text is selected)

Adds: {selection-text-or-glossary}

Tip

I recommend using {jpmn-primary-definition} from the JPMN Handlebars Package instead of this handlebars, because the handlebars package can do this and much more.

Allows you to export only a section of a glossary by highlighting over it, and uses the glossary by default if you don't have anything highlighted.

Template code (click here) 
{{#*inline "selection-text-or-glossary"}}
    {{~#if (op "!==" (getMedia "selectionText") "")~}}
        {{~#getMedia "selectionText"}}{{/getMedia~}}
    {{~else~}}
        {{~> glossary ~}}
    {{/if~}}
{{/inline}}

Note

Related Github issue.

Grab only the first dictionary

Adds: {glossary-first}

Tip

I recommend using {jpmn-primary-definition} from the JPMN Handlebars Package instead of this handlebars, because the handlebars package can do this and much more.

The following grabs the first dictionary (including every definition within said dictionary).

For further customization on how the first dictionary is selected (say, for automatic bilingual / monolingual separation), see the handlebars code used by jp-mining-note here.

Template code (click here) 
{{~#*inline "glossary-first"~}}

    {{~#scope~}}

        {{~#set "first-dictionary" null}}{{/set~}}

        {{~#each definition.definitions~}}
            {{~#if (op "===" null (get "first-dictionary"))~}}
                {{~#set "first-dictionary" dictionary~}}{{~/set~}}
            {{~/if~}}
        {{~/each~}}

        {{~#if (op "!==" null (get "first-dictionary"))~}}
            <div style="text-align: left;"><ol>
            {{~#each definition.definitions~}}
                {{~#if (op "===" dictionary (get "first-dictionary"))~}}
                    <li>{{~> glossary-single . brief=../brief noDictionaryTag=../noDictionaryTag ~}}</li>
                {{~/if~}}
            {{~/each~}}
            </ol></div>
        {{~/if~}}

    {{~/scope~}}

{{~/inline~}}

Automatically highlight the tested word within the sentence upon card creation

Option 1: Bold only 
{cloze-prefix}<b>{cloze-body}</b>{cloze-suffix}
Option 2: Bold + Styling (recommended)

Yomitan Fields: 

{cloze-prefix}<b>{cloze-body}</b>{cloze-suffix}

Anki Note CSS (the Styling page under the editing card templates page): 

b {
    color: #fffd9e; /* bright yellow */
}

If your card template is formatted like <div class="sentence">{{ Sentence }}</div>: 

.sentence b {
    color: #fffd9e; /* bright yellow */

    /* if you want to make the word not bolded, un-comment the following */
    /*font-weight: normal;*/
}
Option 3: Custom div

Yomitan Fields: 

{cloze-prefix}<span class="word-highlight">{cloze-body}</span>{cloze-suffix}

Anki Note CSS: 

.word-highlight {
    color: #fffd9e;
}

Note

I personally prefer using Option 2 (bold + styling) over a custom div because it makes editing the note easier. For example, if you want to edit the highlighted region, you only have to bold the desired region (say, with Ctrl+B) instead of having to edit the raw HTML of the field (say, with Ctrl+Shift+X).

See also: How to automatically highlight the targetted word within the sentence for already existing cards.

Plain-Style Sentence Furigana

Adds: {sentence-bolded-furigana-plain}

This does the following:

  • Generates plain style furigana on the sentence (e.g. 「 日本語[にほんご]」
  • Bolds the added word

To use this in Anki, add furigana: in front of the field within the template code. For example, if your field is SentenceReading, use {{furigana:SentenceReading}}.

Template code (click here) 
{{#*inline "sentence-bolded-furigana-plain"}}
    {{~#if definition.cloze~}}

        {{~#regexReplace "(<span class=\"term\">)|(</span>)" "" "g"~}}
        {{~#regexReplace "<ruby>(.+?)<rt>(.+?)</rt></ruby>" " $1[$2]" "g"~}}

            {{~#if (hasMedia "textFurigana" definition.cloze.prefix)~}}
                {{~#getMedia "textFurigana" definition.cloze.prefix escape=false}}{{/getMedia~}}
            {{~else~}}
                {{~definition.cloze.prefix~}}
            {{~/if~}}

            <b>
            {{~#if (hasMedia "textFurigana" definition.cloze.body)~}}
                {{~#getMedia "textFurigana" definition.cloze.body escape=false}}{{/getMedia~}}
            {{~else~}}
                {{~definition.cloze.body~}}
            {{~/if~}}
            </b>

            {{~#if (hasMedia "textFurigana" definition.cloze.suffix)~}}
                {{~#getMedia "textFurigana" definition.cloze.suffix escape=false}}{{/getMedia~}}
            {{~else~}}
                {{~definition.cloze.suffix~}}
            {{~/if~}}

        {{~/regexReplace~}}
        {{~/regexReplace~}}

    {{~/if~}}
{{/inline}}

Thanks to Skillesss: for the base code and DaNautics#8833 for finding the above + removing the span classes

Comparisons to alternatives (click here)

  • AJT Furigana can auto-generate furigana on card add and can add furigana to any text within a field even after a card add. However, generating furigana cannot be done within this addon on Android, as this is a PC add-on.

    Nonetheless, I recommend keeping AJT Furigana so furigana can be generated even after editing the sentence field.

  • The {furigana} helper provided by default in Yomitan does not generate plain style furigana, which makes editing furigana more difficult in Anki.

Further Reading

Official documentation om Yomitan's templates:

Example template code can be found here:

  • Helpers for individual dictionaries: here

    • This has certain extended capabilities over my template code, such as removing the first line.

  • Template code for this note: here and here

  • Old template code for this note (NO LONGER USED / MAINTAINED): here

Last update: May 15, 2024