Home > 2007年12月16日

2007年12月16日

cross × fontリリース！クロスブラウザっぽいfont-sizeを計算

2007-12-16 (Sun)
JavaScript

はい、最長エントリ間隔（？）更新！4日空けちゃいました…。
ってことで、お詫び（誰への？）に新しいプログラムを公開します。

このブログのfont-sizeを変更する時にも大変お世話になった記事↓

font-size指定 | d-spica

最近気づいたんだけど、便利な対応表だけじゃなく、その下に安全な%の範囲を計算する方法も書いてあった。

これ、機械的に計算できたら素敵じゃね？と思って作ってみた。
（少なくとも僕は2桁同士の乗算なんて暗算でできません。）

あと、今流行り（？）のクリーンな水平分割もやってみたかったし、JavaScript-XPath×XPath for Prototypeも使ってみたかったので。
（結局XPathはやめて、pure prototypejsにしました。なぜか遅かった。contextをうまく設定できなくて、引数なしの$xを濫用したのが原因？）

なんだかんだで、できたのがこれ↓（自分のサイトのスクリーンショットを貼るとか･･･）

cross × fontのスクリーンショット
cross×font

ちょっとWeb2.0（笑）ぽくないですか？ないですか、そうですか。

使ってみたい人はどうぞ。使い方はサイトに書いてあります。
文字サイズの刻み等は、特に考えずに上記の参考サイトに合わせました。需要があるようならもっと大きいサイズとか1px毎とかにも対応します。実は途中まで作って投げ出してたり…
（キャッチコピー？にある通りYUIを使う方が楽だと思いますけどね。全然関係ないけど、YUIっていう文字を見るとやっぱり先にこっちを思い浮かべちゃうなぁ。）

あ！大事なことを書き忘れてた。
計算部分とかけっこう適当に実装したので、間違った結果を吐く可能性が大いにあります。
（面倒すぎて各ブラウザで全文字サイズを試すとかムリでした。）
その点ご了承ください。

えっ？いや、だからクロスブラウザっぽいって書いてる･･･

･･･すいません。見つかった不具合は直していきますので。
（それでもたぶん、手動で計算するよりは楽だと思います！）

※ やっぱりきちんと設計をしてからコードを書かないと駄目だなぁ。
　　（思いつくままにxhtml・css・javascriptを同時進行でやっちゃったからもうグダグダ）

　　ブログの文章も･･･か？

[参考記事]

IE6でmin-width,max-widthを実装する：CSS | Tech de Go
表示が崩れてテンパった時に助けられました。