Android でルビタグを
2013年03月10日（Sun）
|
|
|
スマホのブラウザでＷＥＢ上の長編テキストを読んでいて、気になったのがフリガナの表示でした。
ルビタグで記述されているフリガナが、表示されないとか括弧書きになるとか言うのならまだしも、直後に余計な改行が入り、フリガナ自体もあさっての方向へ配置されるという、完全にレイアウトが崩れた状態になってしまうのです。
← こんな感じ。
一箇所や二箇所ならばともかく、このように大量のルビがふられている文章などだと、もうしっちゃかめっちゃか。とても読めたものではなくなります。
そこで、いろいろ試行錯誤してみました。
題して「 Android のブラウザで、快適にフリガナを表示するには」です。
まずはいろいろ調べてみたところ、ルビタグに対してレイアウト崩れを起こさないフリーのブラウザというと、 Opera が上げられるようでした。
カッコ書きでの表示になりますが、少なくともちゃんと読めます。その他の基本的な機能もそれなりに充実しているようですし、動作も軽快らしい。そして私はパソコンでもメインブラウザに Opera を使っていて馴染みやすそうだったので、まずは Opera Mobile を入れてみました。
■Opera Mobile - Google Play
https://play.google.com/store/apps/details?id=com.opera.browser
で、もって。
以前の記事でも触れているように、私はユーザースタイルシートを使用して、パソコンの Opera でもルビタグが表示されるようにしています。
……もしかしてスマホ用でもできるんじゃね？ と思って、いろいろと検索してみたのですよ。
そうして見つけたのが、こちらのページ。
■Opera Mobileのサイト別設定機能でJavaScriptやモバイル表示の有無を制御 特集その3
http://android-smart.com/2011/08/opera-mobileのサイト別設定機能でjavascriptやモバイル表示の有.html
■Opera Mobileのユーザースタイルシートでサイトの見栄えを変更 特集その4
http://android-smart.com/2011/08/opera-mobileのユーザースタイルシートでサイトの見栄え.html
必要なところだけざっくりまとめますと、ドメイン名を指定することで、一部任意のサイトに好みのスタイルシートを適用させられると判りました。たぶんやりようによっては全てのサイトにも反映できるかもですが、とりあえずは自サイトと「小説家になろう」と「青空文庫」ぐらいできれば充分かなと。あとは見つけたつど追加すりゃいいや。
では具体的に、実際やった作業をメモ。
１．テキストエディタを使用して「override.ini」といった任意の ini ファイルを作成し、以下のように記述する。
[Overrides]
plant.mints.ne.jp
aozora.gr.jp
syosetu.com
[plant.mints.ne.jp]
User Prefs|Local CSS File=/sdcard/opera/ruby.css
[aozora.gr.jp]
User Prefs|Local CSS File=/sdcard/opera/ruby.css
[syosetu.com]
User Prefs|Local CSS File=/sdcard/opera/ruby.css
２．続いて「ruby.css」というタイトルで、以下のような css ファイルを作成する。
body{
font-size: 170% !important;
margin-left:2% !important;
margin-right:2% !important;
}
/*小説家になろう本文*/
.novel_view {
width: 98% !important;
line-height:150% !important;
}
/*フリガナ表示*/
ruby {
display:inline-table !important;
text-align:center !important;
white-space:nowrap !important;
text-indent:0 !important;
margin:0 !important;
vertical-align:110% !important;
line-height:1 !important;
}
ruby>rb,ruby>rbc {
display:table-row-group !important;
line-height:1.2 !important;
}
ruby>rt,ruby>rbc+rtc {
display:table-header-group !important;
font-size:60% !important;
line-height:1.2 !important;
letter-spacing:0 !important;
}
ruby>rbc+rtc+rtc {
display:table-footer-group !important;
font-size:60% !important;
line-height:1 !important;
letter-spacing:0 !important;
}
rbc>rb,rtc>rt {
display:table-cell !important;
letter-spacing:0 !important;
}
rp {
display:none !important;
}
※文字サイズや余白などの細かい数値は、私の個人的な好みです（笑）
これら二つのファイルを、スマホのＳＤカード上に「opera」というフォルダを作ってつっこみます。
３．Opera Mobile を起動し、「opera:config#UserPrefs|OverridesFile」というＵＲＬにアクセスする。
４．「選択」ボタンをタップし、先ほど作成した「/mnt/sdcard/opera」フォルダ内にある「override.ini」を選択。画面最下部にある「保存」ボタンをタップして設定を終了。
５．Opera Mobile を再起動する。
ざっとこんな流れでした。
それぞれのファイル名やフォルダ名は、お好みに合わせた任意のもので良いです。お互いに整合性さえとれていれば、大丈夫、な、はず。
で、たとえば大量に振り仮名がついた、うちの「白髪鬼」を表示してみると……
標準ブラウザでは、このように崩れまくっていたレイアウトが、
Opera Mobile だと、きっちり配置されます♪
ついでに左右の余白も少なめにしてみたりとかｖｖ
どうだ！！
Android のブラウザで振り仮名を表示する技は、まだそんなにネット上でも紹介されていないと思うぞ（えっへん）＜自分が見つけられなかっただけ？？
……ただ Opera Mobile は、画面回転させたときの表示サイズ差が大きかったり、 google 検索での手書き入力に対応していないので、日常のネットサーフィンにはちょっと使いにくそう。
調べ物には標準ブラウザ。オンライン読書時には Opera といった使い分けになりそうです。
|
|
No.4628
(電脳)
|
|
|
|
|
| プロフィール |
|
神崎 真（かんざき まこと）
小説とマンガと電子小物をこよなく愛する、昭和生まれのネットジャンキー。
ちなみに当覚え書きでは、
ゼロさん= W-ZERO3(WS004)
スマホ= 003P(Android端末)
シグ３= SigmarionIII です。
|
|
|
