Is it possible to display numbers inside a square root symbol in HTML? (Javascript?)

user_9983612 0
Viewed 2528

The question is self explanatory. I need to display numbers inside a square root symbol in html. Is it even possible? If its not, what is the best alternative? (aside from designing hr elements in the shape of a square root)

html javascript
3 Answers

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

user_134872730

First, if you are not against using an external library.

Just go ahead and use mathjax js library

  <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>

For a native solution

You could use combining character code &#x305 of UTF-8. It will combine the overline with previous codeblock.

But be really careful with your font settings. Depending on font, they might display as individual overline, or continuous overline (or even as separate character). (Check behavior below with "Run code snippet")

<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>

user_38190070

You can use this html symbol (example with square root of 2).

&#8730;2

user_10983030
Related