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

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

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

恐る恐る調べてみました

スポンサーリンク

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

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

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

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

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

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

ブラウザの仕様?

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

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

... なにか聞こえる

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

... いこうか

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

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

まずは justify

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

start;とjustify;の比較

うん 三行目はしっかり justify ってるけど 一行目はダメっすね

font-feature-settings: "fwid";

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

適用ナシ

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

font-feature-settings: "fwid";

こうなる

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

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

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

文字詰めは解消されたので 後は1バイト文字に 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>' ; 
         } 
       ) 
     ); 
   }); 
 }); 

<p> が持つ文字列の中で 連続する1バイトの英数字 但し html タグを除く <span class = "thx_wao"> で囲みます んで

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

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

font-feature-settings: "pwid";

余談 jQuery を避けていた理由

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

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

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

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

和欧間スペース

thinspace

さて 念願の1バイト <span> が叶ったので和欧間スペースも実装します

css はこんな感じ Unicode+2009 thinspace 極細スペース?)」 <span> の前後に挿入します

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

表示してみると

U+2009 /  

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

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

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

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

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

半角スペース

U+0020 (SPACE)

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

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

和欧間スペース アリ
和欧間スペース アリ
和欧間スペース ナシ
和欧間スペース ナシ

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

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

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

まとめ

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

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

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

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

コメント