« SVG ファイルへのアクセスを受け付けるようになった | トップページ | MathJax で可換図式 »

2013年4月 6日 (土)

FlatTable の縦長表示

FlatTable の作成が終了してから、 MathJax の動作を調べようとしたのですが、難しくて途中放棄の状態が続いています。私には FlatTable で遊んでいるレベルが合っているのでしょう。

ところで FlatTable は横長の表示にしか対応していません。フットスポットの位置を左右変更できるように台を 180°回転させる機能は付いているのですが、縦長に表示できるような 90°の回転機能は有りません。

時には縦長に表示したいという状況も有るかも知れませんが、その場合は、CSS で画像を回転させて対応することになります。右の配置図は、そのようにして表示したものです。球の番号が寝ていますが、それは許して下さい。そもそも、実際の配置では、球は色々な方向を向いている訳ですから。


CSS と HTML は次のようになっています。

- CSS -


.sl_tate {
    position: relative;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
基本的な部分は transform: rotate(90deg) なのですが、この機能はベンダープレフィックスが必要で、 -webkit- などの付いているプロパティがそれに該当します。上記には4通りのベンダープレフィックスが記述されていますが、省略可能なものも有るかも知れません。

- HTML -

<div style="width:300px;height:500px;float:right">
<iframe width="500" height="300" class="sl_tate" style="top:100px;left:-100px" src="配置コード" ></iframe>
</div>
・・・(文章など)
<br style="clear:both" />
"配置コード" には必要な配置コードを入れます。上記配置図例の場合、配置コード は次のようになっています。

http://spacelike.in.coocan.jp/flat/FlatTable_P.svg?
ILC=21P31FCKTKVVHATAtKBUi36AHKhVe36ADLOVV36ABLDUtQ310000kdvAjtud36BKkQvV36AUlOvh36AGlJuw.

« SVG ファイルへのアクセスを受け付けるようになった | トップページ | MathJax で可換図式 »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/57116222

この記事へのトラックバック一覧です: FlatTable の縦長表示:

« SVG ファイルへのアクセスを受け付けるようになった | トップページ | MathJax で可換図式 »