WordPressでInDesignの様な文字組−その⑥

 preg_replace_callback_array( 
	 [ 
		 '{[、。，． ]}uis'  => function ( $match ) { 
			 return 
				 '<span class = "thx_punc_wrap">' . 
					 '<span class = "thx_punctuation">' . 
						 $match[0] . 
					 '</span>' . 
				 '</span>' . 
				 '<span class = "thx_clps_spc"> </span>'; 
		 }, 
	 ], 
	 $str 
 )//preg_replace_callback_array() 

 // 半角スペース用に Kosugi をエンキュー
 function enqueue_kosugi_space() { 
	 wp_enqueue_style( 'google-webfont-style', '//fonts.googleapis.com/css?family=Kosugi&text= ' ); 
 } 
 add_action( 'wp_enqueue_scripts', 'enqueue_kosugi_space' ); 

html を 「タグ」 と 「それ以外」 に分割し、 「それ以外」 の箇所を正規表現で検索・置換します。

検索された 「、」・「。」・「，」・「．」 を二つの span で囲み、 その後ろに半角スペースを追加します。

また、 追加された半角スペース用の書体として、 Google Fonts の Kosugi を半角スペースだけエンキューします。

 /*  句読点  */ 
 .thx_punctuation { 
	 position: absolute; 
	 line-height: 1em; 
 } 

 .chrome .thx_punctuation { 
	 bottom: -0.1em; 
 } 

 .gecko .thx_punctuation { 
	 bottom: -0.15em; 
 } 

 .safari .thx_punctuation { 
	 bottom: -0.15em; 
 } 

 /*  句読点のラップ  */ 
 .thx_punc_wrap { 
	 position: relative; 
	 display: inline-block; 
 } 

 /*  相殺スペース  */ 
 .thx_clps_spc { 
	 -webkit-user-select: none; 
	 user-select: none; 
 } 

 .chrome .thx_clps_spc { 
	 font-family: sans-serif; 
	 font-feature-settings: "hwid"; 
 } 

 .gecko .thx_clps_spc { 
	 font-family: Kosugi; 
	 line-height: 0; 
 } 

 .safari .thx_clps_spc { 
	 font-family: Kosugi; 
	 line-height: 0; 
 } 

 /*  句読点のラップ ＋ 相殺スペース  */ 
 .chrome .thx_punc_wrap + .thx_clps_spc { 
	 font-feature-settings: "fwid"; 
 } 

 .gecko .thx_punc_wrap + .thx_clps_spc { 
	 font-size: 2em; 
 } 

 .safari .thx_punc_wrap + .thx_clps_spc { 
	 font-size: 2em; 
 } 

まずは、 句読点そのものを囲んでいる .thx_punctuation を 「position: absolute;」 とします。 これで （<p> タグなどの） 親タグ外への配置が可能になります。

続いて、 放蕩ほうとう span となってしまった .thx_punctuation の拠り所よりどころとして、 .thx_punc_wrap を 「position: relative;」 とします。

この状態で、 句読点は元の場所をキープできるものの、 「席」 がない状態なので後続する文字が覆おおい被かぶさってきます。

そこで、 被ってくる文字として .thx_clps_spc を全角スペース幅として用意します。

ここからが、 ブラウザに拠よって挙動が変わってきます。

Chrome は素直で良い子です。 php で追加した半角スペースを 「font-feature-settings: "fwid";」 とする事で全角の幅になってくれます。

Firefox と Safari は半角スペースに対する 「font-feature-settings: "fwid";」 が効いてくれません。

そこで、 半角スペースが 50 ％幅の Kosugi を採用し、 「font-size: 2em;」 とする事で全角幅を確保します。

そもそも、 php の時点で全角スペースを追加すればよいのでは？との意見もあるかと思いますが、 html の性質上、 半角スペースは行頭・行末に吸収されたり、 複数個連続しても一個になったりと、 （web 上で） 文字組版を行う際はハンドリングがよく、 非常に便利です。