<body style="background: #000000;"> <canvas id="canvas" style="position:absolute; top:0; left:0;"></canvas> <div id="buffer" style="display:none;"> <!-- buffer --></div> </body> <script> var camera = { focus : 400, self : { x : 0, y : 0, z : 0 }, rotate : { x : 0, y : 0, z : 0 }, up : { x : 0, y : 1, z : 0 }, zoom : 1, display : { x : window.innerWidth/2, y : window.innerHeight/2, z : 0 } }; var a
3連休も今日で最後ですねー。今日は ゆっくり過ごす方も多そうですね。 さて、休みですし、ちょっとネタ的 なライブラリをご紹介。カーニング をCSSで出来るようにしたJSライブラ リです。 jQueryやmootoolsなどにも依存していないようです。これだけ聞くとかなり使えそうなんですけど。でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします。 CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね。 まだちょっとよく分かってないんですけど適当にデモ作ってみました。一応違いが分かるように少し大袈裟にしたつもりです。クオリティは無視です。 ※右上でjsのオン/オフが出来ます。Chrome推奨 Sample css #example01 {/*文字詰め*/ -letter-kern: 1px 1px
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
BJKit(BeautifulJapaneseKit)htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。 BJKit(BeautifulJapaneseKit)でビューティフルな見出しを生成 htmlソースに簡単なJavascriptを記述するだけで、ページ上の文字列がアンチエイリアスの効いた美しい文字に代わります。日本語にも対応しているので、様々な場面で利用することができます。 動的に表示するので、画像を作成する必要がない 新聞記事風、楷書風、POP調など、書体を自由にアレンジ出来る htmlの構造を崩さず、SEOやユーザービリティを犠牲にしない など、ページ作成の効率アップと同時に、表現力も向上させる手法です。 適用例 従来は、当ページの見出し（h1タグ）は下記のように表示されます。 従来の見出しの例 BJKi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
