HTML / CSS布局编号具有表达能力（a ^ x） [英] HTML/CSS layout number to the power of expression (a^x)
问题描述
我需要在网页中布置一些数学表达式，不能使用乳胶或mathML，只能使用纯HTML（不是HTML5）
I need to layout some math expressions in a web page, cant use latex or mathML, just plain HTML (not HTML5)
我有一个强大的表达式一个不同的表达式，例如
（a + b + sqrt（c））^（2x + b）
I have an expression to the power of a different expression, for example (a+b+sqrt(c))^(2x+b)
第二个表达式应该在右边
The second expression should be to the right of the first expression a bit smaller and above it.
听起来很简单，但我似乎无法正确理解。
Sound simple enough but I can't seem to get it right.
任何帮助都是样式和布局都很好，谢谢。
Any help is the styling and layout would be great, thanks.
推荐答案
HTML相当有限数学表达式。原则上，HTML规范建议您对上标使用 sup 元素，因此示例表达式应为
HTML is rather limited when it comes to mathematical expressions. In principle, HTML specifications suggest that you use sup element for superscripts, so the sample expression would be
(<i>a</i> + <i>b</i> + √<i>c</i>)<sup>2<i>x</i> + <i>b</i></sup>
但是， sup 在浏览器中的实现是不一致的，并且通常很差（例如，导致行距不均匀），因此，将 span 元素与一个类一起使用会更好地实用：
However, the implementations of sup in browsers are inconsistent and generally poor (causing e.g. uneven line spacing), so it is pragmatically better to use the span element with a class instead:
(<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%;
}
某些原因在我的页面上有所说明 HTML（和CSS）中的数学。对于包含复杂数学表达式的页面，还要考虑基于JavaScript的库：
Some reasons are explained on my page Math in HTML (and CSS). Also consider JavaScript-based libraries for pages containing complicated math expressions:
- KaTeX
- MathJax
- jqMath
示例表达式是一个临界情况；如果使用具有 vinculum 而不仅仅是√ c ，并且尝试使用HTML和CSS构造一个vinculum变得相当肮脏，但否则可以使用HTML和CSS合理地处理。
The sample expression is a borderline case; it would look mathematically more correct if the square root were represented using a square root symbol with vinculum and not just √c, and trying to construct a vinculum using HTML and CSS gets rather dirty, but otherwise it can be reasonably handled with HTML and CSS.
这篇关于HTML / CSS布局编号具有表达能力（a ^ x）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
