HTML, CSS: сверхпанель, соответствующая символу квадратного корня
Есть ли путь в HTML4 и/или CSS, чтобы сделать следующее, но затем правильно:
√¯¯¯¯¯¯φ\· (2π−γ)
↑ ← ← ←
Как я могу переместить свое выражение налево, под ¯ символы, такие, что они перекрывают друг друга?Примечание: это должно работать над каждым размером шрифта.
Спасибо!
(Мой текущий код, спасибо Matthew Jones (+1) для text-decoration: overline, испытывает недостаток в масштабировании размеров и правильно расположении сверхстроки. Вот почему я отредактировал этот вопрос, как ¯ действительно соответствует в размере и положении в шрифте Джорджии.)
4 ответа
Следующие работы точно , как я хотел:
<div class="math">
√<span>¯¯¯¯</span><span style="margin-left: -2.39em; vertical-align: 0.1em;">x + 1</span>
</div>
(Где math определяет семейство шрифтов : Джорджия и font-size )
Это работает с любым размером шрифта! : -)
Пример: http://jsbin.com/ihaba3
Вы можете установить CSS для текста, который должен отображаться под верхней панелью, как
text-decoration: overline
EDIT: Это чертовски близко к тому, что вы хотите (Chrome 4.1.249):
<div style="font-family: Georgia; font-size: 200%">
<span style="vertical-align: -15%;">√</span>
<span style="text-decoration: overline; vertical-align:-20%;"> x + 1 </span>
</div>
К сожалению, не существует способа изменить толщину самого верхнего края ...
возможно, вы сможете поместить символы под корнем в отдельный span, а затем стилизовать его с границей сверху. Но вам, вероятно, придется увеличить размер шрифта √, чтобы они выровнялись.
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msqrt>
<mrow>φ(2π−γ)</mrow>
</msqrt>
</math>