Use different font for specified language.

[Kimi-Arthur]

First, thanks a lot for the eye-pleasing theme!

There are cases where part of the note is in different language, thus the characters appear differently even though they have the same unicode. Normally this can be achieved by specifying a lang attribute.

It works for like Github theme (like below), but not for this beautiful theme.

Example:

器 is different from 器

Source code:

<span lang="ja-JP">器</span> is different from 器

[etigerstudio]

Thank you for pointing this subtle issue out. I will investigate🕵️‍♂️ on this right now.

[etigerstudio]

After some digging, I found that this issue was tightly related to the preset font fallback list, especially on Chinese fonts.

The font issue

As of now, Misty enforce "PingFang SC" on macOS as well as "Microsoft YaHei" on Windows. For this reason, exact Japanese kanji or even Korean hanja and traditional Chinese character may not be able to be rendered as expected because glyphs of those preset fonts take precedence.

To resolve this issue & recover the precedence, phasing out those preset fonts from fallback list is one feasible method, which is also preferred for I realized it's unnecessary to hard-code fonts if OS already got a correct default choice.

I confirmed macOS automatically choose "PingFang" for sans-serif font, so it's safe to remove that font from list. While I'm not sure whether it's safe to remove "Microsoft YaHei" on Windows without introducing breaking change such as falling back to "SimSun", which could be a major visual regression.

Patched theme

I uploaded one patched theme. You could download and test out whether it works. Any screenshots will be helpful to me to understand original/patched rendering effect on your computer.

Original theme: misty-original.txt
Patched theme: misty-patched.txt
Note: remember to change file extension to "css" from "txt".

My screenshots

<span lang="ja-JP">器</span> is different from 器
<span lang="ja-JP">今</span> is different from 今
<span lang="ja-JP">世界</span> is different from 世界
<span lang="ko">器</span> is different from 器
<span lang="ko">今</span> is different from 今
<span lang="ko">世界</span> is different from 世界
<span lang="zh-Hant">器</span> is different from 器
<span lang="zh-Hant">今</span> is different from 今
<span lang="zh-Hant">世界</span> is different from 世界

Windows original:

Windows patched (noticing that Chinese font reverted to "SimSun", which might not happen on your computer):

macOS original:

macOS patched:

[Kimi-Arthur]

I get similar results. Here is my screenshot on Windows:

It's the thing you get with Github too. So I guess it's the way to be?

[Kimi-Arthur]

Actually, installing the language pack helps a bit. Here is what I get after installing the Japanese language pack.

[etigerstudio]

👍LGTM.
We might hold on for a little bit more time while I roll out a fresh Windows installation to test whether I could achieve similar results to yours. (Currently, my Windows 10 build is 1703 which is far behind the state-of-the-art environment.)

[etigerstudio]

Things have gone right for me on a fresh Win10 with language pack installed. I'm beginning to work on a new release that includes this fix.

Baseline (with GitHub):

Original Misty:

Patched Misty:

[etigerstudio]

Fixed in v1.0-alpha.2.