html - HTML/CSS 布局编号的表达能力 (a^x)

Question

我需要在网页中布局一些数学表达式，不能使用乳胶或 mathML，只是纯 HTML（不是 HTML5）

我有一个不同表达式的表达式，例如 (a+b+sqrt(c))^(2x+b)

第二个表达式应该在第一个表达式的右侧稍小并在其上方。

听起来很简单，但我似乎无法正确理解。

任何帮助都是样式和布局会很棒，谢谢。

score 40 · Accepted Answer

当涉及到数学表达式时，HTML 相当有限。原则上，HTML 规范建议您使用supelement 作为上标，因此示例表达式为

(<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%;
}

在我的 HTML (and CSS) 中的数学页面上解释了一些原因。还要考虑用于包含复杂数学表达式的页面的基于 JavaScript 的库：

示例表达式是一个边界情况；如果平方根使用带有vinculum而不仅仅是 √<em>c的平方根符号来表示，那么它在数学上看起来会更正确，并且尝试使用 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 来实现相同的结果，为此您可以使用带有属性的 span：

vertical-align:super;

可以在这里看到一个演示。

score 1 · Accepted Answer

下标和上标字符可以由 sub 和 sup 指定。

X<sub>2</sub><sup>3</sup>

这给出了 X 后缀 2 和幂 3。这是赋予 html 中数字幂的简单方法。

4 回答 4