主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

MathMLを使ってWebページで数式を表現する

                
tags:
※この記事を書いた時点でOpera、IE9、Google Chromeを試した。数式を表示できたブラウザはOperaのみだった。

 HTML5にはmathタグが加わっていて、数式を表現できる…のはOperaだけだけど、今後できるようになるはず。
W3C

まず以下にシンプルな数式を書いてみた。
120515.html

そして以下がそのHTML。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of MathML embedded in an HTML5 file</title>
<meta charset="utf-8" />
</head>
<body>
<math>
<mi mathvariant="normal">a</mi>
<mo>=</mo>
<mi mathvariant="normal">b</mi>
<msup>
<mrow><mi mathvariant="normal">e</mi></mrow>
<mrow><mi mathvariant="normal">x</mi></mrow>
</msup>
</math>
</body>
</html>


長い。そしてツリー構造を把握するのがちょっと手間に思える。だから入力支援ツールが欲しいところ。僕の環境ではOfficeのWord 2007が使えた。

 Word 2007の挿入のリボンの中に数式が入力できるものが最初から入っている。これを選択すると、リボンがデザインの表示に切り替わる。ここでツールにある数式オプションにクリップボードへコピーするときのオプションがある。これをMathMLに切り替える。そうすれば、数式をコピーしたときにMathML形式でコピーされる。
120515.jpg
スポンサーサイト

CSSによる要素の回転とずれ

                
tags:
CSSのtransformでrotateを使って要素を回転させていたら、回転はするのだけどのぞみどおりの位置("position:absolute;"で指定)にきたりこなかったり。

やりたかったのは、正方形の上にwidthが等しい長方形を90度回転して重ねること。
120229.png


なんかと思ったら回転軸が長方形の中心になっていた。これをのぞみの位置にもってくるためCSSで以下のように指定した。

topとleftは0に指定。transformのmatrix内は、4つ目までの引数で回転する角度を指定している。5つ目と6つ目が回転させたうえで上下左右にどれだけ動かすか(ピクセル)。5つ目を(height-width)/2、6つ目を(width-height)/2にする。これで重なる。


.black{
position:relative;
}

.blue{
position: absolute;
top:0px;
left:0px;
width:500px;
height:60px;
transform:matrix(0,-1,1,0,-220,220);
-ms-transform:matrix(0,-1,1,0,-220,220); /* Internet Explorer */
-moz-transform:matrix(0,-1,1,0,-220,220)); /* Firefox */
-webkit-transform:matrix(0,-1,1,0,-220,220); /* Safari and Chrome */
-o-transform:matrix(0,-1,1,0,-220,220); /* Opera */
}
プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。