'lang=' not working on mobile

AnkiMobile (iPhone/iPad) Help
1

lang= html not working on Anki mobile.

I have one font loaded that I use with both my Japanese and Korean cards. For the Korean cards, I have lang=“ko”, and it works fine on desktop to change the character forms to their Korean style, but doesn’t work on mobile.

2

Can you give us more details about where and how you’re using that attribute? [Put any code between `backticks` in code blocks.] Include what font you’re using, and whether that font is installed on the device OS or attached to your collection.

3

The front of card as well as the CSS can be seen below. The font I’m using is a custom font derived from Klee and LXGW and is also linked below.

Comparing the font to this, without the lang=“ko”, 曜 should look like the Japanese form, but with lang=“ko”, it should match the Kangxi Korean form.

Font

`.card {
		background-color: lightgray;
		color: #041C22;
		font-family: PenKai;
		font-size: 22px;
		line-height: 26px;
		padding-top: 45pt;
		text-align: center;
} .card.nightMode {
		background-color: lightgray;
		color: #041C22;
} .ipad .card {
		font-size: 13px;
} .iphone .card {
		padding-top: 20pt;
}


#box {
		background: url(_IndexCard.png);
		border-radius: 9px;
		margin: auto;
		width: 400pt;
		height: 224pt;
		position: relative;
		transform: scale(1.2);
}

#cls {
		color: #93A1A1;
		font-size: 14px;
		line-height: 26px;
		max-width: 40rem;
		position: absolute;
			top: 0px;
			left: 6px;
		text-align: left;
} .ipad #cls {
		font-size: 8px;
}

#ent {
		color: #05B2FA;
		font-size: 26px;
		line-height: 26px;
		padding-top: 12px;
} .ipad #ent {
		font-size: 16px;
}

#hint {
		color: #93A1A1;
		padding-top: 26px;
}

#men {
		color: #DB0400;
		padding-top: 33px;
}

#par {
		color: #05B2FA;
		padding-top: 3px;
		margin-bottom: -3px;
}

#pron {
		color: #93A1A1;
		font-size: 16px;
		padding-top: 22px;
} .ipad #pron {
		font-size: 9px;
		padding-top: 23px;
}

.replay-button svg {
		position: absolute;
			top: 4px;
			right: -5px;
		height: 20px;
} .ipad .replay-button svg {
		right: -15px;
}

.replay-button svg circle {
		stroke: #909995;
		fill: transparent;
}

.replay-button svg path {
 	 stroke: #909995;
 	 fill: #909995;
}

@font-face {
		font-family: PenKai;
		src: url('_PenKai.otf');
}`

` <div id="box" lang="ko">

	<div id="cls">{{Class}}</div>



	<div id="ent">{{Entry}}</div>



	{{#Part}}

		<div id="par">{{Part}}</div>

	{{/Part}}



	{{#Hanja}}

		<div id="par">{{Hanja}}</div>

	{{/Hanja}}



	<div id="men">{{Meaning}}</div>



	<div id="pron">{{Pronunciation}}</div>



	{{Audio}}

</div>`
4

In what way doesn’t it work? Is it stuck on Japanese variant or Korean? Or is the font not having any effect at all?

I checked it on my AnkiDroid and it behaves there the same as on desktop, switching between the two glyphs.
One reason I can think of for it being different is if your phone system is set to Korean, for example, it will default to it even when the html attribute is not on the card. In that case, this should be fixable by explicitly indicating lang="ja" on the template, when you want to switch.

5

It’s stuck on the Japanese glyph on iPhone iPad

6

If the HTML/CSS is valid and works on other platforms, it could be one of those quirks where iOS WebKit just behaves differently or incorrectly or hasn’t implemented a feature found in other web engines.

A possible workaround might be to use two separate font files, one with Japanese glyphs and the other with Korean glyphs. CSS classes would be used to select the desired font.