CODEWITHSUNDEEP
htmlcsssvg
Wynne
Wynne

Reputation: 210

How to make the SVG element stretch vertically just right?

My problem is captured in the following fiddle: https://jsfiddle.net/byer5pfq/ I'm trying to implement the rendering of mathematical expressions with pure html/css and I need the square root to stretch vertically depending on the argument - so I resorted to SVG for auto-stretching. However, when the argument of the square root is not tall enough, the SVG still stretches to 150px (Why does 100% equal 150 pixels?). I'm using a table because the table layout typically enables you to match content heights.

Any suggestions on how to accomplish our goal would be greatly appreciated!

<span class="equation" style="display:inline">
  <table class="root" cellspacing="0">
    <tr>
          <td>
              <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none">
                  <text x="0" y="6.5" font-size="9px">&#8730;</text>
                </svg>
          </td>
          <td>
              <span class="root-argument">
                  <span class="variables">Ax</span>
              </span>
          </td>
     </tr>
  </table>
</span>

.equation {
  font-size: 30px;
}

svg {
  display: inline-block;
}

span.variables {
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle;
}

tr {
  margin: 0;
  padding: 0;
}

td {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

span.root-exponent {
  height: calc(70% + .6em);
  font-size: .6em;
  vertical-align: bottom;
  text-align: right;
  margin-right: -1em;
  width: 1em;
}

table.root {
  /*    position: relative; */
  display: inline-block;
  vertical-align: middle;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

svg.root-symbol {
  vertical-align: middle;
  width: .9em;
  height: 100%;  /* Need it to strech when .root-argument is tall!!! */
}

span.root-argument {
  margin-left: -1px;
  padding-top: .05em;
  /* Clearance for the bar */
  padding-left: .1em;
  /* A little space on the left */
  padding-right: .2em;
  /* A little more on the right */
  border-top: 0.073em solid black;
  /* that's the bar */
  height: 100%;
}

Upvotes: 0

Views: 1872

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

For the same reason as your other question.

You have specified that the SVG be 100% height. That means 100% the height of its parent. In your example, that's the <td>. But the <td> has no explicit height. It gets its height from its children.

So, because the height is unable to be determined, the SVG is defaulting to the default intrinsic height of 150px. And so the <td> gets that height as well.

If you want to use "100%" for the height, then the SVG's parent has to have a height that is explicit (eg. td { height: 30px; }), or is otherwise limited by some other factors.

Update

One way to work around this problem is to set the container of the SVG (ie. "root") to use relative positioning. Then if you set the SVG to use absolute positioning, the "root-argument" element will control the height of the container. You can then safely set the SVG to 100% height.

.equation {
  font-size: 30px;
}

svg {
  display: inline-block;
}

.root {
  position: relative;
}

svg.root-symbol {
  position: absolute;
  width: .9em;
  height: 100%;  /* Need it to strech when .root-argument is tall!!! */
}

.root-argument {
  display: inline-block;
  margin-left: 0.9em;  /* leave space for the absolutely positioned SVG */
  
  padding-top: .05em;
  /* Clearance for the bar */
  padding-left: .1em;
  /* A little space on the left */
  padding-right: .2em;
  /* A little more on the right */
  border-top: 0.073em solid black;
  /* that's the bar */
}
<div class="equation">
  <div class="root">
    <svg class="root-symbol" viewBox="0 0 5 6.5" preserveAspectRatio="none">
      <text x="0" y="6.5" font-size="9px">&#8730;</text>
    </svg>
    <div class="root-argument">
      <span class="variables">Ax</span>
      <br/>
      <span class="variables">Bx</span>
    </div>
  </div>
</div>

Upvotes: 0

Alvin K.
Alvin K.

Reputation: 4379

Modern browsers can use MathJax, MathML or AsciiMath, bypassing the headache CSS & JS manipulation. Equations can be drawn purely in SVG but mixing it with HTML is not recommended (formatting is way too complex!).

Below is a sample MathJax embedded into your table but without all the CSS formatting. Highly readable, easily editable and supported by a lot of browsers. 

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<span class="equation" style="display:inline">
  <table class="root" cellspacing="0">
    <tr>
		  <td>

		  </td>
			<td>
			  <span class="root-argument">
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi> <mo>=</mo>

        <mo>&#x00B1;</mo> <!-- plus-minus sign -->
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&#x2212;</mo> <!-- long-dash -->
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>


</math>
        </span>
      </td>
    </tr>
  </table>

Upvotes: 1

Related Questions