HTML, CSS: символ квадратного корня, соответствующий верхней полосе

Question

Есть ли способ в HTML4 и / или CSS сделать следующее, но потом правильно:

& Радич; & MACR; & MACR; & MACR; & MACR; & MACR; & MACR; & Phi; & Мидот; (2 & пи; & минус; & гамма;)
& Thinsp; & ЕПРС; & EnSP; & thinsp; & uarr; & ЕПРС; & LARR; & ЕПРС; & LARR; & EnSP; & thinsp; & LARR; * +1005 *

Как я могу переместить свое выражение влево под символами ¯, чтобы они перекрывали друг друга? Примечание: он должен работать на любой размер шрифта.

Спасибо!

_{(Мой текущий код, спасибо Мэтью Джонсу ^{(+ 1)} за text-decoration: overline, отсутствует масштабирование размеров и правильное позиционирование наложения. Вот почему Я редактировал этот вопрос, так как ¯ соответствует размеру и позиции шрифта Georgia .}

Answer 1

Вы можете установить CSS для текста, который должен отображаться под панелью, как

text-decoration:overline

РЕДАКТИРОВАТЬ: Это чертовски близко к тому, что вы хотите (Chrome 4.1.249):

<div style="font-family: Georgia; font-size: 200%">
    <span style="vertical-align: -15%;">&radic;</span>
    <span style="text-decoration: overline; vertical-align:-20%;">&nbsp;x&nbsp;+&nbsp;1&nbsp;</span>
</div>

К сожалению, похоже, нет способа изменить толщину самой линии ...

Answer 2

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <msqrt>
        <mrow>φ(2π−γ)</mrow>
    </msqrt>
</math>

Answer 3

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

Answer 4

Следующие работы точно , как я и хотел:

<div class="math">
    &radic;<span>&macr;&macr;&macr;&macr;</span><span style="margin-left: -2.39em; vertical-align: 0.1em;">x + 1</span>
</div>

(где math определяет font-family: Georgia и font-size)

Это работает на любом размере шрифта! : -)

Пример: http://jsbin.com/ihaba3