[Userscript] Forum and some websites: Prioritize Japanese glyphs (Han unification)

As of now, I don’t really frequent this forum, but I came across the fact that Han unification also affects this forum. That is, some Kanji look different from what are usually seen in Japanese media. Instead, they became like of mainland China or Taiwan counterparts.

Some of the drastic differences include, 直線、海、過ぎる、似る、角、誤解.

After all, I don’t even know if it is even possible to force Japanese font (like Noto Sans JP) on Discourse, but I think it does matter, being a Japanese community.

For a global fix, is to change the forum display language to Japanese, or to use my UserScript.

WaniKani Community-only version

Another version that add more websites.

9 Likes

Ideally it should using var selectors, but I don’t know if it is feasible with the current tools, and if not, whether Discourse would add the feature for clients that use Eastern languages.

2 Likes

If your device is set up to prioritize Japanese over Chinese (e.g. by installing a Japanese keyboard) it should always render correctly.

In HTML, you can specify the language per span/div, but I don’t think it would be straightforward to do that in Discourse. It would probably require overriding a lot of Discourse code since I’d guess they are generally language agnostic.

10 Likes

It should be possible to set font-family (CSS property) to a list including a Japanese font face / variant, although tbh I would find that annoying as despite having the Noto fonts installed, I would much prefer to use Motoya “Maru”.

1 Like

I don’t know
but I would like to have the typefont changed
preferably to Comic Sans MS

1 Like

The only way to default to Japanese is to mark the whole forum as Japanese. But most of the forum is English, not Japanese. It would probably render everything better, but search engines might treat the forums differently if all the English text is marked as Japanese.

The right way to do it is to mark Japanese text as Japanese, like this:

Japanese:
<span lang="ja">直線、海、過ぎる、似る、角</span>
Result: 直線、海、過ぎる、似る、角

Chinese:
<span lang="zh">直線、海、過ぎる、似る、角</span>
Result: 直線、海、過ぎる、似る、角

That’s not exactly intuitive, so it would be great to have a button or something to mark text as Japanese. But since WK’s forums are hosted by Discourse, customization probably isn’t an option.

16 Likes

Everywhere I go…
I see him :pensive:
SansOverworldSprite

3 Likes

This script should attempt to import and use Noto Sans JP as a font, and then if not fallback on a variety of standard Japanese fonts.

// ==UserScript==
// @name         Japanese Fonts for Wanikani Forums
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Try to import and use Noto Sans JP, and if not fall back on a standard Japanese font.
// @author       Michael Charles Aubrey
// @match        https://community.wanikani.com/*
// @icon         https://www.google.com/s2/favicons?domain=wanikani.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

const style = document.createElement("style");
style.innerText = `
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
* {
    font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", "MS ゴシック" , "MS Gothic", "Noto Sans CJK JP", TakaoPGothic, sans-serif;
}
code * {
    font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace !important;
}
`

const head = document.getElementsByTagName("head")[0];
head.appendChild(style);
})();
5 Likes

So THAT’S why my mac’s (chinese) handwriting input stubbornly will not recognize when I draw no matter how carefully I do it. Mystery solved.

4 Likes

<span lang="ja"> 直線、海、過ぎる、似る、角</span> doesn’t work for me.

It has to be

<span lang="ja-JP"> 直線、海、過ぎる、似る、角</span>.

(I have just noticed I don’t really need JP after ja- in my browser, but hyphen is needed…)

There might be another UserScript solution to inject lang="ja-JP" as well.

What browser are you using that requires a hyphen?? Whatever the case, it’s non-compliant.

Firefox on Arch Linux. But yeah, it appears to be fine in Firefox on Android.

EDIT: much easier option is just, don’t use ttf-droid (pacman -R ttf-droid).

:warning: This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

It appears that forcing font can be quite overdone and unbeautiful. (Also, an ugly way to avoid styling code using !important.)

Anyway, my UserScript is born. Get it here - Wanikani Community Prioritize Japanese Glyphs.

// ==UserScript==
// @name         WaniKani Community prioritize Japanese glyphs
// @namespace    https://github.com/patarapolw
// @version      0.1.3
// @description  Prioritization of Japanese glyphs for Han unification
// @author       polv
// @license      MIT
// @match        https://community.wanikani.com/*
// @icon         https://www.google.com/s2/favicons?domain=community.wanikani.com
// @grant        none
// ==/UserScript==

(() => {
  function injectLangHTML(lang) {
    // I might not need to use MutationObserver at all...
    const obs = new MutationObserver(() => {
      if (document.documentElement.lang !== lang) {
        document.documentElement.lang = lang;
      }
    });
    obs.observe(document.documentElement, { attributeFilter: ["lang"] });

    // Only this part is the real thing.
    document.documentElement.lang = lang;
  }

  injectLangHTML("ja-JP");
})();

Edit: It appears to be extremely simple. Only <html lang="en"> needs to be edited. (And <html lang="ja"> doesn’t work in Firefox for Arch Linux for some reasons.)

2 Likes

interestingly installing the userscript did not change it at all for me. I guess its because I have japanese installed as a langauge with higher priority than chinese on my computer (i quite often experience the problem in the other direction tho)

wait how are you using the discourse editor to enforce the language tag??

Just type the span tags exactly as shown. Certain html tags and attributes are whitelisted in discourse. In fact, it was me and @seanblue that got the folks at discourse to whitelist the lang tag.

7 Likes

Actually, It’s not fixed even if the forum language is set to Japanese.

Even now, it is perfectly fine with Firefox on Android, but yes, the forum language just has to be set to Japanese.

I thought WaniKani Team isn’t interested in translating the forum, but somehow, most of the badges are translated.

badges

1 Like

Interesting.
By the way, when I mentioned marking the whole forum as Japanese, I meant adding a lang tag to a top-level html tag, rather than actually configuring your account language.

But hey, if it works…

1 Like

That’s because most of the badges are built into Discourse and Discourse includes a Japanese translation of the site. Notice that all the custom WaniKani badges (like the durtle ones) aren’t translated.

3 Likes

Actually, it becomes Chinese form again in Gmail app on Android.

I guess only certain Webviews can be fixed, otherwise it depends (mostly broken, though).

1 Like