前回、 グリッドからルビがズレない様にカスタマイズを行いましたが、 色々と不具合を確認したので修正していきます。
禁則の伴っていないルビ
「っ」 が行頭に来ており、 禁則処理が効いていません ；；
原因は <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 += ' ';
}
span_q_space += '</span>';
}
// html の合成
jQuery(this).html(span_q_space + ruby_html + span_q_space + yomigana_span);
まずは読み仮名部の px 数から親文字の px 数を減算し、 何文字分の読み仮名が親文字から余剰しているかを計算します。
続いて、 余剰した読み仮名と同じ数だけ 「四分スペース （ ）」 を <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」 で表示してみたところ、 「醜く」 の箇所は読み仮名が親文字よりも長いため、 前後にアキが確保されているのですが、 「酷い」 の箇所にもアキが確保されてしまっています。
原因を調べてみると、 「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 は 「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 問題
もぉこのタイトルだけでピンと来る方もいらっしゃるのではないでしょうか？
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 で縮小原点を指定します。
修正比較画像
続いて、 発覚ホヤホヤの問題点です。
禁則処理が効かなくなる
正に、 この記事の作成中に発覚した問題点なのですが、 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 で一杯です。
ふと、 読み仮名を空にすれば或いはっ、、、 と思い立ち、 試した処アッサリ成功しましたので、 この様に修正します。
- カスタマイズは自己責任でお願いします。
- wp-cocoon.comサイトのサポート対象外となります。
jQuery
/* ルビ */
jQuery(window).on('load', function() {
//chrome・safari の場合
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 がスッキリしました。
修正後の画像
まとめようと思ったら更なる問題が、、、
復活しちゃった ♪
、、、
ん〜、 rt {display: none;} にすると禁則が効く、、、
あれ？いよいよ詰んでないか？コレ。
落ち着こう。 一旦落ち着こう。
ふぅ、、、 そもそも！本当に rt {display: none;} が原因なのか？ <rt> タグの初期値は display: block; なので width 値を持つ。 その値は親の <ruby> タグに影響を与えるけども、 そもそも <rt> タグの初期値は display: inline; なので width 値が変化しようとも禁則には関係ないハズ。
よし、 まずはその辺りから調べてみよう。
<ruby> タグの幅
ふむ、 文字サイズが 18px と四分スペースが 4.5px×2 で 9px 。 足して 27px の処が justify で間延びして 28px になったってトコかな。 次行ってみよう。
んん？あぁ、 読み仮名部の <div class="thx_yomi ..."> が次の行頭に溢れてるのか。 何かのヒントになりそうなので、 読み仮名を親文字の前に置いてみると、
ほうほう。 いいね。 しかも、 「醜く」 の読み仮名もキレイに詰まっている。 この表記順の方が良さそうですね。
処理結果に差異が現れたので、 試しにこの表記順を
に適用してみると、
こうなる。
、、、 ん〜、 素直に喜べないなぁ。
これって、 読み仮名が行頭に来ているから 「っ」 は行頭ではない。 って認識なんだろうか？まぁ、 それはそれで辻褄は合ってるんですが、 んじゃ行末の “「” は何が原因なんだろう。 やっぱり 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 の置き場所を変更します。
まとめ
想定よりも長くなってしまいました。 しかも、 モヤっとした〆ですし。
ソースコードもとっ散らかってしまってますが、 他のカスタマイズと併せて後日プラグインにする予定です。
他のカスタマイズってのは、 既に当サイトに適用しておりますので、 この記事自体やスクリーンショットなどで気付かれている方もみえるかもしれません。
「ぶら下がり」 と 「役物詰め」 になります。
コメント