忍者ブログ

Home

Born Neet

[PR]

  • 2025-07-31 (Thu)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

  • Comments (Close):
  • TrackBack (Close):

cross × font変更履歴

cross × fontに関する変更はこのエントリにまとめていきます。
変更毎に個別エントリを書いていくより(僕が)楽なので…。


[2007/12/18]

どうやらfont-sizeにmax(安全な範囲の最大値)を設定すると崩れることが多そうなので、css例や下のsampleにはmin(安全な範囲の最小値)を適用するようにしました。
(適当に試した感じだと、おそらくminの方がmaxよりはマシっぽいです。)
消すのも何なので、maxは表の方には残しておきますが非推奨です?

あと、プログラミング的な話になるけど、なぜか1つだけ"Event.observe"を使わずに、"onclick="で指定してたイベントがあったので直した。(本当に何でだろう?)

PR

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

はい、最長エントリ間隔(?)更新!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
表示が崩れてテンパった時に助けられました。

correct.js(と命名したスペル修正プログラム)のサンプル作った

昨日のエントリの通り、
スペル修正プログラムはどう書くか原文
をjsでパクりました。

んで、せっかくなので、なんかできないかなーと思って(実はjQueryを勉強するためになんかやりたかっただけってのもありますが・・・)、作ってみたのがこれ↓

correct.jsサンプル
※ サンプルサイトにも書いてある通り、大量のテキストを入力するとブラウザが不安定になったりするかもなので、気をつけてください。

ちなみに、今回のサンプルではAjaxでtxtを読み込むようにしました。(前回不足している機能として書いたものです)
興味のある人はソースを直接見てください。といってもjQueryを使ってるのでたった3行程度のものですが。


[使い方]

一番上のテキストボックスに英字を入力すると、修正候補らしきものを表示します。(上位5つまで)
で、候補をクリックすると、その内容がテキストボックスに入力されます。

以上、たったこれだけ・・・ってのもなんなんで、オマケ機能をつけました。

テキストエリアに英文を入力して「覚えさせる」ボタンを押すと、英文に出現する単語数を数えて記憶します。
これで、今まで知らなかった言葉も良い感じに表示してくれるはずです。

※ なぜこんな機能をつけたか?

  試してみてもらえればわかりますが、初期状態では全然補完してくれません。
  これは昨日も書いた通り、始めに読み込むテキストが少ないのが原因です。
  (オリジナルが6Mのテキスト読んでるところを、今回のサンプルではその冒頭部分(50K足らず)しか読み込んでいません)
  なので、代わりにつけてみました。


ちょっと人工無能みたいで楽しく・・・ないですよね。


[参考]

ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery(入門編)
Prototype.jsとjQueryのコード比較:phpspot開発日誌
jQuery リファレンス
jQuery 開発者向けメモ(なんか僕のIE6ではスクロールがうまく動かなかったのでFirefoxで見ました。何でだろう?)

全部jQuery関連です。

スペル修正プログラムをJavaScriptで再現&改悪してみた

いつか読むとtaggingしたまま放置して、ようやく読んだ
スペル修正プログラムはどう書くか原文はこっち)。

僕もJavaScriptで同じようなものを作ってみました。
(途中まで読んだ速効!Pythonプログラミングが一応役に立った・・・かな?)

仕組みは原文の通り。

ド文系の僕でも読めたので、興味のある人は是非。オススメです。
前半の数式で一瞬怯みますが、ちゃんと文章でも解説してくれてます。

簡単に説明すると、

  • トレーニング
    - 英文に出現する単語&出現数を記憶する。
  • タイポ生成
    - 入力内容の1字違い&2字違いの全パターンを生成。
  • 候補提示
    - タイポと記憶した単語を照合し、出現数が最も多いものを候補とする。

って感じです。

ただ、僕のはもっとショボいです。

まず、1文字違いしか考慮してません。(2字違いを計算するとかなり重かった)
あと、10語/sなんてとんでもありません、ムリです。
さらに、精度も駄目です。(流石に6Mのテキストをjsに読ませるわけにはいきません・・・・)
※ 代わりと言ってはなんですが、複数の候補を返せるようにしてみました。

とまぁ、グダグダながらも一応完成。

それを使ったサンプルも作成中。

近日公開!

・・・すいません、大袈裟です。

それでは、今日は以上です。

参考記事とソース(結構長い)は続きに入れます。

Continue reading

あわせて読みたいを導入

何か今さらな気もするけど、

あわせて読みたい

貼ってみた。
(サイドバー右下に表示してます)

さて、効果はあるかな…?

Home

Search
Loading
Feeds
Links
スポンサードリンク

Page Top