コンピュータ Archive

Inteternet Explorer 以外のブラウザではルビの表示がなかなか上手くいかないのは、HTML でがりごり書いたことのあるひとなら結構な割合で知っているのではないかと思います。

私もルビを使う――使いたいケースがたまにあったりで、そのたびにいろいろ検索して試行錯誤していたんですが、以下はそんな記録。

CSS で頑張ってみる その1

まずは正攻法(?) の CSS によるマルチプラットフォーム対応の方法。

結構前に、404 Blog Not Found:css - ルビもCSSで の記事で示された CSS を試してみました。こちらの記事の元ネタはルビ表示はユーザスタイルシートで! - 徒書 からのようです。

で、これはこれで複雑怪奇な CSS を使っていなければ、表示結果はそれなりになるのですが、WordPress に移ってからは表示が崩れたりして使ってませんでした。

CSS でいろいろ頑張ってみた比較は ホームページ作成浜松Tips:CSSによるルビ（振り仮名）表示方法 で見ることができますが、Firefox3 だとなかなか満足のいく結果が出ていないように思えて残念無念です。

Firefox のアドオンで自分だけ幸せになる

Firefox を使っているのなら、XHTMLルビサポート (XHTML Ruby Support) を使えば概ね良好な動作をしてくれますね。

閲覧環境を整えるということなら、こちらのアドオンを導入すればルビの表示についてはほぼ解決ではないでしょうか。

CSS で頑張ってみる その2

で、本題。今日、また思い立って検索してみたら、CSSでルビを表示する - mukakenの日記 経由で sim2ruby.css という CSS ファイルを知りました。

結構小さい割に、IE 以外の最近のブラウザでもルビの表示が良い感じになるようです。

ウチのサイトにも追加で sim2ruby.css を読み込むようにしてみましたが、Firefox3 でも

のような感じで、かなり自然に見ることができるようになりました^*1。

導入自体も、追加で CSS ファイルを読み込むようにするだけなので簡単。ブラウザに応じて JavaScript で CSS の振り分けをするとか、面倒な手順を踏まなくても、ルビ表示ができるようになるこの CSS ファイル、かなり便利ではないかと。

1. ルビの部分にマウスカーソルを重ねると、文字を拡大する機能も付いています。〈ただそこに佇立する者〉の部分ですね。 [↩]

• CSS | HTML | WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(0 件の評価, 平均: 0 点 / 5 点満点中)

 読み込み中 ...

SS の公開に使っている、bookreader.js ですが、やっぱり便利。ブラウザで超長文を縦スクロールで読むのは、辛いなあと思っていたひとには福音となりそうなライブラリです。というか、Web 小説を公開しているひとの多くが該当するのかも。まぁ、見せる方のこだわりの一つと思ってもらえれば……。

ただ、使用できるタグが限定されていたり、カスタマイズに関する情報はさすがに少なかったので、自力でいろいろいじってみて分かったことについてメモってみようかと思います。

bookreader.js 0.4.5 のカスタマイズ

0.4.1でも施した、p タグや div タグへの class 指定を 0.4.5 でもできるようにしてみました。パッチは以下。

--- bookreader.src.js.org	2008-07-08 00:11:32.000000000 +0900
+++ bookreader.src.js	2008-07-09 11:44:12.000000000 +0900
@@ -71,15 +71,17 @@
 				case 'P':
 					s = elm.innerHTML;
 					t = BookReader.Utils.dividelines(s, maxletter);
