以前のテーマ、 「段落を整えて表示する」 シリーズを作成していた頃からチョイチョイ気になっていました。
「なんか文字が詰まって見えるなぁ、、、」
恐る恐る調べてみました。
ペアカーニングっぽいのが効いてる?
- 改行していない一つの段落
- 表示フォントはHiragino Sansのウェイト300
- 使用ブラウザはMac版safari 12.0.2
- font-feature-settingsは使っていない
まずは結果から。 上記の画像ですが、
「て」 や 「い」 など、 同じ文字を並べただけではキッチリと表示されています。
しかし、 「いて」 になると詰まってしまいます。 それでいて、 詰まっても良さそうな 「りょ」 や 「リョ」 は詰まっていません。
うーん、、、 挙動の規則性がよく分かりません ;;
ブラウザの仕様?
手持ちの環境で調べてみると、 Mac 版の Chrome では詰まらずに表示されましたが、 Mac 版 Firefox 、 iOS 版 Safari・Chrome でも詰まってしまいます。
これでは 「段落を整えて表示する」 なんてムリっすね ;;
... なにか聞こえる
うん。 まただね。 ちゃぶ台返しって言うの?こぉ今までやってきた事をアッサリと無かった事にする、 ってゆーかされるってゆーか、、、 でもな?今までも何とかしてきたやん。 ちゃぶ台ひっくり返されてもひっくり返されへん様に置き場所変えたり、 新しいちゃぶ台用意したり、 まぁ、 またひっくり返されるんやけどな w でもな、 ちゃぶ台なかったら食器置けへん。 そーすっと丼ものしか食われへん。 ワンディッシュメニューや。 しかもな、 両手塞がっとるからビール呑まれへん。 アカンやろ?さぁ、 新しいちゃぶ台用意するで。 準備はエエか?ワイはエエで。
... いこうか
なかぁったこぉとには〜してはいけぇなぁい〜 ♪
まずは justify
まぁ、 詰まってるんだから伸ばせば?って事で 「text-align: justify;」 にしてみると、
うん、 三行目はしっかり (?) と justify ってるけど、 一行目はダメっすね。 次。
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バイトの英数字はプロポーショナルとなり、 次の様に表示されます。
こちらの記事がとても参考になりました。
余談: jQuery を避けていた理由
ずっと以前から、 1バイト文字を <span> したかったのです。 目的は和欧間のスペースを取るためです。 あくまで個人的な好みなのですが、 和欧間にスペースがないと美しくないんです w
で、 今回の様に jQuery を使えば可能になるのは分かってはいたのですが、 ホラ。 使えないじゃないですか、 AMP ページで。
ですので、 なんとか php で処理できないかと悩んでいたのですが、 まだそこまでの知識も技量も持ち合わせてはいないので解決出来ずじまいでした。
まぁ、 今回でどうしても <span> する必要が出来てしまったので、 jQuery を使用します。
和欧間スペース
thinspace
さて、 念願の1バイト <span> が叶ったので和欧間スペースも実装します。
css はこんな感じ。 Unicode+2009 の 「thinspace (極細スペース?)」 を <span> の前後に挿入します。
.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;」 を併記してもダメでしたね ;;
まとめ
本当に、 手間の割には実りの少ないテーマです w
しかし、 和欧間スペースを実装するいい機会ともなりました。 これまでは手動で半角スペースを打ってましたからね w
となると、 これまでの手動半角スペースと .thx_wao の和欧間スペースが重複してしまいますが、 おそらく近い内に Cocoon の jQuery がバージョンアップしそうなので、 そのタイミングで .trim() 処理をする予定です。
ただ文中でも述べた様に AMP ページでは作用しないので、 php での処理方法は今後も課題ですね。
コメント