アメブロで数学関連記事を書いているのだが、根号、二重根号とかを綺麗に描きたいと考えるようになった。
というか、随分前から考えてはいたが、最近やり方を変えましたという話し。
以前は、
√<span style="text-decoration: overline;">2</span>
のように、やっていたんですが、これでは二重根号は無理です。
text-decoration: overline double;
で2重線にしたとしても、調整してどうのこうの出来るとも思えない。
本来であれば、MathMLとか、TeXとかを使えればいいんでしょうけど、
MathMLはブラウザ毎の対応状況がまちまちで読者に迷惑を掛けるだろうし、
TeXにしても、アメブロでMathJaxを設定出来るのかは解らないし、
他のアプリでTeXをhtml化して、コピペするのも面倒だし、
…
というわけで自前でやってみるべと、重い腰を上げました。
いろいろ微調整を繰り返し、落とし所を決めました。
三重根号：√1+√2+√3
二重根号：√1+√2
見栄えはどうでしょうか？
自画自賛しております。
このあとサンプルを大量に出しますが、簡単な自分のこだわりを書いておきます。
まず考えたのが√記号のサイズです。
これは、二重、三重と根号がネストしたとしても、あえてサイズを変えないことにしました。
ですので、重ねすぎると外側の√記号が上へ上へと上がっていきます。
今どきならば、font-size: cacl(100% + 2px); といった微調整はしやすいのですが、サイズアップすると線が太くなったりしちゃうので、統一感がなくなるのを嫌ったためです。
まぁ、2px程度ならそこまで太さは変わらないだろう。
逆に太さをfont-weightで調整してなんてのも出来るのかもしれない。
続いて√記号のフォントを、font-family: sans-serif; で横棒の無いsans-serif系フォントを選びました。
<span>を display: inline-block; にしてネストして、topだけborderを引く。といった感じです。
その線に結合するために、√文字はrelativeにしてtopで微調整、√の中もrelativeにしてleftで微調整。
というシンプルな設計にしました。
スタイルシートは、
<style type="text/css">.ro{display:inline-block;white-space:nowrap;padding:0;line-height:100%;position:static;}.ri{display:inherit;border-style:solid;border-width:1px 0 0 0 !important;padding:0 1px 0 1px !important;margin:1px 0 0 0 !important;position:relative;left:-1px;}</style>
コピペ用にあえて、改行せずに貼り付けました。
Google日本語入力の辞書に登録出来る文字数に収まるようにするため、ちょっと詰めすぎですが、読みやすいように改行を入れると、
<style type="text/css">
.ro {
display: inline-block;
white-space: nowrap;
line-height: 100%;
position: static;
}
.rt {
font-family:sans-serif;
}
.ri {
display: inherit;
border-style: solid;
border-width: 1px 0 0 0;
padding: 0 1px 0 1px;
margin: 1px 0 0 0;
position: relative; left: -1.5px;
}
</style>
こんな感じです。
0には単位が不要で、0以外の数値は適切な単位を付けないとなりません。
こんな涙ぐましい文字数節約をしてます。
さぁ、ここからが怒涛のサンプル地獄ですｗ。
三重根号：√1+√2+√3
<span class="ro"><span class="rt" style="position:relative;top:-4px;">√</span><span class="ri">1+<span class="rt" style="position:relative;top:-2px;">√</span><span class="ri">2+<span class="rt" style="">√</span><span class="ri">3</span></span></span></span>
二重根号：√1+√2
<span class="ro"><span class="rt" style="position:relative;top:-2px;">√</span><span class="ri">1+<span class="rt" style="">√</span><span class="ri">2</span></span></span>
解の公式：x = (-b±√b2-4ac)/2a
<span class="ro">x = (-b±<span class="rt" style="position:relative;top:-2px;">√</span><span class="ri" style="padding-top: 2px !important;">b<sup>2</sup>-4ac</span>)/2a</span>
√内に2乗の<sup>タグが入るので、微調整が入ります。
三乗根：(-1-√3i)/2
<span class="ro">(-1-<span class="rt" style="">√</span><span class="ri">3</span>i)/2</span>
三乗根：(-1+√3i)/2
<span class="ro">(-1+<span class="rt" style="">√</span><span class="ri">3</span>i)/2</span>
cos(45˚)：√2/2
<span class="ro"><span class="rt" style="">√</span><span class="ri">2</span>/2</span>
cos(45˚)：1/√2
<span class="ro">1/<span class="rt" style="">√</span><span class="ri">2</span></span>
cos(135˚)：-√2/2
<span class="ro">-<span class="rt" style="">√</span><span class="ri">2</span>/2</span>
cos(135˚)：-1/√2
<span class="ro">-1/<span class="rt" style="">√</span><span class="ri">2</span></span>
cos(30˚)：√3/2
<span class="ro"><span class="rt" style="">√</span><span class="ri">3</span>/2</span>
cos(150˚)：-√3/2
<span class="ro">-<span class="rt" style="">√</span><span class="ri">3</span>/2</span>
cos(36˚)：(1+√5)/2
<span class="ro">(1+<span class="rt" style="">√</span><span class="ri">5</span>)/2</span>
cos(72˚)：(-1+√5)/2
<span class="ro">(-1+<span class="rt" style="">√</span><span class="ri">5</span>)/2</span>
cos(15˚)：(√6+√2)/4
<span class="ro">(<span class="rt" style="">√</span><span class="ri">6</span>+<span class="rt" style="">√</span><span class="ri">2</span>)/4</span>
cos(75˚)：(√6-√2)/4
<span class="ro">(<span class="rt" style="">√</span><span class="ri">6</span>-<span class="rt" style="">√</span><span class="ri">2</span>)/4</span>
cos(18˚)：√10+2√5/4
<span class="ro"><span class="rt" style="position:relative;top:-2px;">√</span><span class="ri">10+2<span class="rt" style="">√</span><span class="ri">5</span></span>/4</span>
cos(54˚)：√10-2√5/4
<span class="ro"><span class="rt" style="position:relative;top:-2px;">√</span><span class="ri">10-2<span class="rt" style="">√</span><span class="ri">5</span></span>/4</span>
cos(22.5˚)：√2+√2/2
<span class="ro"><span class="rt" style="position:relative;top:-2px;">√</span><span class="ri">2+<span class="rt" style="">√</span><span class="ri">2</span></span>/2</span>
cos(67.5˚)：√2-√2/2
<span class="ro"><span class="rt" style="position:relative;top:-2px;">√</span><span class="ri">2-<span class="rt" style="">√</span><span class="ri">2</span></span>/2</span>
こんな感じでいくつかの√を使う値を辞書に登録しました。
まぁ、アメブロのブログを書くののHTML表示内でしか使わないんだけどね。
これを踏まえて、分数とかも作っても良いかもしれませんが、一行に収まるのが好きなので、これでいいかなぁ。
例えばだけど、<span>だけのネストのまま、/を<hr>に変えるとかでやろうとすると、アメブロが<hr>を勝手に</p><hr><p>にしてしまう。
大外に<div></div>でくくってやれば、なんとか形にはなるが、行の途中などに組み込むのは出来ない。というか、2行に渡ってるから、文中にあることはないので、これはこれでありかな？
(2a)
まぁ、これをやることで消してしまった「(」、「)」、「/」、「^」などの記号を、<span style="color:transparent;font-size:0px;">記号</span>みたいに埋め込んで置くとかも、本来は考えないとダメなんだろうな。
一応最後の解の公式には施してはみたけどね。
メモ帳とかにコピペすると、
x = (-b±√(b^2-4ac))/
(2a)
こんな風になって、テキスト読み上げとかでもどうにか理解してもらえるかとは思うが、どうなんでしょうかね。
ではでは