Question

I’m trying to format math equations vertically using CSS. For example 5,343 + 32 should be formatted as so:

Line 1: 5,343 (right aligned)

Line 2: + (left aligned) 32 (right aligned) — Note that the plus sign and bottom number are on the same line.

Line 3: —— (horizontal line)

I’ve been fooling around with this for the last hour and have had very little luck.

I laid by HTML out like this:

<div id="textbox">
<p class="upperNum">5,343</p>
<p class="sign">+</p>
<p class="lowerNum">32</p>
<p class="line"><hr></p>
</div>

Answer 1

A semantic approach

Here’s a semantic approach to marking up an equation that, from the same markup, can be rendered horizontally or vertically by adding a single class. These equations are made up of numbers, an operator, and an equals sign. Here’s the markup for an equation:

<span class="equation">
  <span class="number">5,343</span>
  <span class="operator">+</span>
  <span class="number">32</span>
  <span class="equals">=</span>
  <span class="number">5,375</span>
</span>

That alone renders horizontally:

5,343
+
32
=
5,375

With a little CSS, we quickly can transform into a stacked layout. We just add a single stacked class to the equation element:

<span class="equation stacked">
  <span class="number">5,343</span>
  <span class="operator">+</span>
  <span class="number">32</span>
  <span class="equals">=</span>
  <span class="number">5,375</span>
</span>

The following CSS does the magic:

.equation.stacked {
  display: inline-block;
}

.equation.stacked .number {
  display: block;
  margin-left: 1em; /* space for the operator */
  text-align: right;
}

.equation.stacked .operator {
  float: left;
}

.equation.stacked .equals {
  display: block;
  height: 0;
  border-bottom: solid 1px black;
  overflow: hidden;
}

This renders like this:

Here’s a JSBin you can explore: http://jsbin.com/afemaf/1/edit