fix(i18n): Japanese font stack, ReadiumCSS via navigator (see PR #2252)

Author: danielweck

package-lock.json

@@ -288,7 +288,7 @@
     "node-fetch": "^3.3.2",
     "proxy-agent": "^6.4.0",
     "r2-lcp-js": "^1.0.40",
-    "r2-navigator-js": "^1.15.8",
+    "r2-navigator-js": "^1.15.9",
     "r2-opds-js": "^1.0.43",
     "r2-shared-js": "^1.0.74",
     "r2-streamer-js": "^1.0.47",

package.json

@@ -85,8 +85,62 @@ font-weight: normal;
 src: local("iAWriterDuospace-Regular"),
 url("${rcssPath}/fonts/iAWriterDuospace-Regular.ttf") format("truetype");
 }
-
         `;
+
+// https://github.com/readium/readium-css/pull/146/files
+// https://github.com/readium/readium-css/blob/2e1bb29d02de1b2d36ec960eb90c2c4ac238b346/css/src/modules/ReadiumCSS-base.css#L119-L131
+// https://github.com/readium/readium-css/blob/2e1bb29d02de1b2d36ec960eb90c2c4ac238b346/css/src/ReadiumCSS-ebpaj_fonts_patch.css#L22-L79
+// @font-face {
+// font-family: "serif-ja";
+// src: local("ＭＳ Ｐ明朝"), /* for IE */
+// local("MS PMincho"), /* ＭＳ Ｐ明朝 */
+// local("HiraMinProN-W3"), local("Hiragino Mincho ProN"), /* ヒラギノ明朝 ProN W3 */
+// local("HiraMinPro-W3"), local("Hiragino Mincho Pro"), /* ヒラギノ明朝 Pro W3 */
+// local("YuMin-Medium"), local("YuMincho"), /* 游明朝体(macOS) */
+// local("Yu Mincho"), /* 游明朝(Windows) */
+// local("BIZ UDPMincho"); /* BIZ UDP明朝 */
+// }
+
+// @font-face {
+// font-family: "sans-serif-ja";
+// src: local("ＭＳ Ｐゴシック"), /* for IE */
+// local("MS PGothic"), /* ＭＳ Ｐゴシック */
+// local("HiraginoSans-W3"), local("Hiragino Sans"), /* ヒラギノ角ゴシック */
+// local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN"), /* ヒラギノ角ゴ ProN W3 */
+// local("HiraKakuPro-W3"), local("Hiragino Kaku Gothic Pro"), /* ヒラギノ角ゴ Pro W3 */
+// local("ヒラギノ角ゴ W3"), /* for old  Safari */
+// local("HiraginoKaku-W3-90msp-RKSJ-H"), /* ヒラギノ角ゴ W3(TrueType) */
+// local("YuGothic-Medium"), local("YuGothic"), /* 游ゴシック体(macOS) */
+// local("Yu Gothic Medium"), local("Yu Gothic"), /* 游ゴシック(Windows) "Yu Gothic" is a fallback. */
+// local("BIZ UDPGothic"); /* BIZ UDPゴシック */
+// }
+
+// /* 縦組み用 (vertical writing) */
+
+// @font-face {
+// font-family: "serif-ja-v";
+// src: local("ＭＳ 明朝"), /* for IE */
+// local("MS Mincho"), /* ＭＳ 明朝 */
+// local("HiraMinProN-W3"), local("Hiragino Mincho ProN"), /* ヒラギノ明朝 ProN W3 */
+// local("HiraMinPro-W3"), local("Hiragino Mincho Pro"), /* ヒラギノ明朝 Pro W3 */
+// local("YuMin-Medium"), local("YuMincho"), /* 游明朝体(macOS) */
+// local("Yu Mincho"), /* 游明朝(Windows) */
+// local("BIZ UDMincho"); /*  BIZ UD明朝 */
+// }
+
+// @font-face {
+// font-family: "sans-serif-ja-v";
+// src: local("ＭＳ ゴシック"), /* for IE */
+// local("MS Gothic"), /* ＭＳ ゴシック */
+// local("HiraginoSans-W3"), local("Hiragino Sans"), /* ヒラギノ角ゴシック */
+// local("HiraKakuProN-W3"), local("Hiragino Kaku Gothic ProN"), /* ヒラギノ角ゴ ProN W3 */
+// local("HiraKakuPro-W3"), local("Hiragino Kaku Gothic Pro"), /* ヒラギノ角ゴ Pro W3 */
+// local("ヒラギノ角ゴ W3"), /* for old Safari */
+// local("HiraKakuDS-W3-83pv-RKSJ-H"), /* ヒラギノ角ゴ W3(TrueType) */
+// local("YuGothic-Medium"), local("YuGothic"), /* 游ゴシック体(macOS) */
+// local("Yu Gothic Medium"), local("Yu Gothic"), /* 游ゴシック(Windows)  "Yu Gothic" is a fallback. */
+// local("BIZ UDGothic"); /* BIZ UDゴシック */
+// }
                 el = document.createElement("style");
                 el.setAttribute("id", readiumCssFontFaceStyleID);
                 el.setAttribute("type", "text/css");

src/renderer/reader/components/App.tsx

@@ -55,26 +55,30 @@ export const FONT_LIST: Font[] =
 //     fontFamily: "Consolas, monospace",
 // }
 ];
+
+// https://github.com/readium/readium-css/pull/146/files
+// https://github.com/readium/readium-css/blob/2e1bb29d02de1b2d36ec960eb90c2c4ac238b346/css/src/modules/ReadiumCSS-base.css#L119-L131
+// https://github.com/readium/readium-css/blob/2e1bb29d02de1b2d36ec960eb90c2c4ac238b346/css/src/ReadiumCSS-ebpaj_fonts_patch.css#L22-L79
 const FONT_LIST_JA: Font[] =
 [{
     id: "JA",
-    label: "日本語 SERIF (H)",
+    label: "日本語 明朝 (横書き)",
     // eslint-disable-next-line quotes
-    fontFamily: `"ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ 明朝", "MS Mincho", "Hiragino Mincho ProN", serif`,
+    fontFamily: `"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDPMincho", "Yu Mincho", "ＭＳ Ｐ明朝", "MS PMincho", serif`,
 }, {
     id: "JA-SANS",
-    label: "日本語 SANS (H)",
+    label: "日本語 ゴシック (横書き)",
     // eslint-disable-next-line quotes
-    fontFamily: `"ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ ゴシック", "MS Gothic", "Hiragino Sans", sans-serif`,
+    fontFamily: `"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3", "YuGothic", "Yu Gothic Medium", "BIZ UDPGothic", "Yu Gothic", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif`,
 }, {
     id: "JA-V",
-    label: "日本語 SERIF (V)",
+    label: "日本語 明朝 (縦書き)",
     // eslint-disable-next-line quotes
-    fontFamily: `"ＭＳ 明朝", "MS Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho", "Hiragino Mincho ProN", serif`,
+    fontFamily: `"Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "BIZ UDMincho", "Yu Mincho", "ＭＳ明朝", "MS Mincho", serif`,
 }, {
     id: "JA-V-SANS",
-    label: "日本語 SANS (V)",
+    label: "日本語 ゴシック (縦書き)",
     // eslint-disable-next-line quotes
-    fontFamily: `"ＭＳ ゴシック", "MS Gothic", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Hiragino Sans GB", "ヒラギノ角ゴシック W3", "游ゴシック", "YuGothic", "ＭＳ Ｐゴシック", "MS PGothic", "Hiragino Sans", sans-serif`,
+    fontFamily: `"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3", "YuGothic", "Yu Gothic Medium", "BIZ UDGothic", "Yu Gothic", "ＭＳゴシック", "MS Gothic", sans-serif`,
 }];
 export const FONT_LIST_WITH_JA = FONT_LIST.concat(...FONT_LIST_JA);