ひらがなとカタカナの文字間が詰まってしまう

以前のテーマ、「段落を整えて表示する」シリーズを作成していた頃からチョイチョイ気になっていました。

「なんか文字が詰まって見えるなぁ、、、」

恐る恐る調べてみました。

ペアカーニングっぽいのが効いてる？
ブラウザの仕様？
なかぁったこぉとには〜してはいけぇなぁい〜♪
和欧間スペース
1. thinspace
2. 半角スペース
  1. 余談：半角スペースを狭くするために試みたこと
まとめ

ペアカーニングっぽいのが効いてる？

改行していない一つの段落
表示フォントはHiragino Sansのウェイト300
使用ブラウザはMac版safari 12.0.2
font-feature-settingsは使っていない

まずは結果から。上記の画像ですが、

「て」や「い」など、同じ文字を並べただけではキッチリと表示されています。

しかし、「いて」になると詰まってしまいます。それでいて、詰まっても良さそうな「りょ」や「リョ」は詰まっていません。

うーん、、、挙動の規則性がよく分かりません；；

ブラウザの仕様？

手持ちの環境で調べてみると、 Mac 版の Chrome では詰まらずに表示されましたが、 Mac 版 Firefox 、 iOS 版 Safari・Chrome でも詰まってしまいます。

これでは「段落を整えて表示する」なんてムリっすね；；

．．．なにか聞こえる

うん。まただね。ちゃぶ台返しって言うの？こぉ今までやってきた事をアッサリと無かった事にする、ってゆーかされるってゆーか、、、でもな？今までも何とかしてきたやん。ちゃぶ台ひっくり返されてもひっくり返されへん様に置き場所変えたり、新しいちゃぶ台用意したり、まぁ、またひっくり返されるんやけどなｗでもな、ちゃぶ台なかったら食器置けへん。そーすっと丼ものしか食われへん。ワンディッシュメニューや。しかもな、両手塞がっとるからビール呑まれへん。アカンやろ？さぁ、新しいちゃぶ台用意するで。準備はエエか？ワイはエエで。

．．．いこうか

check

カスタマイズは自己責任でお願いします。
wp-cocoon.comサイトのサポート対象外となります。

なかぁったこぉとには〜してはいけぇなぁい〜 ♪

STEINS;GATE

まずは justify

まぁ、詰まってるんだから伸ばせば？って事で「text-align: justify;」にしてみると、

うん、三行目はしっかり（？）と justify ってるけど、一行目はダメっすね。次。

font-feature-settings: "fwid";

んじゃ、強制的に全角にしてみよう。

上記の状態に「font-feature-settings: "fwid";」を付加すると、

こうなる。

おぉすべてみごとにぜんかくだぁ。いや、「text-align: start;」のコロンの右にある半角スペースが全角になってないなぁ。

ともあれ、文字詰めは解消されています。次。

font-feature-settings: "pwid"; with jQuery

文字詰めは解消されたので、後は１バイト文字に「font-feature-settings: "fwid";」が適用されない様にしたい。そこで、できれば使いたくはなかった jQuery を使います。

 /* <p> 内にある半角英数字記号文字 ( 列 ) に span */ 
 jQuery(function(){ 
   jQuery("p").each(function() { 
     jQuery(this).html( 
       jQuery(this).html().replace( 
         /(<\/?[^>]+>)|([\s!-;=-~]+)/g, 
         function(){ 
           if( arguments[1] ) return arguments[1] ; 
           if( arguments[2] ) return '<span class = "thx_wao">' + arguments[2] + '</span>' ; 
         } 
       ) 
     ); 
   }); 
 });

が持つ文字列の中で、連続する１バイトの英数字（但し、 html タグを除く）を で囲みます。んで、

 .thx_wao { 
	 font-feature-settings: "pwid"; 
 }

とすれば１バイトの英数字はプロポーショナルとなり、次の様に表示されます。

こちらの記事がとても参考になりました。

JavaScript で「html タグ以外」にヒットさせる正規表現。

…そんなものは無さそうなので、 exec や replace のキャプチャ機能を使 ...

余談： jQuery を避けていた理由

ずっと以前から、１バイト文字を したかったのです。目的は和欧間のスペースを取るためです。あくまで個人的な好みなのですが、和欧間にスペースがないと美しくないんですｗ

で、今回の様に jQuery を使えば可能になるのは分かってはいたのですが、ホラ。使えないじゃないですか、 AMP ページで。

ですので、なんとか php で処理できないかと悩んでいたのですが、まだそこまでの知識も技量も持ち合わせてはいないので解決出来ずじまいでした。

まぁ、今回でどうしても する必要が出来てしまったので、 jQuery を使用します。

和欧間スペース

thinspace

さて、念願の１バイト が叶ったので和欧間スペースも実装します。

css はこんな感じ。 Unicode+2009 の「thinspace （極細スペース？）」を の前後に挿入します。

 .thx_wao::before { 
   content: "\2009"; 
 } 
 .thx_wao::after { 
   content: "\2009"; 
 }

表示してみると、

うん。イイ感じにアキが出来ています ♪

しかし、行頭である「text-align: start;」の左側にもアキが出来てしまっています。

どうやら「thinspace」は行頭に吸収されないようなので、

 .thx_wao::before { 
   content: "\0020"; 
 } 
 .thx_wao::after { 
   content: "\0020"; 
 }

大人しく半角スペースを使います。

半角スペース

よし。行頭のアキがとれました。「thinspace」に比べるとアキ過ぎな気もしますが、まぁ許容範囲内とします。

背景のグリッドを解除するとこんな感じです。

余談：半角スペースを狭くするために試みたこと

「content: "\0020";」と一緒に「font-size: 0.5rem」と指定すると、スペースは縮まりましたが行間が広がってしまいました。

また、「transform: scale(0.5, 1);」としても効きませんでした。「display: inline-block;」を併記してもダメでしたね；；

まとめ

本当に、手間の割には実りの少ないテーマですｗ

しかし、和欧間スペースを実装するいい機会ともなりました。これまでは手動で半角スペースを打ってましたからねｗ

となると、これまでの手動半角スペースと .thx_wao の和欧間スペースが重複してしまいますが、おそらく近い内に Cocoon の jQuery がバージョンアップしそうなので、そのタイミングで .trim() 処理をする予定です。

jQuery のアップデート · yhira/cocoon@47eee2e

100 ％ GPL の無料 Wordpress テーマです。開発中の開発バージョンです。安定版をダウンロードする場合は、 Cocoon 配布サイトからダウンロードしてください。 - jQuery のアップデート · yhira/cocoon@47eee2e

ただ文中でも述べた様に AMP ページでは作用しないので、 php での処理方法は今後も課題ですね。