Question

I want to create a worksheet addition of, say, two five digit numbers. Using text-decoration:underline;, I get something like the following:

12345
+ 12345
-------

Wrapping in a div and using

style="width: 8em; margin: 1em; font-family: courier; text-align: right;"

gives me something like the following:

 12345
+ 12345
-------

which is marginally better than before. How would accomplish aligning the digits on the ones? To be clear, the digits will be the same length, but the best answer would be robust to two digits of size m and n where m does not necessarily equal n, but I’m willing to trade robustness for not requiring javascript.

  12345
+ 12345
-------
      ^---- align the ones digit

Thanks in advance!

Answer 1

This was rather fun to put together: Live Demo.
Note: Only tested on Firefox!

HTML:

<div class="worksheet">
    <span>12345</span>
    <span class="add">54321</span>
</div>

<div class="worksheet">
    <span>123</span>
    <span class="sub">45678</span>
</div>

<div class="worksheet">
    <span>54321</span>
    <span class="add">1234</span>
    <span class="sub">987</span>
    <span class="add">1357924</span>
</div>

CSS:

.worksheet {
    border: 1px dotted #000;
    display: inline-block;
    font-family: monospace;
    margin: 0.5em;
    padding: 10px;
    text-align: right;
}
.worksheet .add:before {
    content: "+";
    float: left;
    margin-right: 0.5em;
}
.worksheet .sub:before {
    content: "-";
    float: left;
    margin-right: 0.5em;
}
.worksheet span { display: block; }
.worksheet span:last-child {
    border-bottom: 2px solid #000;
    margin-bottom: 1em;
}