Hello Absurd World!　html

2012
05
15

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形式でコピーされる。

スポンサーサイト

このページのトップへ

2012
02
29

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

tags:

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

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

なんかと思ったら回転軸が長方形の中心になっていた。これをのぞみの位置にもってくるため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 */
}

このページのトップへ

ホーム

このページのトップへ