Japanese Characters Don't Align

Anki Help
1

The problem occurs both when editing and when reviewing.
Japanese characters, both Kanji and Hiragana, don’t align, totally ignoring any CSS-prescribed alignment.

image

Here’s the code, in case it was somehow my mistake, although I doubt it given the fact that all it took to align the English text on the same card is just text-align: center;.

Card type HTML and CSS

It’s been a hot minute since I used HTML last, so forgive any bad class names or the fact that I have a whole “english” class for no reason, haha.

Front template:

<div id="kanjiDiv">
    <div class="kanji">
    {{Kanji}}
    </div>
</div>

Back template:

{{FrontSide}}
</br>
<hr id=answer>
</br>
<div id=pronounciation>
    <div class=hiragana>
        {{Pronounciation - Hiragana}}
    </div>

    <div class=romanji lang=jp>
        {{Pronounciation - Romaji}}
    </div>
</div>
</br>
<div id=meaningDiv>
    <div class=english>
    {{Meaning}}
    </div>
</div>

CSS:
(Note the obvious center alignment in .card)

.card {
  font-family: sans-serif;
  font-size: 20px;
  text-align: center;
  color: black;
  background-color: white;
}

#pronounciation .hiragana {
	font-family: Droid Sans Fallback;
	color: MidnightBlue;
	text-align: center;
}

#pronounciation .romanji {
	font-size: 18px;
	color: SlateGrey;
}

#kanjiDiv .kanji {
	font-size: 28px;
	color: black;
}

#meaningDiv .english {
	font-size: 20px;
	color: black;
}

Things I’ve tried:

  • Adding lang="jp" or lang="ja-jp" to the offending HTML elements
  • Googling. I found this one question that seemed similar, but was 4 years old and offered no solution.
  • adding text-align: center; in each of the CSS scope-things (I’m sorry about the lack of appropriate terminology, it’s been a while since I last used HTML/CSS)
  • restarting Anki
  • changing to a Japanese font - note the Hiragana part is in the font Droid Sans Fallback.

I’d love some pointers toward solving this? Would honestly be awkward if this is some trivial thing, but I always make a point of going through all the FAQs and Googling everything before posting for help, so I hope that’s not the case.

(I’m using Ubuntu 20.04 LTS, Anki Desktop 2.1.34. No errors are logged to the console or anything when this happens.)

2

Your CSS should work. Did you check if there is any HTML in the fields?

3

I made this note myself, it’s just plain text.
image

4

It seems unlikely if you typed the text yourself. But since I tried your styling and it worked for me, the only other explanation I can think of is the field content.
To see the plain text of the selected field, click on the rightmost symbol in the toolbar (three horizontal lines) and select “Edit HTML”.

1 Like
5

This is embarassing… I did create the note myself, but I copied the text from a site. Apparently it did have HTML in it. I didn’t even think of that option. It’s fixed now, thanks!

1 Like