HTML, CSS: overbar matching square root symbol
- by Pindatjuh
Is there a way in HTML and/or CSS to do the following, but then correctly:
√¯¯¯¯¯¯φ·(2π−γ)
Such that there is an overbar above the expression, which neatly aligns with the √?
I know there is the Unicode ¯, that looks like the overbar I need (as used in the above example, though as you can see – it doesn't align well with the root symbol).
The solution I'm looking for works at least for one standard font, on most sizes, and all modern browsers. I can't use images; I'd like to have a pure HTML4/CSS way, without client scripting.
Here is my current code, thank you Matthew Jones (+1) for the text-decoration: overline! Still some problems
<div style="font-family: Georgia; font-size: 200%">
<span style="vertical-align: -15%;">√</span><span style="text-decoration: overline;"> x + 1 </span>
</div>
The line doesn't match the √ because I lowered it with 15% baseline height. (Because the default placement is not nice)
The line thickness doesn't match the thickness of the √.
Thanks!
