是否可以在HTML中的平方根符号中显示数字?(JavaScript?)

n9vozmp4  于 2023-06-27  发布在  Java
关注(0)|答案(4)|浏览(147)

这个问题是不言自明的。我需要在html中显示一个平方根符号内的数字。这可能吗如果不是,最好的选择是什么?(除了将hr元素设计成平方根形状之外)

czq61nw1

czq61nw11#

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

n53p2ov02#

首先,如果您不反对使用外部库。

只需继续使用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>
6tqwzwtp

6tqwzwtp3#

你可以使用这个html符号(例如平方根为2)。

&#8730;2
cyvaqqii

cyvaqqii4#

设计了一个动态的方式来做到这一点,唯一的要求是内部字体是等宽的。
“--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>

相关问题