MapLibre の CJK レンダリング / CJK Rendering in MapLibre

Transcript

1. MapLibre の CJK レンダリング ɴᴇᴋᴏʏᴀsᴀɴ
2. Who are you? ɴᴇᴋᴏʏᴀsᴀɴ (a.k.a. Taiyu Yoshizawa) Software Engineer @MIERUNE Inc. Co-founder & Software Engineer @ ReMotive LLC. GitHub: @NEKOYASAN Twitter: @Nekoya3_ Web: nekoyasan.me
3. MapLibreのCJKレンダリングに 注目したことはあるでしょうか？
4. MapLibreのCJKレンダリングに 注目したことはあるでしょうか？
5. CJKレンダリングってなんだ？
6. CJK 中国語（Chinese）・日本語（Japanese）・ハングル （Korean）の頭文字をとった言葉で、これら東アジアの言語圏 で共通して使われる漢字および文字体系を指す総称 今回は漢字やひらがななど、マルチバイト文字を使って、縦書き が存在する文化圏の文字体系を表すためにCJKという言葉を用 います。
7. CJKレンダリング © OpenStreetMap contributors | © OpenMapTiles
 地理院ベクトルタイルを加工して作成 | 「国土数値情報（鉄道データ 2025年度）」および「国土数値情報（行政区域データ 2026年度）」（国土交通省）を加工して作成
8. CJKレンダリング こういう日本語のレンダリングのされ方 の総称を（今回は）指します © OpenStreetMap contributors | © OpenMapTiles
 地理院ベクトルタイルを加工して作成 | 「国土数値情報（鉄道データ 2025年度）」および「国土数値情報（行政区域データ 2026年度）」（国土交通省）を加工して作成
9. 特に今回は縦書きについて
10. まずWebにおける縦書き
11. writing-mode 行の流れる方向を決める horizontal-tb vertical-rl ↓ W3C CSS Writing Modes Level 4 · https://www.w3.org/TR/css-writing-modes-4/ ←
12. text-orientation 文字ごとの向きを決める mixed W3C CSS Writing Modes Level 4 · https://www.w3.org/TR/css-writing-modes-4/ upright
13. text-combine-upright 数字を横並びのまま1文字分に none W3C CSS Writing Modes Level 4 · https://www.w3.org/TR/css-writing-modes-4/ all
14. Webではそれぞれが求めた 書き方ができる
15. ではMapLibreではどうなのか
16. © OpenStreetMap contributors | © OpenMapTiles
 地理院ベクトルタイルを加工して作成 | 「国土数値情報（鉄道データ 2025年度）」および「国土数値情報（行政区域データ 2026年度）」（国土交通省）を加工して作成
17. © OpenStreetMap contributors | © OpenMapTiles
 地理院ベクトルタイルを加工して作成 | 「国土数値情報（鉄道データ 2025年度）」および「国土数値情報（行政区域データ 2026年度）」（国土交通省）を加工して作成
