Html Question posted in
Some basic documentation can be found here.

HTML & CSS – Interplay Between Text-Decoration:Overline and <sub>

When I try to create a square root using the √ code and overline, this generally works until I introduce tags, such as in the following:

v<sub>1</sub> = &radic;<span style="text-decoration:overline">2g(y<sub>2</sub> - y<sub>1</sub></span>

I’m not sure if this will work, but I think you can see what I’m seeing with this: https://jsfiddle.net/gmf3qnha/

Basically, the overline is both broken and lower above the "2" and the "1" within sub tags. It’s pretty clear why it’s rendering this way, but of course the ideal is to show the equation under an unbroken square root line. Anyone know a good way to accomplish this? I don’t guess I can tell the style to ignore the internal tagging structure, but it seems like this should be achievable within a page using plain old HTML and CSS. Is that not the case?

Tags:

2

Answers


  1. 0

    Maybe you want bit like this

    .overline {
  position: relative;
  display: inline-block;
}

.root-expression {
  position: relative;
}

.overline::before {
  content: "";
  position: absolute;
  top: -0.15em;
  left: 0;
  right: 0;
  border-top: 1px solid black; /* Adjust the color and style as needed */
}
    <div>
  v<sub>1</sub> = &radic;<span class="overline"><span class="root-expression">2g(y<sub>2</sub> - y<sub>1</sub>)</span></span>
</div>
    Login or Signup to reply.
  2. 0

    Here’s a solution to your problem, albeit there could be a better approach, but I think this should be good enough. I’ve enclosed the entire equation into a div element just to organize it better. Rest of everything is almost same as yours but tidied up. I used another div element within for the overline part and gave it the display: inline; styling so it’d appear next to the radical symbol, gave it a top border of 1 pixels, used RGBA color format and gave black an alpha of 0.5, so it’d match the color of the radical sign. Margin left to get rid of the spacing and so the radical and the overline don’t look disconnected. Then used margin left again to add spacing to the left of the numbers.

    <div class="equation">
  <span>v<sub>1</sub></span> = &radic;
  <div style="display: inline;border-top: 1px solid rgba(0,0,0,0.5); margin-left: -4px">
    <span style="margin-left: 4px">2g(y<sub>2</sub>-y<sub>1</sub>)</span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search