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

前回 グリッドからルビがズレない様にカスタマイズを行いましたが 色々と不具合を確認したので修正していきます

禁則の伴っていないルビ

禁則の伴っていないルビ
禁則の伴っていないルビ

が行頭に来ており 禁則処理が効いていません ;;

原因は <ruby> タグを display: inline-block; にしたためで 読み仮名が親文字よりも長い (「CV-33 かるろ・べろーちぇ この様な 場合 親文字に width 指定をしたいが為の処置でした

これでは美しくないので 対処法を考えました

如何にスペースを確保するか

この問題の解決方法は 如何いかにして display: inline; のまま親文字の前後にスペース アキ を確保するかです

スペースを確保したいので 単純に space を追加します

jQuery

 // <span class="thx_quo_spc"> の作成
 var q_space_length = (yomigana_length - ow) / fz * 2; 
 var span_q_space = ''; 
 if (yomigana_length > ow) { 
	 span_q_space = '<span class="thx_quo_spc">'; 
	 for (var i = 0; i < q_space_length; i++) { 
		 span_q_space += '&#x2005;'; 
	 } 
	 span_q_space += '</span>'; 
 } 


 // html の合成
 jQuery(this).html(span_q_space + ruby_html + span_q_space + yomigana_span); 

まずは読み仮名部の px 数から親文字の px 数を減算し 何文字分の読み仮名が親文字から余剰よじょうしているかを計算します

続いて 余剰した読み仮名と同じ数だけ 四分スペース &#x2005;)」 <span class="thx_quo_spc"> くくります

最後に親文字の前後に <span class="thx_quo_spc"> を付加します

css

 ruby { 
	 position: relative; 
	 /* display: inline-block; */ 
	 text-align: center; 
 } 

display: inline-block; を外します

修正比較画像

禁則の伴っていないルビ
禁則の伴っていないルビ
禁則の伴ったルビ
禁則の伴ったルビ

display: inline-block; を外したことにより 禁則処理が適用される様になりました

この状態で 読み仮名が親文字よりも長いルビを確認したところ 別の問題が生じました

親文字の幅が縮んでしまう

テーマ「Twenty Nineteen」で表示
テーマ Twenty Nineteen で表示

カスタマイズに汎用性を持たせたいため テーマ Twenty Nineteen で表示してみたところ みにく の箇所は読み仮名が親文字よりも長いため 前後にアキが確保されているのですが ひど の箇所にもアキが確保されてしまっています

原因を調べてみると font-size: 22px; であるにもかかわらず jQuery(this).outerWidth() 21px で取得されている様です

本来であれば 何故 21px になってしまうかを究明するべきなのですが そこにはこだわらずに 21px で取得されたものを 22px として認識させる方法を考えます 汎用性という面からも 個別対応は望ましくないかな?と

一応言っておきますけれど これ のがれですから

読み仮名の整数倍に修正

jQuery

 var ow = jQuery(this).outerWidth(); 
		 ow = Math.round(ow / fz * 2) * fz / 2; 

親文字の outerWidth() 読み仮名の整数倍になる様に四捨五入します アッサリ

修正結果

修正後
修正後

うん いいですね では次の問題です

Firefox で表示されない

Firefoxでの表示
Firefox での表示

はい 微塵みじんも表示されません ゼロです ゼロ

試しにカスタマイズを取り除いてみると

カスタマイズなし
カスタマイズなし

うん 表示されるよね ってちょっと待って !? グリッドに揃ってる?前回のズレズレの画像と比較してみると

カスタマイズを思い立った画像
カスタマイズを施していないFirefoxでの表示画像
カスタマイズを施していない Firefox での表示画像

なんてこった、、、 Firefox では小細工などせずとも揃うのか、、、 調べてみると Firefox display: ruby; display: ruby-text; をサポートしているのでズレないっぽい

、」 font-size が気にはなりますが デフォルトの状態でここまで表示できるのであれば これはもう Firefox の仕様って事でいいんじゃないだろうか?

一応言っておきますけれど これ のがれですから

Firefox はデフォルトで

Firefox ではカスタマイズを適用しない様 ブラウザ判別を行います

php

 // ブラウザ判別
 function browser_body_class( $classes ) { 
	 global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone; 

	 if ( $is_lynx ) { 
		 $classes[] = 'lynx'; 
	 } elseif ( $is_gecko ) { 
		 $classes[] = 'gecko'; 
	 } elseif ( $is_opera ) { 
		 $classes[] = 'opera'; 
	 } elseif ( $is_NS4 ) { 
		 $classes[] = 'ns4'; 
	 } elseif ( $is_safari ) { 
		 $classes[] = 'safari'; 
	 } elseif ( $is_chrome ) { 
		 $classes[] = 'chrome'; 
	 } elseif ( $is_IE ) { 
		 $classes[] = 'ie'; 
	 } else { 
		 $classes[] = 'unknown'; 
	 } 

	 if ( $is_iphone ) { 
		 $classes[] = 'iphone'; 
	 } 
	 return $classes; 
 }//browser_body_class( $classes ) 

 add_filter( 'body_class', 'browser_body_class' ); 

WordPress のグローバル変数を利用し ブラウザ名を <body> タグの class に追加します

こちらのページを参考にさせて頂きました

css

 rt { 
	 display: none; 
 } 

 .gecko rt { 
	 display: ruby-text; 
 } 

 .gecko .thx_yomi { 
	 display: none; 
 } 

デフォルトでは display: none; を適用している <rt> タグを display: ruby-text; とし カスタマイズで生成される読み仮名の .thx_yomi を非表示にします

カスタマイズを打ち消しているだけなので 結果は割愛します

では 次の問題です

Chrome 10px 問題

もぉこのタイトルだけでピンと来る方もいらっしゃるのではないでしょうか?

10pxになってしまう読み仮名
10px になってしまう読み仮名

Chrome はデフォルトの状態で 最小表示フォントサイズが 10px に設定されています 当サイトでは本文のフォントサイズを 18px に設定しており ルビの読み仮名は半分の 9px に設定しています Chrome で表示すると読み仮名が 10px に切り上げ られてしまうため 親文字からズレて表示されてしまいます

font-size は変更しない

結構有名な問題 仕様 の様で 解決策として transform: scale(); が紹介されています 当サイトでも同様に対処したいと思います

css

 .thx_yomi { 
	 -webkit-user-select: none; 
	 user-select: none; 
	 position: absolute; 
	 display: inline-flex; 
	 justify-content: space-between; 
	 top: -0.5em; 
	 left: 0.25em; 
	 right: 0.25em; 
	 line-height: 1em; 
 } 

 .thx_yomi_mono { 
	 display: inline-block; 
	 transform: scale(0.5); 
	 transform-origin-y: top; 
 } 

 .thx_yomi span { 
	 -webkit-user-select: none; 
	 user-select: none; 
	 transform: scale(0.5); 
	 transform-origin: top left; 
	 width: 0.5em; 
 } 

transform: scale(0.5); 50 %縮小を行い transform-origin で縮小原点を指定します

修正比較画像

10pxになってしまう読み仮名
10px になってしまう読み仮名
サイズ50%の読み仮名
サイズ 50 %の読み仮名

続いて 発覚ホヤホヤの問題点です

禁則処理が効かなくなる

Chromeでの表示
Chrome での表示
Firefoxでの表示
Firefox での表示
Safariでの表示
Safari での表示

正に この記事の作成中に発覚した問題点なのですが Safari のみ禁則処理が効かなくなっています

この問題の原因が中々分からず もぉ Safari の仕様って事にして また言い逃れをしようとも思ったのですが カスタマイズをほどこしていない <ruby><rt> タグの場合はキチンと禁則処理が効いているので 原因は明らかにカスタマイズにあります

ちまちまと調べていくとようやく原因が分かりました

原因は rt {display: none;}

もぉね 正直ね メンドくせぇぇぇ って思いました

<rt> タグが原因でグリッドに揃わない って <rt> の代替えを用意した んで ここへ来て <rt> タグをかす必要がある、、、 あれ?詰んでる?

んまぁ 何とか出来んかと色々と <rt> タグにスタイルを適用し 試行錯誤しました

visibility: hidden; line-height: 0; font-size: 0px; transform: scale(0.001); position: absolute;」、、、 効かない効かない 脳内はスターマリオの BGM で一杯です

ふと 読み仮名をカラにすればあるいはっ、、、 と思い立ち 試した処アッサリ成功しましたので この様に修正します

jQuery

 /*  ルビ  */ 
 jQuery(window).on('load', function() { 
	 //chromesafari の場合
	 if (jQuery('body').hasClass('chrome')||jQuery('body').hasClass('safari')) { 
		 jQuery('ruby').each(function() { 

			 // <rt> を非表示にした状態で outerWidth を取得
			 var ruby_html = jQuery(this).html(); 
			 var rt_none   = ruby_html.replace('<rt>', '<rt style="display: none;">'); 
			 jQuery(this).html(rt_none); 

			 var fz = parseInt(jQuery(this).css('font-size')); 
			 var ow = jQuery(this).outerWidth(); 
			 ow = Math.round(ow / fz * 2) * fz / 2; 

			 // <rt> 非表示の解除
			 // jQuery(this).html(ruby_html); 


			 // <div class="thx_yomi  > の作成
			 var yomigana        = jQuery(this).children("rt").text(); 
			 var yomigana_length = yomigana.length * fz / 2; 
			 var yomigana_span   = '<div class="thx_yomi'; 

			 if ((yomigana.length == 1) && (ow > fz)) { 
				 yomigana_span += ' thx_yomi_mono'; 
			 } 

			 if (yomigana_length + fz / 2 > ow) { 
				 yomigana_span += ' thx_yomi_long'; 
			 } 

			 yomigana_span += '">'; 

			 //  よみがなのループ
			 for (var i = 0; i < yomigana.length; i++) { 
				 yomigana_span += '<span>' + yomigana.substr(i, 1) + '</span>'; 
			 } 

			 yomigana_span += '</div>';// <div class="thx_yomi  > 


			 // <span class="thx_quo_spc"> の作成
			 var q_space_length = (yomigana_length - ow) / fz * 2; 
			 var span_q_space = ''; 
			 if (yomigana_length > ow) { 
				 span_q_space = '<span class="thx_quo_spc">'; 
				 for (var i = 0; i < q_space_length; i++) { 
					 span_q_space += '  '; 
				 } 
				 span_q_space += '</span>'; 
			 } 


			 // html の合成
			 jQuery(this).html(span_q_space + ruby_html + span_q_space + yomigana_span); 

		 });//jQuery('ruby').each 

		 //<rt> 内を削除
		 jQuery('rt').each(function() { 
			 jQuery(this).html(''); 
		 }); 
	 }//if (jQuery('body').hasClass('chrome')||jQuery('body').hasClass('safari')) 
 }); 

css

 /*  行間の崩れないルビ  */ 
 ruby { 
	 position: relative; 
	 text-align: center; 
 } 

 rt { 
	 /* display: none; */ 
 } 

 .amp rt { 
	 /* display: block; */ 
 } 

 .editor-rich-text rt { 
	 /* display: block; */ 
 } 

 .gecko rt { 
	 /* display: ruby-text; */ 
 } 

 .gecko .thx_yomi { 
	 /* display: none; */ 
 } 

 .thx_yomi { 
	 -webkit-user-select: none; 
	 user-select: none; 
	 position: absolute; 
	 display: inline-flex; 
	 justify-content: space-between; 
	 top: -0.5em; 
	 left: 0.25em; 
	 right: 0.25em; 
	 line-height: 1em; 
 } 

 .thx_yomi_mono { 
	 display: inline-block; 
	 transform: scale(0.5); 
	 transform-origin-y: top; 
 } 

 .thx_yomi_long { 
	 left: 0px; 
	 right: 0px; 
 } 

 .thx_yomi span { 
	 -webkit-user-select: none; 
	 user-select: none; 
	 transform: scale(0.5); 
	 transform-origin: top left; 
	 width: 0.5em; 
 } 

 .thx_quo_spc { 
	 -webkit-user-select: none; 
	 user-select: none; 
 } 

Firefox では <rt> の読み仮名が必要なので <rt> を空にするには必然的にブラウザ判別が必要になります

であれば <div class="thx_yomi"> の付与も併せてブラウザ判別を行った方が効率が良いため併記した処 Firefox への余計な記述が減ったため かえって css がスッキリしました

修正後の画像

Chromeでの表示:修正後
Chrome での表示修正後
Firefoxでの表示:修正後
Firefox での表示修正後
Safariでの表示:修正後
Safari での表示修正後

まとめようと思ったら更なる問題が、、、

禁則の伴っていないルビ
禁則の伴っていないルビ

復活しちゃった

、、、
ん〜 rt {display: none;} にすると禁則が効く、、、

あれ?いよいよ詰んでないか?コレ

落ち着こう 一旦落ち着こう

ふぅ、、、 そもそも!本当に rt {display: none;} が原因なのか? <rt> タグの初期値は display: block; なので width 値を持つ その値は親の <ruby> タグに影響を与えるけども そもそも <rt> タグの初期値は display: inline; なので width 値が変化しようとも禁則には関係ないハズ

よし まずはその辺りから調べてみよう

<ruby> タグの幅

<ruby>タグの幅 その①
<ruby> タグの幅 その

ふむ 文字サイズが 18px と四分スペースが 4.5px×2 9px 足して 27px の処が justify で間延びして 28px になったってトコかな 次行ってみよう

タグの幅 その②
<ruby> タグの幅 その

んん?あぁ 読み仮名部の <div class="thx_yomi ..."> が次の行頭にあふれてるのか 何かのヒントになりそうなので 読み仮名を親文字の前に置いてみると

タグの幅 その② 変更後
<ruby> タグの幅 その  変更後

ほうほう いいね しかも みにく の読み仮名もキレイに詰まっている この表記順の方が良さそうですね

処理結果に差異が現れたので 試しにこの表記順を

読み仮名が後ろ
読み仮名が後ろ

に適用してみると

読み仮名が前
読み仮名が前

こうなる

、、、 ん〜 素直に喜べないなぁ

これって 読み仮名が行頭に来ているから は行頭ではない って認識なんだろうか?まぁ それはそれで辻褄つじつまは合ってるんですが んじゃ行末の “「 は何が原因なんだろう やっぱり rt {display: none;} が原因なんだろうか

なんか こう クリティカルな原因がつかめないので非常にモヤっとしますが とりあえずこの仕様で様子見ですかね

暫定的な修正

jQuery

 // html の合成
 // jQuery(this).html(span_q_space + ruby_html + span_q_space + yomigana_span); 
 jQuery(this).html(yomigana_span + span_q_space + ruby_html + span_q_space); 

yomigana_span の置き場所を変更します

まとめ

想定よりも長くなってしまいました しかも モヤっとした〆ですし

ソースコードもとっ散らかってしまってますが 他のカスタマイズと併せて後日プラグインにする予定です

他のカスタマイズってのは 既に当サイトに適用しておりますので この記事自体やスクリーンショットなどで気付かれている方もみえるかもしれません

ぶら下がり 役物詰め になります

コメント