+					w = elm.readAttribute('class');
+					if (!w) { w = ''; }
 					t.each(function(line){
 						if (BookReader.currentline >= maxline || line == '<HR />'){ BookReader.insertPage(); }
 						if (line != '<HR />'){
 							if (elm.align == 'right'){
-								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' right">' + line + '</P>';
+								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' '+w+' right">' + line + '</P>';
 							} else if (elm.align == 'center'){
-								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' center">' + line + '</P>';
+								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' '+w+' center">' + line + '</P>';
 							} else {
-								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+'">' + line + '</P>';
+								BookReader.pages[BookReader.pages.length-1] += '<P class="'+fontsize+' '+w+'">' + line + '</P>';
 							}
 							BookReader.currentline++;
 						}

0.4.5 では、行揃えなどが標準で組み込まれているので class 指定を使う必要があるケースはかなり少ないと思いますが、例えば、インラインで img タグを使用し文中に画像を入れたいときなどは、行の高さが決め打ちされているので、一部分しか表示されないなどの現象が起こりえます^*1

例えば、バナーなどをインラインで表示したい場合などは、専用の class を CSS に追記して、画像を表示する行に対して class を指定してやるなどの方法で対応するのが良いかと思います。

動作サンプルで具体的な記述方法や CSS の指定を確認して下さい。

勝手にバナー作ってみました

アイコンの画像は、Detailed information for icon - document2 を使用させていただいています。アイコンのライセンスが GPL なので、こちらのバナーも GPL ってことで。

Illustrator で加工した EPS 形式のファイルと、バナー用の PNG ファイルをアーカイブしておいておきますので、自由に使って下さい。あ、公式とは全く関係ないので、その点はご注意を。

• Powered by bookreader.js バナー (109)
  Update:2008/07/09

以下の内容は bookreader.js 0.4.1 に対して行った改造です。それ以降のバージョンではほぼ同等の機能が取り込まれていますので、改造は不要となっています。

Continue reading

1. 画像自体に width や height を指定しないと、その行に収まるように高さを無理矢理縮めて表示するようです。 [↩]

• bookreader.js | JavaScript | Web | コンピュータ

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(1 件の評価, 平均: 5 点 / 5 点満点中)

 読み込み中 ...

本日ついに Firefox 3.0 がリリースされ、一部では祭り状態ですね。

各所の紹介記事でも書かれてますが、パフォーマンスがかなり上がってます。2.0.x で感じた動作の遅さはかなり改善されていますね。拡張されたロケーションバーと、ブックマーク機能も何気に便利。ブックマークにタグ付けすると、そのタグがロケーションバーで検索できるようになるので、よく使うサイトへのアクセスがさらに容易になるのかも。過去の履歴も同様にロケーションバーから検索できるので、記憶を頼りに探すのもかなり楽になっていますね。

ただ、やはりマシンパワーがある程度ないと、Firefox 自体が重いのはどうしようもないですね。PCG-U1 は Opera 9.50 で使ってますが、ある程度のスペックがある PC なら、Firefox 3.0 はかなり快適に使えるかと思います。

導入ですが、私は RC の段階から試用していたので正式リリース版への移行自体は上書きインストールで行けました。が、2.0.x から移行はやっぱり最初は大変。

そんなわけで、私が 2.0.x から 3.0 RC への移行の段階で取捨選択したアドオンなどを紹介。

操作性の改善や、ちょっとした便利機能を追加するアドオンが中心ですが、2.0.x 系統とほぼ同じ環境が再現できています。他にもまだまだ便利なアドオンもありますし、メジャー系が中心の紹介になるかと思いますが、 Firefox 3.0 への移行の参考になれば。

試験的に移行する場合は、プロファイルのバックアップ、および新規プロファイルでテストするのが肝要です。失敗して泣かないためにバックアップ重要、ってことで。

Continue reading

• firefox

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(1 件の評価, 平均: 5 点 / 5 点満点中)

 読み込み中 ...

エントリ内に含めてある Web 拍手 のツールですが、PatiPati 経由で Web Clap を現在使用しています。Web Clap は拍手を送ったエントリ名を記録することができるので便利なのですが、個人的に良さそうだなあと思っているのはFC2ブログ 拍手みたいなヤツでした。

以前、Web 拍手ツールを探したときは、こういうタイプのが見つからなかったんですが、ついに見つけました。その名も GJ!

1. ブログに特化したＷｅｂ拍手なので、どのエントリーに対する拍手なのかが判る
2. 拍手数を拍手ボタン上に合成することで、拍手数がわかりやすい
3. 拍手数をＸＭＬで出力（ブログパーツなどに使えます）
4. ボタングラフィック差し替え可能
5. コメント閲覧画面（パスワード設定可能）完備

といった特徴があるように、ブログでの使用を前提にした設計になっているので、それなら WordPress に組み込んでやろうってことで、やってみました。配布ページでも WordPress 用のテンプレートの編集方法の解説ありますしね。

んが、ちょっとハマった部分といじった部分がありますので、備忘録的にメモしておきます。

Continue reading

• GJ! | PHP | Web拍手 | WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(12 件の評価, 平均: 4 点 / 5 点満点中)

 読み込み中 ...

WordPress ME 2.2.3をAutoPagerizeのMicroformatsに対応させた - あいぷらぷら； を参考に、このサイトでも、AutoPagerize が利用できるようにしてみました。

トップページ、単一記事、カテゴリ、タグのそれぞれのページにて、一番下までスクロールすると、自動で前のページが追加されるようになってます。

副作用として、Litebox が2ページ目以降の画像には適用されなかったりするけど、それを捨ててもこの便利さを取りたかったので。

Firefox ユーザは、ぜひ Greasemonkey + AutoPagerize で快適なブラウジングを堪能してみては。

• AutoPagerize | firefox | Greasemonkey | WordPress

この記事が参考になったり面白かったりしたらお気軽にご評価ください
(0 件の評価, 平均: 0 点 / 5 点満点中)

 読み込み中 ...