18. ラインに従って縦書きになる ケースがある ポイントでも縦書きのにするかどうかの選択は可能
19. 数字・英語などの非マルチバイト文字の 縦書きをどう扱うべきか？
20. どのレンダリング結果が 正しいと思いますか？
22. これの場合は果たしてどうでしょうか...
24. これらは結局どういう違いなのか A. 全てが横書き B. CJK 文字は縦書きで、それ以外は横書き C. CJK 文字列と短い単語と数字は縦書きで、それ以外は横書き D. 全てが縦書き
25. 正しいとはなになのか
26. AもBもCもDもどれも正しいのでは？
27. これはそれぞれの感性の違いでしかない 一応、W3C標準やJIS X 4051が存在してはいるが、 地図体験として正しいのかというのは難しい
28. https://www.w3.org/TR/jlreq/
29. v6.6.0 まで
30. v6.7.0 以降
31. https://github.com/maplibre/maplibre-gl-js/pull/8205
32. ご意見をください！
33. 縦書き時の字形
34. 字形 = 文字自体の形 フォントごとに見た目が違う
35. 学 学 学 学 学 学 LINE Seed JP Noto Sans JP Noto Serif JP Yuji Syuku Zen Kurenaido Hachi Maru Pop
36. フォントでの違いだけではなく 縦書きによって変わることもある
37. ー
38. ー 長音符 (U+30FC) KATAKANA-HIRAGANA PROLONGED SOUND MARK
39. ー 長音符 (U+30FC)
41. ー 長音符 (U+30FC)
43. ー 何かが違う？ 長音符 (U+30FC)
46. これでよいのか？
47. UTR#50 Vertical Text Layout
48. UTR#50 Vertical Text Layout
49. Vertical Orientation Property U：コード表の向きそのままで表示される (漢字とかひらがな) R：コード表の向きから時計回りに90度回転して表示される (英 語とか数字) Tu：通常は縦書き用の字形があるが、なければそのまま表示す る (句読点とか) Tr：通常は縦書きの字形があるが、それがなければ時計回りに 90度回転して表示される
50. Vertical Orientation Property U：コード表の向きそのままで表示される (漢字とかひらがな) R：コード表の向きから時計回りに90度回転して表示される (英 語とか数字) 長音符はどれ？ Tu：通常は縦書き用の字形があるが、なければそのまま表示す る (句読点とか) Tr：通常は縦書きの字形があるが、それがなければ時計回りに 90度回転して表示される
51. Vertical Orientation Data https://www.unicode.org/Public/UCD/latest/ucd/VerticalOrientation.txt
52. Vertical Orientation Data https://www.unicode.org/Public/UCD/latest/ucd/VerticalOrientation.txt
53. Vertical Orientation Property U：コード表の向きそのままで表示される (漢字とかひらがな) R：コード表の向きから時計回りに90度回転して表示される (英 一応ただしい！

 語とか数字) Tu：通常は縦書き用の字形があるが、なければそのまま表示す が...違和感がある る (句読点とか) Tr：通常は縦書きの字形があるが、それがなければ時計回りに 90度回転して表示される
54. ー 長音符 (U+30FC)
55. ー ー
56. ー 長音符 (U+30FC) font-feature-settings: 'vert' 1
57. font-feature-settings が 尊重される必要がある
58. https://github.com/maplibre/maplibre-gl-js/issues/5259
59. POINT LINESTRING
60. 1文字 1Glyphからの脱出
61. Glyph の Protocol Buffer では、Unicode の Code Point に対応する SDF Bitmap Image を格納する仕組みになってい る font-feature-settings によって Unicode の Code Point は変わらない。
62. https://github.com/maplibre/maplibre-gl-js/blob/main/src/util/verticalize_punctuation.ts
63. Glyph の Protocol Buffer では、Unicode の Code Point に対応する SDF Bitmap Image を格納する仕組みになってい る font-feature-settings によって Unicode の Code Point は変わらない。
64. Glyph の Protocol Buffer では、Unicode の Code Point に対応する SDF Bitmap Image を格納する仕組みになってい る font-feature-settings によって Unicode の Code Point は変わらない。 ＝ 一つの Code Point に対して 複数の Glyph が使える必要がある！
65. font-faces
66. フォントファイルが直接さわれる
67. https://github.com/maplibre/maplibre-gl-js/pull/8489
68. https://github.com/maplibre/maplibre-gl-js/pull/8489
69. POINT LINESTRING v6.14.0 まで
70. POINT LINESTRING v6.15.0 以降
71. 今後のCJKレンダリングの改善として なにを考えたいか
72. 今後のCJKの改善 ラインラベルの縦書きと横書きを選択可能にする GL JS(#8243) と Style Spec(#1844) の両方に重なる 縦中横と呼ばれるレンダリングへの対応 (#8242)
73. 今後のCJKの改善 縦書きと横書きを選択可能にする GL JS(#8243) と Style Spec(#1844) の両方に重なる 縦中横と呼ばれるレンダリングへの対応 (#8242)
74. 今後のCJKの改善 縦書きと横書きを選択可能にする GL JS(#8243) と Style Spec(#1844) の両方に重なる 縦中横と呼ばれるレンダリングへの対応 (#8242)
75. 今後のCJKの改善 縦書きと横書きを選択可能にする GL JS(#8243) と Style Spec(#1844) の両方に重なる 縦中横と呼ばれるレンダリングへの対応 (#8242) 合字や前後の文字列による変化への対応 font-feature-settings への対応拡充
76. 複数文字の組み合わせに対応した レンダリングへ
77. https://github.com/maplibre/maplibre-gl-js/issues/6232
78. https://github.com/maplibre/maplibre-gl-js/issues/8293
79. GL JS だけでなく Native にも...?
80. Thank you!