Как сделать корень n степень

Question

Всем доброго временни суток! Нужно сделать коректное отображенние n-й степенни корення.

от по типу такого. Картинки или использование посторонних сайтов не подходит. Код будет в строке с текстом по этому должно выглядить адекватно. Есть сейчас код для самого корення:

let idsN = document.querySelectorAll('.radicalN')
idsN.forEach((element) => {
    let [n, r] = element.innerText.split('/') 
    let newText = ` <span class="wrapper">
                        <sup class = "suprad">${n}</sup>
                        <span class="root">
                            <span class="radicand">
                                <var>${r}</var>
                            </span>
                        </span>
                    </span>`
    element.innerHTML = newText
})

.wrapper {
    font-style: italic;
}

.root {
    display: inline-block;
    vertical-align: middle;
    border-top: 2px solid;
    border-left: 2px solid;
    transform: skew(-15deg);
    transform-origin: bottom left;
    margin: 0 10px;
    position: relative;
    bottom:5px;
}

.root:before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 40%;
    width: 9px;
    left: -9px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: skew(30deg);
    transform-origin: bottom right;
}

.radicand {
    display: inline-block;
    padding-left: 3px;
    transform: skew(15deg);
}

<span class="radicalN">n/f(x)</span> = a

Answer 1

.root {
  position: relative;
}

.root::before {
  content: "√";
  display: inline-block;
  font-size: 1.3em;
  position: relative;
  top: 3px;
}

.root::after {
  content: "";
  border-top: 1px solid currentColor;
  position: absolute;
  left: 10px;
  right: 0;
  top: -2px;
  display: block;
}

sup {
  position: relative;
  top: -4px;
  margin-right: -6px;
}

<sup>n</sup><span class="root">f(x)</span> = a

<br><br><br>

10 + <sup>153</sup><span class="root">120 - 15 + func(552 + 1.5)</span> = 500

Так как я не знаю в подробностях какой шрифт на конечном сайте, и какой вычислится в браузере здесь, то не могу подогнать до пикселя. Эту подгонку нужно сделать на сайте, где шрифт точно задан.

БЛОГ НА HUSL

Как сделать корень n степень

Ответы (1 шт):