Long-Divisions-Symbol (HTML und/oder CSS)

Question

Ich bin auf der Suche nach einer Möglichkeit, das traditionelle Long-Division-Symbol mit HTML/CSS anzuzeigen (ähnlich wie hier gezeigt: http://barronstestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png).

Diese (http://www.fileformat.info/info/unicode/char/27cc/index.htm) ist im Grunde, was ich brauche, aber ich glaube nicht, dass viele Leute die richtige Schriftart auf ihrem Computer installiert haben, um es zu sehen (ich zumindest nicht).

Ich habe auch die (unten) versucht, aber es zeigt nicht konsequent auf Chrome und FF ...

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

Dies sollte mit der langen Teilung Box 84 ÷ 4 werden angezeigt wird.

Ideen?

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

Das Konzept und die Schreibweise von „long division“ ist, wird in einigen Traditionen, Arithmetik in der Schule des Lehrens und es grafisch in Kontexten verwendet, in denen die Schritte der Integer-Division erklärt werden traditionell. Es gibt keine zuverlässige Möglichkeit, dies in HTML und CSS zu tun, außer durch Verwendung von Bildern, entweder großen Bildern, die eine gesamte lange Teilung als einen Prozess oder stückweise enthalten, z. ein Stück, das nur eine Zahl, den Operator der langen Division und eine andere Zahl enthält (wie in dem in der Frage erwähnten jpg). Dies ist z.B. http://www.mathsisfun.com/long_division.html tut dies. Die Seite http://en.wikipedia.org/wiki/Long_division verwendet vorformatierten Text, Konstruktionssymbole aus Ascii-Zeichen wie ")" und "_", aber das Ergebnis ist primitiv aussehend und nicht robust (z. B. wird in einem Bildschirmleser zu Kauderwelsch).

Wenn Sie ein Bild verwenden, sollten Sie einen alt Text schreiben, der die Idee verbal ausdrückt. Das hängt etwas vom Kontext ab, aber ich fürchte, es müsste länglich sein, wie alt="long division with divisor 4, dividend 84".

Nur HTML und CSS zu verwenden, um lange Unterteilungen zu konstruieren, ist ziemlich hoffnungslos, da HTML und CSS ziemlich machtlos sind mit allem, was wesentliche Zweidimensionalität in mathematischen Notationen beinhaltet (d. H. Mathematische Ausdrücke, die keine einfachen linearen Zeichenfolgen sind). Selbst die Konstruktion eines square root expression mit einem Vinculum, das sich über den Radicand erstreckt, erfordert Tricks, die leicht mehr oder weniger versagen, und das Zeigen eines solchen Ausdrucks ist ähnlich, aber wesentlich einfacher als ein Ausdruck mit langer Division.

Das Zeichen U + 27CC LONG DIVISION lässt Sie theoretisch einen langen Divisionsausdruck schreiben, sogar im Klartext, da er im Unicode-Standard definiert ist, so dass er sich "grafisch über den Dividend erstreckt". Dies ist jedoch aus mehreren Gründen weitgehend theoretisch. Neben der begrenzten Schriftabdeckung (die mit einer herunterladbaren Schriftart mit @font-face behandelt werden kann) leidet der Ansatz an fehlender Softwareunterstützung. Die Idee "grafisch über die Dividende auszudehnen" ist nicht einfach umzusetzen. Während Browser (bei Verwendung einer geeigneten Schriftart) 84⟌4 richtig rendern können, scheitern sie mit 84⟌42 (das Symbol erstreckt sich über die "4" hinaus, aber nicht über die "2"). Der Grund scheint zu sein, dass in Schriftarten, die U + 27CC enthalten, es mit Vorausregeln implementiert werden könnte, die implizieren, dass der Operator sich über die nächste Ziffer Nummer Nummer (Ziffernfolge) erstreckt. , Software-Unterstützung über der einfachen Schriftart-Ebene wäre erforderlich.

Answer 3

In HTML5 können Sie direkt MathML verwenden.MathML 3 unterstützt das <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> 

Für MathML 2 Sie eine Javascript-Lösung auf Basis von LaTeX, wie MathJax verwenden können. Hier ist eine long division example, die den MathJax TeX-Parser verwendet, um die Eingabe des Formulars \longdiv{84}{4} zu analysieren.