HTML/CSS 布局数的表达式的幂(a^x)

Question

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

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

第二个表达式应该在第一个表达式的右边，稍微小一点，在它上面。

听起来很简单，但我似乎做对了。

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

原文由 Aviran 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML 在数学表达式方面相当有限。原则上，HTML 规范建议您使用 sup 元素作为上标，因此示例表达式为

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

然而，浏览器中 sup 的实现是不一致的，而且通常很差（例如导致行间距不均匀），因此使用 span 元素和类来代替：

 (<i>a</i> + <i>b</i> + √<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 的库：

• 凯特克斯
• MathJax
• jq数学

示例表达式是一个边界案例；如果平方根使用带有 vinculum 而不仅仅是 √ c 的平方根符号来表示，那么在数学上看起来会更正确，并且尝试使用 HTML 和 CSS 构造一个 vinculum 变得相当脏，但除此之外它可以用 HTML 和 CSS 合理地处理.

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

HTML 为上标定义了一个 <sup> 标签。例如：

 a<sup>x</sup>

您可以使用 CSS 更改其中的边距和垂直对齐方式。

原文由 icio 发布，翻译遵循 CC BY-SA 3.0 许可协议