SQLの窓

2012年03月15日


typeface.js(0.15)で、Operaが正しく動作しない理由

Operaは、canvas そのものは動作するのですが、typeface.js が利用している
getComputedStyle というメソッドが正しく動作していません。

typeface.js は、style の定義を読み取る事で対象のエレメントを探すのですが
その時に使われるメソッドが getComputedStyle と言うメソッドで、これはそのエレ
メントが適用されている style の状態を知る事ができるというものです。しかし、
少なくとも typeface.js(0.15)とOpera11.61の組み合わせでそれは正しい定義を
取り出す事ができていません。(具体的には fontFamily に入っていない)

ですから、typeface.js の変更にあたって、Opera でも一応表示できるようにし
た方法が、インラインスタイルで font-family を指定する時に限って正しく表示
されるというものです。getComputedStyle がダメなので、その要素の style 内
を直接見るようにしました。

しかし、Opeara を使っていない人からすれば、これは面倒なだけの処理になるので
『Opera ユーザが動作確認できる』という内容でしかありません。

さらに、Opera だけが typeface.js の為の必要なデータを取り出す処理でフリーズ
してしまいます。おそらく Object を削除する delete ステートメントを大量に実行
した結果だと予想していますが、そもそも動かないので検証はしていません。



タグ:トラブル
posted by lightbox at 2012-03-15 20:07 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2012年03月11日


typeface.js を少し変更して、データに値を追加するとドロップシャドウが実装できるようにしました

こんな感じで
IE8 は vml なので対象外です。

とりあえず今は他に思い付きませんが、canvas でできる事ならできそうです。
貼り付ける単位で表現を別にする為に、データ内の kirieji を kirieji2 に
変更しています

関連する記事

日本語の .ttf をそのまま変換した大きな typeface.js の内容から必要な
文字だけを抜き取るツールを作りました( 現在は 切り絵字のみ )

データの設定方法を見る
posted by lightbox at 2012-03-11 12:03 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2012年03月10日


自作デザインフォントによる、typeface.js での表示テスト

Three.js を使ってみて存在を知りましたが、必要範囲のみのデータ量にできるのがとても有効だと思います。ブラウザの開発者ツールで実行後のコードを見ると、描画方法として、canvas と vml が用意されていて、IE8 は vml が使われています( IE9 以降は canvas です )。Google Chrome や Firefox は canvas が使われており、canvas ではテキストが選択できるようになっています。

Three.js では、直接 typeface.js のデータを使うようになっているので、データを共有できるので便利です。
AB
<script src="http://winofsql.jp/js/load_typeface.js"></script>
<script src="http://winofsql.jp/js/three/data/lightbox_regular.typeface.js"></script>

<style type="text/css">
.s200 {
	font-size: 200px;
	line-height: 200px;
}
.s400 {
	font-size: 400px;
	line-height: 400px;
}
</style>

<div 
	class="typeface-js" 
	style="font-family: lightbox;">
	<span class="s200">A</span>
	<span class="s400">B</span>
</div>

以下はABのみの自作フォントの内容です
if (_typeface_js && _typeface_js.loadFace) _typeface_js.loadFace({"glyphs":{"A":{"x_min":43.40625,"x_max":651.046875,"ha":694,"o":"m 173 1171 q 254 1209 227 1204 q 303 1217 282 1215 q 363 1220 325 1220 q 434 1215 406 1220 q 493 1199 477 1204 q 531 1177 509 1193 q 569 1144 553 1161 q 618 1079 585 1128 q 645 971 640 1009 q 651 868 651 933 q 640 775 645 802 q 626 721 634 748 q 596 634 618 694 q 564 537 585 591 q 520 444 542 488 q 490 377 499 401 q 472 303 482 352 q 480 246 472 265 q 496 217 488 227 q 520 195 504 206 q 564 173 537 184 q 604 170 591 173 q 651 173 618 168 q 607 119 623 135 q 553 75 591 103 q 434 43 499 43 q 341 51 374 43 q 254 81 309 59 q 187 127 211 108 q 124 184 162 146 q 84 241 97 222 q 59 287 70 260 q 43 401 48 314 l 43 564 l 43 737 q 51 914 43 840 q 73 1030 59 987 q 130 1128 86 1074 q 173 1171 151 1155 m 227 1009 q 184 938 195 965 q 162 868 173 911 q 217 748 151 781 q 282 759 260 737 q 303 824 303 781 l 303 954 q 260 1041 260 954 l 217 998 l 227 1009 m 477 1041 q 390 954 434 954 l 390 824 q 434 737 390 737 q 499 754 477 737 q 542 824 520 770 q 542 900 547 857 q 520 971 531 944 q 477 1041 509 998 "}," ":{"x_min":0,"x_max":0,"ha":694},"B":{"x_min":43.40625,"x_max":694.453125,"ha":694,"o":"m 43 694 l 217 824 l 217 1085 l 477 1128 l 520 954 l 694 1030 l 542 922 l 607 705 q 629 602 618 651 l 640 531 q 651 412 645 472 l 651 303 l 43 130 q 217 265 184 238 q 336 368 249 292 q 406 444 390 423 q 434 520 423 466 q 287 472 336 488 q 173 434 238 455 q 260 564 227 520 l 368 596 q 434 694 423 607 q 358 640 412 661 l 260 607 l 260 651 l 130 607 l 217 781 l 130 737 l 43 694 "}},"cssFontWeight":"normal","ascender":1238,"underlinePosition":0,"cssFontStyle":"normal","boundingBox":{"yMin":43.40625,"xMin":43.40625,"yMax":1220.703125,"xMax":694.453125},"resolution":1000,"original_font_information":{"postscript_name":"","version_string":"Version 1.0","vendor_url":"","full_font_name":"night","font_family_name":"lightbox","copyright":"(c)yuno","description":"","trademark":"","designer":"","designer_url":"","unique_font_identifier":"Untitled_4B250121","license_url":"","license_description":"","manufacturer_name":"","font_sub_family_name":"Regular"},"descender":-301,"familyName":"lightbox","lineHeight":1597,"underlineThickness":0});

関連する記事

自作のデザインフォントを使って、Three.js のテキストオブジェクトテストサンプルです




Three.js : 日本語フォントの立体表示





------------------------------------------------
フォントのデータは、ページを表示した後、開発者ツールで console.dir( _typeface_js.faces.lightbox.normal.normal.glyphs ) とすると確認できます



posted by lightbox at 2012-03-10 02:51 | Three.js & typeface | このブログの読者になる | 更新情報をチェックする

2012年03月06日


動的に作成された IFRAME の キャラクタセットのブラウザ別の違い

以下のコードを各ブラウザで実行すると、それぞれ特徴のある結果となりました。
結論から言うと、現在のページのキャラクタセットをひきつぐのは Google Chrome
と Safari でした
<script type="text/javascript">
var my_iferame = document.createElement("iframe");
document.body.appendChild(my_iferame);
console.log( my_iferame.contentWindow.document.characterSet )
setTimeout( function() {console.log( my_iferame.contentWindow.document.characterSet )},10 )
</script>
現在のページは EUC-JP です。

IE9

ログ: _autodetect 
ログ: unicode 

Firefox

UTF-8
UTF-8

Google Chrome

EUC-JP
EUC-JP

Safari

EUC-JP
EUC-JP

Opera

なにも表示されません( おそらく未定義扱いのまま )


これらの結果を前提として URLENCODE は、IE9、Firefox、Opera は UTF-8 で処理されました
( Google Chrome と Safari は EUC-JP で URLENCODE されます )




posted by lightbox at 2012-03-06 11:10 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり