とある
の
（）
方向
縦 横
色合い
科学色（赤） 魔術色（青）
の
（）
方向
縦 横
色合い
科学色（赤） 魔術色（青）
元ネタ：とある櫻花の画像生成、とある画像の自動生成<ジェネレータ>
HTML5のcanvasを使ってやっつけ仕事。グラデーションは面倒なのでやめた。SilverLightやサーバーサイドは、もはや過去の遺物である。これからはクライアントサイドのみで、これぐらいやるのが当たり前になるべきだ。フィード経由で閲覧している人は、ご面倒ではございますが、直接見ていただいくようお願いいたします。
主要ブラウザでテストしてみた結果。
Chrome, Safari: 完璧
Firefox: なぜか@ＭＳ ゴシックが意図通りに描画されない。
Opera: canvasの文字列描画をサポートしていない。
IE: えーと……とりあえずお前はカエレ。
グラデーションは、思いのほか簡単だった。
10 comments:
私はWindowsでSafari 4を使っていますが、振り仮名（インデックス）の部分が縦書きにならず、横書きを90度回転させた表示になっています。Google Chrome 3では、縦書きになっています。これは、Safariのほうが意図していない結果ですよね？
手持ちのsafari4.0(530.17)は、問題なく動作するのですが。
よく「ッ」の位置をChromeと見比べてください。「横書きを90度回転させたもの」と「縦書き」は異なります。あとうちの環境だとSafariでは明朝体の部分が文字化けしまくってますが、これはたぶんインストールされているフォントのせいでしょう。
あ、こっちで確認したのは Safari 4.0.4 (531.21.1.0) なので、4.0 (530.17) では違うのかもしれませんが、わざわざ古いバージョンを探し出してインストールして確かめるつもりはありません。やっぱりユーザーはどうしようもないアホだからブラウザは強制アップデートすべきですね。
ありゃ。なんでアップデートされないんだろう。
アップデート完了。描画結果は変わりませんね。
ただ、safariはcanvas Textにおける@ＭＳ ゴシックの描画に問題があるようです。
実を言うと、Canvasに文字列の縦書きなんて機能はないのです。
これは、@ＭＳ ゴシックで描画して、90度時計回りに回転させているだけなのです。
フォント名に「@」を付けるとラインプリンタ縦書き用のフォントになるというのはWindows独自の仕様なので、Firefoxでは故意に殺してあります。現にMacのSafari 4では「インデックス」の表示がFirefoxと同様、横倒しになります。
あー、そうか。
本来、ブラウザによってネイティブに縦書きのサポートが提供されているべきなのですけどね。
CSS3の縦書きプロパティは、IE以外は、あまりサポートする気配がありませんね。
canvas Textも、将来的には、CSSを指定した、HTMLでマークアップされたテキストを描画出来るようになるかもしれない、
という注釈が、規格に書いてあります。
まだまだ、長い道のりですね。
ああ、それで分かりました。私のところで縦にならないのは「フォントの滑らかさ」を「中 - フラットパネルに最適」を選んでいるためでした。「Windows 標準」を選択すれば、インデックスの部分も縦に描画されますね。
IE9PP3では罵倒されなくなったのでやってみたところ、
・方向や色合いを切り替えるのに1回余分にクリックする必要がある。
・縦だと「インデックス」が描画されない。横では問題なし。
など微妙に問題も残ってますがおおむね動くようになった模様。
Silverlightの立場は…。
Post a Comment