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)

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)

• javascript
• html

• 1 MathML <msqrt> should be the way, if more browsers did support MathML natively... – Kaiido Commented Jun 11, 2020 at 2:17
• @Kaiido thats really convenient but unfortunately only firefox and safari supports it for now – Hisham Bawa Commented Jun 11, 2020 at 3:17

5 Answers 5

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

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>

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

√2

Designed a dynamic way to do this, only requirement is the internal font is monospaced.

"--char" tells the CSS how many characters are contained in the square root to draw the top line the correct width. The overline is not generating in white, but will outside of the code snippet. "--color" tells the CSS what color the overline should be, while the SVG can easily be changed color via the HTML (probably could be made easier but haven't done so).

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

Native MathML could be way to go here, as As Kaiido suggested in the comment. Meanwhile MathML gained support in (rest of) major browsers in 2023, so <math><msqrt>(whatever)</msqrt></math> should work in most contemporary browsers:

<math>
  <msqrt>
   <msup>
    <mi>x</mi>
    <mn>2</mn>
   </msup>
  </msqrt>
  <mo>=</mo>
  <mi>x</mi>
</math>