ブラウザによるフリガナ表示
2016年10月21日（Fri）
|
|
|
……の問題は、いつまでたっても決着がつかない悩みどころのひとつです。
私がスマホやタブレットで標準ブラウザではなくＯｐｅｒａを使用しているのも、最初に入っていた Chrome やブラウザで、自サイトの小説本文が、↓のような表示になってしまっていたからです。いやそれ以前に、最初に買った当時のスマホでは、ルビ部分の文字で全てが改行されるという阿呆な仕様でしたか。
今のスマホの Chrome
最初のスマホの標準ブラウザ
今のスマホですら、フリガナ（ ruby タグ）をつけている文字が、極端に小さくなるという謎仕様。
そして兄の iPhone を借りてみたところ、iPhone の標準ブラウザ Safari でもこのように表示されているっぽいです。
小説家になろうなどの各投稿サイトはちゃんと表示されるため、技術的に何かしらの解決は取れるはず。しかし私にはそれが見つけられないまま、まあしょうがないか……と長らく放置していました。
が、今回何かのはずみにふと思い立って、ちょっと調べてみました。
そしてたどり着いたのが、ここらへんの情報。
■AndroidのChromeでフォントサイズが大きくなってしまう不具合は「max-height」で解決するかも | SEOモード
http://www.seomode.jp/html-css/2014/06/25/3339/
■スマホサイト制作時の困った！iPhoneでフォントサイズが勝手に拡大されてしまうのを防ぐ方法。 | Plan B works
http://planbworks.net/web/text-size-adjust.html
どうやらうちのサイトは、「ルビをつけた文字が小さく表示されている」のではなく、「ルビを付けた文字以外が大きく表示されている」ということなのではないでしょうか。
で、いろいろ試行錯誤してみた結果、外部ＣＳＳのうち小説本文を指定している txt という class 属性に、max-height: 999999px; という記述を追加。
さらに全体を指定する body に -webkit-text-size-adjust: 100%;という記述を追記してみました。
body { -webkit-text-size-adjust: 100%; }
/*小説本文用*/
.txt { line-height:180%;max-height: 999999px; }
こんな感じです。
結果、Android の Chrome で、このような表示になりました。
左が修正前、右が修正後。
本文のフォントサイズが全て、フリガナがついている文字と同じ大きさに統一されました。そしてパソコンでも、少なくともＩＥ１１と Google Chrome ではレイアウト崩れしていない模様。
Android 版標準ブラウザやＯｐｅｒａ、 Firefox でもおおむね同じ状態で、長兄に借りた iPhone の Safari でも、ちゃんと統一されたっぽいです。
この文字サイズのままだとさすがに読みづらいですが、そこはそれ、画面を横にしてやれば……
Android の Chrome
iPhone の Safari
なんとか許容範囲じゃないでしょうか。
ブラウザによっては、標準文字サイズの変更もできるので、そこらあたりはなんとかなるのでは……ないかな？
最近はスマホでアクセスされるお客様が非常に増えているので、こういった部分は非常に悩ましいところです。
そりゃあみんな、本文書いて投稿ボタン押せばそれですむ、小説家になろうやピクシブやカクヨムあたりに流れるはずだよ（−ー；）
実際読む側としても、紹介文あったり検索できたり規格統一された投稿サイトが便利で、私自身個人サイトなんてほとんど回らなくなっちゃってるからなあ……
|
|
No.7863
(電脳)
|
|
|
|
|
この記事のトラックバックURL
| |
https://plant.mints.ne.jp/sfs6_diary/sfs6_diary_tb.cgi/201610217863
|
|
|
|
| プロフィール |
|
神崎 真（かんざき まこと）
小説とマンガと電子小物をこよなく愛する、昭和生まれのネットジャンキー。
ちなみに当覚え書きでは、
ゼロさん= W-ZERO3(WS004)
スマホ= 003P(Android端末)
シグ３= SigmarionIII です。
|
|
|
