在HTML中（使用Javascript），是否可能在平方根符号内显示数字？

Question

问题已经很清楚了。我需要在HTML中显示平方根符号内的数字。这是否可能？如果不可能，最好的选择是什么？（除了设计hr元素的平方根形状之外）

- Uriel Bitton

---

如果更多的浏览器本地支持MathML，MathML <msqrt>应该是正确的方式... - Kaiido

@Kaiido 这确实很方便，但不幸的是目前只有 Firefox 和 Safari 支持它。 - Hisham Bawa

Answer 1

<span style="white-space: nowrap">
&radic;<span style="text-decoration:overline;">&nbsp;X + 1&nbsp;</span>
</span>

- dada

---

顺便问一下，没有标准的方法吗？比如本地代码之类的？ - Uriel Bitton

Answer 2

首先，如果你不反对使用外部库。

那么就可以直接使用mathjax js库。

  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script id="MathJax-script" async
          src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
  </script>

<p>
$$ \sqrt{22b^3-c} \over 3b $$
</p>

使用本地解决方案

您可以使用UTF-8的组合字符代码&#x305。它将在前一个代码块上方添加上划线。

但是一定要注意您的字体设置。根据字体不同，它们可能显示为单独的上划线，连续的上划线（甚至作为单独的字符）。 （使用“运行代码段”检查下面的行为）

<p>Stack-overflows font settings results in continuous overline for combining characters in textarea in (Chrome on OsX)</p>
<textarea>
&radic;2&#x305;2&#x305
</textarea>
<p>
Stack-overflows stylesheet results in separated overlines for combining characters in paragraph (Chrome on OsX)
</p>
<p>
&radic;2&#x305;2&#x305  <span style="font-family: Courier">
  (in Courier &radic;2&#x305;2&#x305 )
</span>
</p>

- visibleman

Answer 3

你可以使用这个 HTML 符号（例如平方根的2）。

√2

- djcaesar9114

---

数字不在平方根内，因此在视觉上不够专业。 - Uriel Bitton

添加一个上边框为1像素。 - djcaesar9114

Answer 4

设计了一种动态的方法来实现这个功能，唯一的要求是内部字体是等宽字体。

"--char" 告诉 CSS 在根号中包含多少字符以绘制正确宽度的顶线。顶部横线不会生成白色，但代码段之外会生成。"--color" 告诉 CSS 应该将顶部横线的颜色设置为什么，而 SVG 可以通过 HTML 轻松更改颜色（可能还可以更简单，但尚未这样做） 。

.sqrt {
  align-items: baseline;
  padding-top: 8px;
}

.sqrt span {
  margin-left: -1ch;
  position: relative;
}

.sqrt>span:after {
  content: '';
  position: absolute;
  width: var(--char);
  height: 0.1em;
  top: 0;
  left: 1ch;
  background-color: var(--color);
}

<samp class="sqrt" style="--char: 1ch; --color: white;">
        2
    <span>
        <svg style="width: 1ch;" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 59 100">
            <path fill="none" stroke="#000" stroke-width="5.5" d="M13.7 62.1 1.4 69.5"/>
            <path fill="none" stroke="#000" stroke-width="7.8" d="M30.9 96.3 9.2 62.2"/>
            <path fill="none" stroke="#000" stroke-miterlimit="1.5" stroke-width="4.2" d="M35.9 98h-6.1l-1.4-2.3"/>
            <path fill="none" stroke="#000" stroke-width="7.8" d="M55 0v2.6L32.2 99"/>
        </svg>
        <span>6</span>
    </span>
</samp>

- Mr. Fishy