Skip to content

Other (TODO)

Design Decisions

PC Template Design Decisions

  • everything should be available to the user even for words with very long definitions
    • the definitions are below everything specifically due to that
    • potential issue: people who speed through cards
    • potential solution: use theme
  • front side has no guarantee to be consistent
    • thus, for vocab cards, the word is repeated again below the line
    • similarly, for sentence cards, the sentence is repeated again
    • also see: cardtypes.md
  • word and pitch accent are on separate lines
    • because both can expand very far to the left/right
  • minimize vertical space taken from word info / image
    • if certain elements are removed, can result in an uneven shape
    • however, this is preferable over an even shape because it minimizes vertical space
    • TODO option to have a consistent shape?

Mobile Template Design Decisions

  • make definition show up ASAP, i.e. by the first quarter of the screen

    • this means elements that were previously above the definition on the PC version, like the audio buttons, image, and sentence, is now below the definition

    • unfortunately, putting the sentence above the definition can easily take up a lot of room

      • the limited space for mobile users makes placing the definition above the sentence actually more important, otherwise the sentence can easily push down the bulk of the definition (and thus you must scroll to see the definition)
      • comes at the cost of potentially not being able to see the sentence without scrolling

  • the image is small by design

    • otherwise, will take up too much room or will require scrolling to see
    • goal is to always be able to immediately see the image on card flip

  • replace collapsible sections with tabs for easier mobile navigation, and to prevent unnecessary scrolling

Comment field

Similarly to the Key field, this field will not be used in any card template. In other words, this is a place where you can write down notes without affecting the card itself. I personally like using this field to test handlebars from Yomitan.

This is named Comment in reference to comments in code (comments do not change the execution of the code).

Remove the "(N/A)" on cards with no pitch accents

New in version 0.11.0.0 (latest version: 0.12.0.0-prerelease-19)

If the word has no pitch accent, the pitch accent is usually displayed as (N/A). This indicator can be removed with the following CSS:

.dh-left__word-pitch-text:empty:before {
  content: ""
}

Removing the furigana on the word reading

TODO image

The following CSS removes the furigana on the word reading, while keeping the furigana on the kanjis within hover.

.dh-left__reading > ruby > rt {
  display: none;
}

Changing colors

Most color changes can be done by simply overriding a CSS variable. These variables are shown at the very top of the main CSS sheet. For example, --accent is the variable that specifies the main accent color of the card, as well as the color of the text when bolded. To override this variable, place this at the end of the styles sheet:

:root {
  --accent: #ff1fd1; /* hot pink */
}

.night_mode {
  --accent: #ff7777; /* light red */
}

Warning

To change any variable color for dark mode, you cannot use :root, even if you are only setting the color for night mode. You must use .night_mode.

For example, doing the following will NOT change the accent for night mode: 

:root {
  /* only changes light mode accent, and will NOT change dark mode accent! */
  --accent: #ff7777;
}

You must do this instead: 

/* changes the color for both light and dark mode */
:root {
  --accent: #ff7777;
}
.night_mode {
  --accent: #ff7777;
}

Removing the word / sentence at the top of the back side

New in version 0.12.0.0 (latest version: 0.12.0.0-prerelease-19)

TODO image

TODO image

For users who are only using one card type (e.g. only vocab cards with no sentence cards, TSCs, or anything else), it might be better to remove the tested content and the line below it.

The tested content is shown at the back by default to allow the user to differentiate between card types on both sides of the card. However, this take up extra vertical space which is unnecessary if you are only using one card type. This can be hidden with the following CSS:

.jpmn--back > .card-main .expression-wrapper {
  display: none;
}
.jpmn--back > .card-main .answer-border {
  display: none;
}

Mobile Unbolded Text

By default, most text that would be bolded on desktop is unbolded in mobile. This is because the bolded text makes the kanji feel much more squished together, especially on Android where the custom bold font cannot be used. Additionally, the bolded text is still highlighted in the accent color of the note, so the text still stands out compared to other text.

If you want to bold the text again, use the following CSS:

(TODO link to extra/style.scss and all)

@media (max-width: 620px) {
  :root {
    --bold-font-weight: bold;
  }
}
Last update: May 15, 2024