html上で誌面の様な文字組版の実現

web 上での文字組版、 特に 「連続する役物 （句読点や括弧 《かっこ》 類） の扱い」 と 「和欧文混植処理」 が現状の一般的なブラウザでは上手く表現されておらず、 誌面の組版と比較すると可読性の低いものになっております。

この問題を解消するべく、 W3C の 「日本語組版処理の要件 （JIS X 4051 （日本語組版規則） に基づく）」 を参考にし、 美しい日本語の組版を実現していきます。

手法

php で文字種を判別し、 css で各文字種の表示をコントロールします。 今回は WordPress のプラグイン、 「thx.jp²」 としてこれらの機能を包括し、 このドキュメントも WordPress を用いて作成しました。

表示サンプルとして、 以下の 3 種類を次項より提示します。

• 未適用（一般的なブラウザでの表示）
• halt適用（font-feature-settings: haltを使用した単一的な半角化）
• thx.jp²適用（JIS X 4051準拠を目指した組版）

連続する役物　適用サンプル

https://g20.org/jp/overview/ より引用・一部修正

未適用 （両端揃え解除）

　安倍総理は議長として、「世界経済、貿易・投資」、「イノベーション（デジタル経済・AI）」、「格差への対処、包摂的かつ持続可能な世界」、「気候変動・環境・エネルギー」をテーマとした各セッションで、意見の『対立』ではなく『共通点』を見出すべく、議論を積極的に主導した。

halt 適用

　安倍総理は議長として、「世界経済、貿易・投資」、「イノベーション（デジタル経済・AI）」、「格差への対処、包摂的かつ持続可能な世界」、「気候変動・環境・エネルギー」をテーマとした各セッションで、意見の『対立』ではなく『共通点』を見出すべく、議論を積極的に主導した。

thx.jp² 適用

　安倍総理は議長として、 「世界経済、 貿易・投資」、 「イノベーション （デジタル経済・ AI）」、 「格差への対処、 包摂的かつ持続可能な世界」、 「気候変動・環境・エネルギー」 をテーマとした各セッションで、 意見の 『対立』 ではなく 『共通点』 を見出すべく、 議論を積極的に主導した。

和欧文混植処理　サンプル

https://www.apple.com/jp/ipad/why-ipad/ より引用・一部修正

未適用 （両端揃え解除）

　すべてのiPadはAppleが設計した先進的なチップを持っています。 iPad Proの、 Neural Engineを搭載したA12X Bionicがその一例です。 このようなチップは、 あなたの写真、 ゲーム、 拡張現実の体験を大きく生まれ変わらせます。 毎日使う様々なアプリケーションだけでなく、 Adobe Photoshop CCなどのプロ向けアプリケーションさえスムーズに動くのは、 このチップの力があるからです。

halt 適用

　すべてのiPadはAppleが設計した先進的なチップを持っています。iPad Proの、Neural Engineを搭載したA12X Bionicがその一例です。このようなチップは、あなたの写真、ゲーム、拡張現実の体験を大きく生まれ変わらせます。毎日使う様々なアプリケーションだけでなく、Adobe Photoshop CCなどのプロ向けアプリケーションさえスムーズに動くのは、このチップの力があるからです。

thx.jp² 適用

　すべての iPad は Apple が設計した先進的なチップを持っています。 iPad Pro の、 Neural Engine を搭載した A12X Bionic がその一例です。 このようなチップは、 あなたの写真、 ゲーム、 拡張現実の体験を大きく生まれ変わらせます。 毎日使う様々なアプリケーションだけでなく、 Adobe Photoshop CC などのプロ向けアプリケーションさえスムーズに動くのは、 このチップの力があるからです。

ぶら下げ組　サンプル