html - HTML/CSS レイアウト数を表現力に (a^x)

Question

Web ページにいくつかの数式をレイアウトする必要があります。latex や mathML は使用できません。プレーンな HTML (HTML5 ではありません) のみです。

別の式の累乗の式があります。たとえば、(a+b+sqrt(c))^(2x+b)

2 番目の式は、最初の式の右側に少し小さく、その上に配置する必要があります。

十分に単純に聞こえますが、正しく理解できないようです。

どんな助けでもスタイリングとレイアウトは素晴らしいでしょう、ありがとう。

score 40 · Accepted Answer

数式に関して言えば、HTML はかなり制限されています。原則として、HTML の仕様ではsup上付き文字に element を使用することが推奨されているため、サンプル式は次のようになります。

(<i>a</i> + <i>b</i> + √&lt;i>c</i>)<sup>2<i>x</i> + <i>b</i></sup>

ただし、ブラウザーでのの実装は一貫性がなく、一般的に貧弱です (行間隔が不均一になるなど)。そのため、代わりにクラスで要素supを使用する方が実用的に優れています。span

(<i>a</i> + <i>b</i> + √&lt;i>c</i>)<span class=sup>2<i>x</i> + <i>b</i></span>

のようなCSSコードで

.sup {
  position: relative;
  bottom: 1ex; 
  font-size: 80%;
}

いくつかの理由は、私のページMath in HTML (and CSS) で説明されています。複雑な数式を含むページには、JavaScript ベースのライブラリも検討してください。

サンプルの式は境界線上のケースです。√<em>c だけでなくvinculumを含む平方根記号を使用して平方根を表すと、数学的により正確に見えますが、HTML と CSS を使用して vinculum を構築しようとするとかなり汚れますが、それ以外の場合は、 HTML と CSS。

score 29 · Accepted Answer

HTML では、<sup>上付き文字のタグが定義されています。例えば：

a<sup>x</sup>

CSS を使用して余白と垂直方向の配置を変更できます。

score 6 · Accepted Answer

要素を使用して<sup>、指数を基数の上付き文字として表示できます。関連する HTML は次のようになります。

(a+b+sqrt(c))<sup>(2x+b)</sup>

より良いアプローチは、CSS を使用して同じ結果を達成することです。これには、プロパティでスパンを使用できます。

vertical-align:super;

4 に答える 4