Symbol długiego podziału (HTML i/lub CSS)

Question

Poszukuję sposobu wyświetlenia tradycyjnego symbolu długiego podziału za pomocą HTML/CSS (trochę tak, jak pokazano tutaj: http://barronstestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png).

To jest w zasadzie to, czego potrzebuję, ale nie sądzę, aby wielu ludzi miało zainstalowaną odpowiednią czcionkę na swoim komputerze (przynajmniej nie).

Ja również próbowałem (poniżej), ale nie stale wyświetlane na Chrome i FF ...

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

ten powinien być wyświetlanie 84 ÷ 4 z pudełka długiego podziału.

Pomysły?

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

Pojęcie i oznaczenie „długiego podziału” jest tradycyjny, w niektórych tradycji nauczania arytmetyki w szkole, i jest stosowany w sytuacjach, gdzie etapy podziału całkowitej są wyjaśnione graficznie. Nie ma niezawodnego sposobu na to w HTML i CSS, z wyjątkiem użycia obrazów, dużych obrazów zawierających cały długi podział jako proces lub fragment, np. jeden kawałek zawierający tylko liczbę, operator długiego podziału i inny numer (jak w jpg, o którym mowa w pytaniu). Oto jak np. http://www.mathsisfun.com/long_division.html to robi. Strona http://en.wikipedia.org/wiki/Long_division używa wstępnie sformatowanego tekstu, symboli konstrukcyjnych ze znaków Ascii takich jak ")" i "_", ale wynik jest prymitywny i nie jest solidny (np. Zamienia się w bełkot w czytniku ekranu).

Podczas korzystania z obrazu należy napisać tekst, który wyraża to słownie. To w pewnym stopniu zależy od kontekstu, ale obawiam się, że musiałoby to być długie, takie jak alt="long division with divisor 4, dividend 84".

Używanie tylko HTML i CSS do konstruowania długich podziałów jest raczej beznadziejne, ponieważ HTML i CSS są raczej bezsilne, z czymkolwiek, co obejmuje istotną dwuwymiarowość w notacjach matematycznych (tj. Wyrażenia matematyczne, które nie są prostymi liniowymi sekwencjami znaków). Nawet skonstruowanie square root expression, z vinculum rozciągającym się nad radikandem, wymaga oszustwa, które łatwo zawodzi, mniej lub bardziej, i pokazując takie wyrażenie jest podobne do, ale w zasadzie prostsze niż wyrażenie o długim podziale.

Znak U + 27CC LONG DIVISION teoretycznie pozwoliłby na napisanie wyrażenia z długim podziałem, nawet w postaci zwykłego tekstu, ponieważ jest zdefiniowany w standardzie Unicode, dzięki czemu "graficznie rozciąga się nad dywidendą". Jest to jednak w dużej mierze teoretyczne, z kilku powodów. Oprócz ograniczonego zakresu czcionek (który można rozwiązać za pomocą czcionki do pobrania z @font-face), podejście nie jest obsługiwane przez oprogramowanie. Pomysł "graficznie rozciągający się nad dywidendą" nie jest łatwy do wdrożenia. Chociaż przeglądarki mogą (przy użyciu odpowiedniej czcionki) renderować 84⟌4 poprawnie, to zawodzą z 84⟌42 (symbol rozciąga się na "4" po tym, ale nie na "2"). Wydaje się, że powodem jest to, że w czcionkach zawierających kod U + 27CC może on być implementowany z wcześniejszymi regułami, co oznacza, że ​​operator wydaje się rozciągać w następnej cyfrze, ale aby rozszerzyć go na następny numer (sekwencja cyfr) Potrzebna byłaby obsługa oprogramowania powyżej prostego poziomu czcionki.

Answer 3

W HTML5 można bezpośrednio używać MathML.MathML 3 obsługuje elementu <mlongdiv>:

<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> 

Dla MathML 2 można wykorzystać rozwiązanie Javascript w oparciu o lateks, takie jak MathJax. Oto long division example, który wykorzystuje parser MathJax TeX do analizy danych wejściowych formularza \longdiv{84}{4}.