Long division symbol (HTML and/or CSS)

Question

I'm looking for a way to display the traditional long division symbol using HTML/CSS (kinda like what's shown here: http://barronstestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png).

This (http://www.fileformat.info/info/unicode/char/27cc/index.htm) is basically what I need, but I don't think many people would have the proper font installed on their computer to see it (I don't, at least).

I've also tried this (below), but it doesn't display consistently on Chrome and FF...

4<span style="text-decoration: overline;"><span style="font-size: 14px">)</span>84</span>

This should be displaying 84 ÷ 4 with the long division box.

Ideas?

Answer 1

<span style="border-right: 1px black solid; border-radius: 0px 0px 10px 0px">
    4 
</span>
<span style="border-top: 1px black solid; ">
    84 
</span>

Demo

Answer 2

The concept and notation of “long division” is traditional, in some traditions, of teaching arithmetic at school, and it is used in contexts where the steps of integer division are explained graphically. There is no reliable way to do this in HTML and CSS except by using images, either large images containing an entire long division as a process or piecewise, e.g. one piece containing just a number, the long division operator, and another number (as in the jpg referred to in the question). This is how e.g. http://www.mathsisfun.com/long_division.html does this. The page http://en.wikipedia.org/wiki/Long_division uses preformatted text, construction symbols from Ascii characters like “)” and “_”, but the result is primitive-looking and is not robust (e.g., turns to gibberish in a screen reader).

When using an image, you should write an alt text that expresses the idea verbally. This somewhat depends on context, but I’m afraid it would need to be longish, like alt="long division with divisor 4, dividend 84".

Using just HTML and CSS to construct long divisions is rather hopeless, since HTML and CSS are rather powerless with anything involving essential two-dimensionality in math notations (i.e., mathematical expressions that are not simple linear sequences of characters). Even constructing a square root expression, with a vinculum extending over the radicand, requires trickery that easily fails, more or less, and showing such an expression is similar to, but essentially simpler than a long division expression.

The character U+27CC LONG DIVISION would theoretically let you write a long division expression, even in plain text, since it is defined in the Unicode standard so that it “graphically extends over the dividend”. This is however largely theoretical, for several reasons. In addition to limited font coverage (which could be dealt with using a downloadable font with @font-face), the approach suffers from lack of software support. The idea “graphically extends over the dividend” is not easily implemented. While browsers may (when using a suitable font) render 84⟌4 properly, they fail with 84⟌42 (the symbol extends over the “4” after it but not over the “2”). The reason seems to be that in fonts that contain U+27CC, it might be implemented with advance rules that imply that operator seems to extend over the next digit, but to make it extend over the next number (digit sequence), software support above the simple font level would be needed.

Answer 3

In HTML5, you can directly use MathML. MathML 3 supports the <mlongdiv> element:

<figure>
  <math>
    <mlongdiv>
      <mn>4</mn>
      <mn></mn>
      <mn>84</mn>
    </mlongdiv>
  </math>
  <figcaption>
    This will display as a long division in browsers that support MathML 3.
  </figcaption>
</figure>

For MathML 2 you can use a Javascript solution based on LaTeX, such as MathJax. Here is a long division example which uses the MathJax TeX parser to parse input of the form \longdiv{84}{4}.