Simbolo di divisione lunga (HTML e/o CSS)

Question

Sto cercando un modo per visualizzare il simbolo tradizionale a lunga divisione usando HTML/CSS (un po 'come quello mostrato qui: http://barronstestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png).

Questo (http://www.fileformat.info/info/unicode/char/27cc/index.htm) è in pratica quello di cui ho bisogno, ma non credo che molte persone abbiano il font corretto installato sul proprio computer per vederlo (non lo faccio, almeno).

Ho anche provato questo (sotto), ma non viene visualizzato in modo coerente su Chrome e FF ...

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

Questa dovrebbe essere la visualizzazione di 84 ÷ 4 con la scatola divisione lunga.

Idee?

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

Il concetto e la notazione di “divisione lunga” è di tipo tradizionale, in alcune tradizioni, di insegnare l'aritmetica a scuola, ed è utilizzato in contesti in cui i passi di divisione intera vengono spiegati graficamente. Non esiste un modo affidabile per farlo in HTML e CSS eccetto che usando immagini, o immagini grandi contenenti un'intera lunga divisione come processo o a tratti, ad es. un pezzo contenente solo un numero, l'operatore di divisione lunga e un altro numero (come nel jpg a cui si fa riferimento nella domanda). Questo è il modo es. http://www.mathsisfun.com/long_division.html fa questo. La pagina http://en.wikipedia.org/wiki/Long_division utilizza testo preformattato, simboli di costruzione da caratteri Ascii come ")" e "_", ma il risultato è di aspetto primitivo e non è robusto (ad esempio, diventa non verbale in uno screen reader).

Quando si utilizza un'immagine, è necessario scrivere un testo alt che esprima l'idea verbalmente. Ciò dipende in qualche modo dal contesto, ma temo che debba essere piuttosto lungo, ad esempio alt="long division with divisor 4, dividend 84".

Utilizzare solo HTML e CSS per costruire divisioni lunghe è piuttosto senza speranza, poiché HTML e CSS sono piuttosto impotenti con qualsiasi cosa che implichi una bidimensionalità essenziale nelle notazioni matematiche (ad esempio, espressioni matematiche che non sono semplici sequenze lineari di caratteri). Anche costruire un square root expression, con un vincolo che si estende sopra il radicand, richiede un trucco che fallisce facilmente, più o meno, e mostrare un'espressione simile è, ma essenzialmente più semplice di un'espressione di divisione lunga.

Il carattere U + 27CC LUNGO DIVISIONE sarebbe teoricamente permetterà di scrivere una lunga espressione divisione, anche in formato testo, dal momento che è definito nello standard Unicode in modo che “si estende graficamente rispetto al dividendo”. Questo è tuttavia in gran parte teorico, per diverse ragioni. Oltre alla copertura dei font limitata (che potrebbe essere gestita utilizzando un font scaricabile con @font-face), l'approccio soffre della mancanza di supporto software. L'idea "estendersi graficamente sul dividendo" non è facilmente implementabile. Mentre i browser possono (con l'uso di un font adatto) rendere 84⟌4 correttamente, falliscono con 84⟌42 (il simbolo si estende su "4" dopo di esso ma non sul "2"). Il motivo sembra essere che nei caratteri che contengono U + 27CC, potrebbe essere implementato con regole avanzate che implicano che l'operatore sembra estendersi sulla successiva cifra, ma per estenderlo sul prossimo numero (sequenza di cifre) sarebbe necessario un supporto software superiore al semplice livello di font.

Answer 3

In HTML5, è possibile utilizzare direttamente MathML.MathML 3 supporta l'elemento <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> 

Per MathML 2 è possibile utilizzare una soluzione basata su Javascript LaTeX, come ad esempio MathJax. Ecco uno long division example che utilizza il parser MathJax TeX per analizzare l'input del modulo \longdiv{84}{4}.