1

html と css を使用して、次の種類の式をレンダリングしようとしています。

SQRT(2 + SQRT(2 + SQRT(2)))

MathMLはIEやChromeの最新版でも未対応で使えません。助けや提案をいただければ幸いです。

「基数」エンティティ √ と text-decoration:overline を使用して、私が思いついた最善の方法を次に示しますが、html の同じ行に対して複数のオーバーラインをレンダリングする方法がわかりません。ただし、ポジショニング/レイヤリングは試していません。

<span style="font-size:48px;">&radic;<span style="text-decoration:overline">2 + </span></span>
<span style="font-size:36px;">&radic;<span style="text-decoration:overline">2 + </span>   </span>
<span style="font-size:24px;">&radic;<span style="text-decoration:overline">2</span></span>

SPAN を入れ子にするのは良くありません (実際にはもっと悪いです)。そうすると、式全体の上に最も外側のオーバーラインが描画されるだけになってしまうからです。

4

3 に答える 3

2

あなたがそれを機能させようとしている方法はおそらくそれを機能させることができるでしょうが、私はあなたが新しい表現をするたびに非常に退屈なプロセスを期待しています.

純粋にhtml/cssでそれをやろうとしているのを見たくありません。新しい表現をするたびに、何年もかかります。

しかし、あなたが最善を尽くした場合、私は次のようになります:

<span style="font-size:48px;">&radic;<span style="text-decoration:overline">2 + 
<span style="font-size:36px;">&radic;<span style="text-decoration:overline">2 +  
<span style="font-size:24px;">&radic;<span style="text-decoration:overline">2</span></span>  </span></span></span></span>

高さを少しいじると、大丈夫に見えます。

于 2013-04-26T15:10:32.253 に答える
1

mathjax を使用してみることができます: http://www.mathjax.org/

優れたブラウザ互換性を備えています

于 2013-04-26T15:01:37.030 に答える