List of Webkit - text.Baldanders.info
tag:text.Baldanders.info,2018-12-10:/tags
2018-12-10T22:28:16+09:00
帰ってきた「しっぽのさきっちょ」
https://text.baldanders.info/images/avatar.jpg
https://text.baldanders.info/images/avatar.jpg
オープンソースはコードの多様性を担保しない
tag:text.Baldanders.info,2018-12-10:/remark/2018/12/software-diversity/
2018-12-10T13:28:16+00:00
2022-05-04T05:22:29+00:00
オープンソースは自由かもしれないが多様とは限らない。
Spiegel
https://baldanders.info/profile/
<p>まぁ Microsoft は営利企業として賢明な判断をしたと思うよ。</p>
<ul>
<li><a href="https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/">Microsoft Edge、Chromiumベースに――旧Windowsでも作動、macOS版も登場へ | TechCrunch Japan</a></li>
<li><a href="http://www.itmedia.co.jp/pcuser/articles/1812/09/news016.html">EdgeブラウザがついにChromiumを採用へ Mozillaは「独占は危険」と警告 - ITmedia PC USER</a></li>
<li><a href="http://d.hatena.ne.jp/yomoyomo/20181210/mozilla">マイクロソフトのEdgeがChromiumベースになることによりウェブから多様性が失われることを懸念するのでモジラ財団に寄付した - YAMDAS現更新履歴</a></li>
<li><a href="https://forest.watch.impress.co.jp/docs/serial/yajiuma/1157671.html">どうなる、「Microsoft Edge」? ~「Chromium」ベースになってよい点、悪い点 - やじうまの杜 - 窓の杜</a></li>
</ul>
<p>これでブラウザエンジンはいよいよ <a href="https://webkit.org/">WebKit</a> と <a href="https://www.chromium.org/blink" title="Blink - The Chromium Projects">Blink</a>/<a href="https://v8.dev/" title="V8 JavaScript engine">V8</a> と <a href="https://servo.org/" title="Servo, the parallel browser engine">Servo</a> に絞られたか。
確か W3C で標準と認められるには2種類以上の実装実績が必要だったはず。
親戚同士<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup> の <a href="https://webkit.org/">WebKit</a> と <a href="https://www.chromium.org/blink" title="Blink - The Chromium Projects">Blink</a> で実装してしまえば,なし崩し的に標準になるわけだ(笑)
しかも携帯端末の世界では既に <a href="https://webkit.org/">WebKit</a>/<a href="https://www.chromium.org/blink" title="Blink - The Chromium Projects">Blink</a> でほぼ独占状態。
更に JavaScript エンジンに至っては今や <a href="https://v8.dev/" title="V8 JavaScript engine">V8</a> 一択だろうし<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>, <a href="https://www.mozilla.org/">Mozilla</a> の言い分は今更すぎる話ではある。</p>
<figure>
<blockquote>
<q>数日前にEdgeがリニューアルされるといいう情報が流れたとき、一部の専門家はChromiumプロジェクトが力を持ちすぎることになるという懸念を示した。<br>
この懸念には理由があることは認めるものの、MicrosoftはどのみちEdgeのシェアは低いのでChromium化がオープンソース・コミュニティーにドラスティックな影響を与えることはないという説得力のある反論をしている。MicrosoftがChromiumコミュニティーに参加してウェブの標準化を推進する側に回り、Chromiumにイノベーションを吹き込むことになればメリットは大きいだろう。</q>
</blockquote>
<figcaption><div><q><a href="https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/">Microsoft Edge、Chromiumベースに――旧Windowsでも作動、macOS版も登場へ</a></q>より</div></figcaption>
</figure>
<p>フリーな製品が市場にインパクトを与えたという点ではまさに Chrome を含む <a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> プロジェクトがそれである。
ならば当初 <a href="https://www.mozilla.org/">Mozilla</a>/Firefox が目指していたプロプライエタリな IE へのカウンタとしての役目は <a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> による独占で達成されたわけであり, <a href="https://www.mozilla.org/">Mozilla</a> が文句を言う筋合いではないんじゃないだろうか。</p>
<p>Linux より優れた OS をフルスクラッチで作ろうという人は少ないだろう。
ブラウザだって今更フルスクラッチで作り直そうなんて(しかもそのために<a href="https://www.rust-lang.org/" title="Rust programming language">プログラミング言語</a>から開発するとか)酔狂なことをするのは <a href="https://www.mozilla.org/">Mozilla</a> くらいなものである。
私はそういう狂った人は好きだけど(笑)</p>
<p>まっとうなエンジニアなら(遊びや勉強用ならともかく)優れた製品を前にわざわざ「車輪の再発明」なんかしない。
それがオープンソースなら尚更。
昔に比べれば今はオープンソース・プロジェクトの fork に対して寛容になってるけど,それでも頻繁に起きることではない。
オープンソースは自由かもしれないが多様とは限らないということだよね。</p>
<p>ブラウザエンジンのシェア独占が問題だというのなら,たとえば iOS で <a href="https://webkit.org/">WebKit</a> 使用を要求していることとか Android の WebView によって実質的に <a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> 以外が締め出されている(選択肢に上らない)こととか<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>,そういったことをもっと議論すべきなんじゃないの?</p>
<p>そういう風に考えたら今回の Edge の話は,単にフロントエンド・エンジニアが楽できるということではなく,プロプライエタリ OS ベンダが自前のブラウザエンジンを捨てて「自由なソフトウェア」を選択したという意味で(Microsoft にしては)めっさ英断だと思うけどね。
最終的にどうなるかは知らないが。</p>
<h2>ブックマーク</h2>
<ul>
<li>
<p><a href="https://gigazine.net/news/20170201-ios-chrome-open-source/">iOS版Chromeがオープンソース化される - GIGAZINE</a></p>
</li>
<li>
<p><a href="http://www.itmedia.co.jp/news/articles/1812/11/news072.html">「Edgeで既存のChrome拡張機能をサポートする意向」とMicrosoftの担当者がRedditで - ITmedia NEWS</a></p>
</li>
<li>
<p><a href="https://text.baldanders.info/remark/2018/06/web-browser-as-the-technical-debt/">技術的負債としての Web ブラウザ</a></p>
</li>
</ul>
<h2>参考図書</h2>
<div class="hreview">
<div class="photo"><a href="https://www.amazon.co.jp/dp/B009LFBL4Y?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1"><img src="https://m.media-amazon.com/images/I/412TwuSJT1L._SL160_.jpg" width="114" alt="photo"></a></div>
<dl>
<dt class="item"><a class="fn url" href="https://www.amazon.co.jp/dp/B009LFBL4Y?tag=baldandersinf-22&linkCode=ogi&th=1&psc=1">グーグル ネット覇者の真実</a></dt>
<dd>スティーブン・レヴィ (著), 仲達志;池村千秋 (翻訳)</dd>
<dd>CCCメディアハウス 2011-12-16 (Release 2012-08-31)</dd>
<dd>Kindle版</dd>
<dd>B009LFBL4Y (ASIN)</dd>
</dl>
<p class="description">そういえばこれ Kindle で買い直したのに途中まで読んでそのまま積ん読だったよ。ゼロ年代の Google を中心とした話なのでちょっと古びた感はあるが歴史書としては今でも通用するだろう。書評は<a href="https://www.yamdas.org/booklog/intheplex.html" title="yomoyomoの読書記録 - スティーブン・レヴィ『グーグル ネット覇者の真実 追われる立場から追う立場へ』(阪急コミュニケーションズ)">こちら</a>が参考になる。</p>
<p class="powered-by">reviewed by <a href='#maker' class='reviewer'>Spiegel</a> on <abbr class="dtreviewed" title="2018-12-11">2018-12-11</abbr> (powered by <a href="https://affiliate.amazon.co.jp/assoc_credentials/home">PA-APIv5</a>)</p>
</div> <!-- グーグル ネット覇者の真実 -->
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p><a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> と <a href="https://v8.dev/" title="V8 JavaScript engine">V8</a> はもともと <a href="https://webkit.org/">WebKit</a> のポーティングのひとつだったが,レンダリングエンジンや JavaScript エンジンの一部を fork して独立したプロジェクトになった。 <a href="https://www.chromium.org/blink" title="Blink - The Chromium Projects">Blink</a> は <a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> プロジェクトで開発しているレンダリングエンジンという位置づけ。ちなみに Chrome for iOS は <a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> プロジェクトのひとつだが iOS では <a href="https://webkit.org/">WebKit</a> を使うことが要求されているため <a href="https://www.chromium.org/blink" title="Blink - The Chromium Projects">Blink</a> を使わない実装になっている。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>そういえば <a href="https://atom.io/">ATOM</a> エディタなどで採用されている <a href="https://electronjs.org/" title="Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.">Electron</a> は <a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> ベースだったっけ。ブラウザのみならずデスクトップ・アプリでも <a href="https://www.chromium.org/" title="The Chromium Projects">Chromium</a> による侵食は進行しているわけやね。他にも Google は Unicode で大きな発言権を持ってるし(Unicode に絵文字を追加することを最初に提案したのは Google)自前で開発したプログラミング言語もいくつかある。更に AI 技術についても大きなクラウド資源を持っていて,それを十全に発揮している。本当に,本当に今更な話で,これが<a href="https://text.baldanders.info/remark/2017/10/too-many-ghosts/" title="今こそ「グリゴリの捕縛」を読め! または遍在する草薙素子">「情報力」が台頭した現代</a>における Google の強さ・凄みであり怖さと言える。市場の独占はそれに付随するものに過ぎない。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>プライバシーに配慮したとされる Firefox Focus の Android 版では独自のレンダリングエンジンとして <a href="https://support.mozilla.org/ja/kb/geckoview-firefox-focus" title="Firefox Focus の GeckoView | Firefox Focus ヘルプ">GeckoView を作った</a>らしい。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>
「神」と「神」と Chrome の文字化け
tag:text.Baldanders.info,2017-12-10:/remark/2017/12/gods-in-chrome/
2017-12-10T03:35:07+00:00
2019-07-01T13:48:09+00:00
Google Chrome では「神」と「神」が同じ「神」に見える,という報告をいただきまして,確かにこちらの環境でも再現するので,ちょっと調べてみました。
Spiegel
https://baldanders.info/profile/
<p>「<a href="https://text.baldanders.info/golang/character-width-for-unicode/">Go 言語による Unicode 半角/全角変換</a>」のページを Google Chrome で見ると「神と神」が同じ「神」に見える,という報告をいただきまして,確かにこちらの環境でも再現するので,ちょっと調べてみました。</p>
<p>(追記: Chrome だけじゃなくて <a href="https://play.google.com/store/apps/details?id=org.mozilla.focus">Android 用の Firefox Focus</a> でも同じ現象を確認した。どうやら <a href="https://play.google.com/store/apps/details?id=org.mozilla.focus">Android 用の Firefox Focus</a> は Firefox とはレイアウトエンジンが異なり WebKit からの fork である WebView (Android に既定で入ってるやつ)を<a href="http://www.eweek.com/enterprise-apps/mozilla-brings-firefox-focus-to-android-to-improve-privacy" title="Firefox Focus Debuts on Android With Automatic Tracking Protection">使ってるらしい</a>。それって,もしかして全ての元凶は WebKit ってことなのか?)</p>
<p>(追記2: <a href="https://play.google.com/store/apps/details?id=org.mozilla.focus">Android 用の Firefox Focus</a> のレンダリングエンジンが <a href="https://support.mozilla.org/ja/kb/geckoview-firefox-focus" title="Firefox Focus の GeckoView | Firefox Focus ヘルプ">GechoView に変わった</a>が影響があるかどうか確認してない)</p>
<p>ちなみに「神と神」のうち前者の「神」は所謂 CJK 互換文字と呼ばれるもので Unicode コードポイントで「<code>U+FA19 '神'</code>」にマッピングされるものです。</p>
<p>まず,<a href="https://text.baldanders.info/" title="text.Baldanders.info">本サイト</a>の状態を説明しておくと,サイトの各ページの文字は Web フォントで表示されている。
ブラウザ側で Web フォントを無効にしていない(または経路途中でフィルタリングされない)限りは,こちらで指定したフォントで表示されるはずである。</p>
<ul>
<li><a href="https://text.baldanders.info/remark/2015/web-font-family/">Web フォントに関する覚え書き</a></li>
<li><a href="https://text.baldanders.info/remark/2016/10/japanese-serif-fonts-by-google-cdn/">Web フォントに関する覚え書き(明朝体編)</a></li>
</ul>
<p>本文を含む地の文章には「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」を利用している。
<a href="https://fonts.google.com/earlyaccess">Google Fonts Early Access</a> で唯一ふだん使いできる明朝体の Web フォントだったのが選択した理由である<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>。</p>
<p>ただし「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」は,個人の方がボランティアで作成されているということもあり,全ての和文文字を網羅しているわけではなく,幾つか表示できない文字がある。
「<code>U+FA19 '神'</code>」もそのうちのひとつである。
どうもその辺に原因がありそうである。</p>
<p>そこで,テスト用に以下の HTML コードを用意し Chrome に表示させてみた。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">'stylesheet'</span> <span class="na">href</span><span class="o">=</span><span class="s">'http://fonts.googleapis.com/earlyaccess/sawarabimincho.css'</span> <span class="na">type</span><span class="o">=</span><span class="s">'text/css'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>神と神<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">localonly</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="kc">sans-serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">sawarabi</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Sawarabi Mincho'</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"localonly"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「神」と「神」(後者が CJK 互換文字)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>草「彅」剛(JIS 第一・第二水準にない漢字)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「繋」ぐ(さわらび明朝にない文字)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"sawarabi"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「神」と「神」(後者が CJK 互換文字)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span>草「彅」剛(JIS 第一・第二水準にない漢字)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「繋」ぐ(さわらび明朝にない文字)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>これを表示させた結果は以下の通り。</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/38947212091/"><img src="https://photo.baldanders.info/flickr/image/38947212091_m.png" srcset="https://photo.baldanders.info/flickr/image/38947212091_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Google Chrome (1)" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/38947212091/">Google Chrome (1)</a></div></figcaption>
</figure>
<p>最初の3行が Chrome デフォルトの Sans Serif で表示させたもの,次の3行が「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」で表示させたものである。
ただし「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」にない文字は Sans Serif で表示するよう設定している。</p>
<p>「神」と「彅」と「繋」は「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」に収録されていない文字なのだが,何故か「神」だけが明朝体で「神」と表示されているのがお分かりだろうか<sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup>。
ふむむむむ。</p>
<p>ここで思い出すのが Unicode 正規化による「神」の正規化である。</p>
<ul>
<li><a href="https://text.baldanders.info/golang/unicode-normalization/">Go 言語と Unicode 正規化</a></li>
</ul>
<p>この記事で説明している通り, CJK 互換文字である「<code>U+FA19 '神'</code>」は正規化によって「<code>U+795E '神'</code>」に変換されてしまうのである。</p>
<p>ならば今度は CJK 互換文字に絞って以下の HTML コードを組んでみる。</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">html</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">'stylesheet'</span> <span class="na">href</span><span class="o">=</span><span class="s">'http://fonts.googleapis.com/earlyaccess/sawarabimincho.css'</span> <span class="na">type</span><span class="o">=</span><span class="s">'text/css'</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">title</span><span class="p">></span>神と神<span class="p"></</span><span class="nt">title</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">localonly</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="kc">sans-serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">#</span><span class="nn">sawarabi</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s1">'Sawarabi Mincho'</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">style</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">head</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"localonly"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「朗」と「朗」(後者が CJK 互換文字,正規化される)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「欄」と「欄」(後者が CJK 互換文字,正規化される)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「崎」と「﨑」(後者が CJK 互換文字,正規化されない)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"sawarabi"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「朗」と「朗」(後者が CJK 互換文字,正規化される)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「欄」と「欄」(後者が CJK 互換文字,正規化される)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">p</span><span class="p">></span> 「崎」と「﨑」(後者が CJK 互換文字,正規化されない)<span class="p"></</span><span class="nt">p</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">body</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">html</span><span class="p">></span>
</span></span></code></pre></div><p>これを表示させた結果は以下の通り。</p>
<figure style='margin:0 auto;text-align:center;'><a href="https://photo.baldanders.info/flickr/38061039025/"><img src="https://photo.baldanders.info/flickr/image/38061039025_m.png" srcset="https://photo.baldanders.info/flickr/image/38061039025_m.png 500w" sizes="(min-width:600px) 500px, 80vw" alt="Google Chrome (2)" loading="lazy"></a><figcaption><div><a href="https://photo.baldanders.info/flickr/38061039025/">Google Chrome (2)</a></div></figcaption>
</figure>
<p>ビンゴ!</p>
<ul>
<li>「朗」と「朗」は「神」と「神」の関係と同じ。 CJK 互換文字「朗」は「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」に収録されてなく, Unicode 正規化によって「朗」に変換される</li>
<li>「欄」は Unicode 正規化によって「欄」に変換されるが,どちらの文字も「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」に収録されていないため, Chrome デフォルトのフォントで表示されている</li>
<li>「﨑」は CJK 互換文字で「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」に収録されていないが Unicode 正規化の対象ではない(「崎」は似た字形の文字を並べてみただけ,テヘペロ)ため,そのまま Chrome デフォルトのフォントで表示されている</li>
</ul>
<p>つまり</p>
<ol>
<li>フォントに対象の文字が収録されていない</li>
<li>Unicode 正規化によって別の文字に変換可能</li>
<li>変換された文字がフォントに収録されている</li>
</ol>
<p>という条件が揃った時に「文字化け」が発生する,ということのようだ<sup id="fnref:3"><a href="#fn:3" class="footnote-ref" role="doc-noteref">3</a></sup>。</p>
<p>いや,これは酷いだろう。
同じ文字化けするなら「豆腐 □」や「ゲタ 〓」のほうがまだマシである。
多分 Chrome の中の人は CJK 互換文字や異体字について(歴史背景などを)よく理解しないまま「正規化できる文字で代替えすればいいぢゃん♥」と軽い感じで実装してしまったのだろう。
「<a href="https://text.baldanders.info/golang/unicode-normalization/">Go 言語と Unicode 正規化</a>」では Apple の旧ファイルシステム HFS+ を散々に貶したが, <del>Google もタイガイである</del>。(Chrome だけじゃなかった)</p>
<p>ちなみに,この現象は Firefox (またはその系列のブラウザ)では発生しない。
私のメインブラウザは Firefox (Quantum マンセー!) なので,指摘されるまで全く気づかなかった。
ゴメンペコン<sup id="fnref:4"><a href="#fn:4" class="footnote-ref" role="doc-noteref">4</a></sup>。</p>
<p>とはいえ,これは相当にレアケースなので滅多なことでは発現しないだろう。
<del>個人的には Noto Serif の和文フォントが Web フォントで登場するまでは「<a href="http://sawarabi-fonts.osdn.jp/" title="さわらびフォント">さわらび明朝</a>」で頑張るつもりである。
なので,特に対策しない予定。</del>
(ゴメン。<a href="https://text.baldanders.info/remark/2017/12/installing-noto-serif-jp-in-www_baldanders_info/" title="結局 Noto Serif JP を Web フォントとして導入した">日和った</a>)</p>
<p>ご不便をおかけすることもあるかもですが,悪しからずご了承の程を。</p>
<h2>ブックマーク</h2>
<ul>
<li><a href="https://qiita.com/umeume66/items/01291353fc43c17da992">「Noto Serif Japanese」を使ってみたので、自分用メモ。 - Qiita</a></li>
</ul>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>最近発表された Noto Serif の和文フォントはまだ Web フォントとしては提供されていない。 <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:2">
<p>デフォルトの Sans Serif が使われていないことは Chrome のデベロッパー・ツールでも確認済み。 <a href="#fnref:2" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:3">
<p>今回は「異体字セレクタ(Variation Selector)」については検証していない。そもそも異体字セレクタによる文字表示はアプリケーションとフォントの両方が対応していないと成り立たない。メジャー・ブラウザは異体字セレクタに対応しているそうだが,私は対応するフォントを持ってないし,対応できる自由な Web フォントが(CDN 等で)提供されているという話も聞かない。したがって今回はスルーの方向で。 <a href="#fnref:3" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
<li id="fn:4">
<p>一応このサイトは Firefox (Quantum) と Chrome ならレイアウトが崩れないように考えているつもり。旧 Firefox や IE や Safari などレガシーなブラウザはスルーで。 Edge は対応したいところだが手元に環境を持ってないので確認&対応できない。 Win10 を導入する予定は,今のところはない。換装するなら Linux 系のデスクトップにするつもり。 <a href="#fnref:4" class="footnote-backref" role="doc-backlink">↩︎</a></p>
</li>
</ol>
</div>