mymath.in.ua | LATEX PARSER

by Alexsandr Gorulko

HTML

UNARY/BINARY OPERATOR<br>
<div class="math">1 baseline $1-2=1$ baseline</div>
<div class="math">2 baseline $+\frac{1}{2}*-\frac{1}{2}$ baseline</div>
SUB/SUPERSCRIPT<br>
<div class="math">1 baseline $1^2+1_2$ baseline</div>
<div class="math">2 baseline $1^{1^{1^1}}+2_{2_{2_2}}$ baseline</div>
<div class="math">3 baseline $1^{2^{3_4}}+1_{2_{3^4}}$ baseline</div>
FRACTION<br>
<div class="math">1 baseline $\pm\frac{mp}{nk}$ baseline</div>
<div class="math">2 baseline $+\frac{1}{-\frac{1}{2}*\frac{mp}{nk}}$ baseline</div>
<div class="math">3 baseline $-\frac{+\frac{1}{2}-\frac{mp}{nk}}{2}$ baseline</div>
<div class="math">4 baseline $-1^\frac{2}{+\frac{1}{2}-\frac{mp}{nk}}$ baseline</div>
<div class="math">5 baseline $-1_\frac{+\frac{1}{2}-\frac{mp}{nk}}{2}$ baseline</div>

CSS

.math {
    font-size: 20px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}
/* UNARY-OPERATOR */
.unary-operator {
    display: inline-block;
}
.unary-operator ~ .fraction {
    display: inline-block;
    padding-left: .2em;
    padding-right: .2em;
}
/* BINARY-OPERATOR */
.binary-operator {
    display: inline-block;
    padding-left: .2em;
    padding-right: .2em;
}
/* SUB/SUPERSCRIPT */
.script {  
    display: inline-block;
    vertical-align: -.45em;
    white-space: nowrap; 
    line-height: 1em;
    padding-left: .08em;
    margin-bottom: -.4em;
}
.super {
    display: block;
    line-height: 1em;
}
.sub {
    display: block;
    float: right;
    line-height: 1em;
}
.script {  
    font-size: 80%;
}
.script .script {
    font-size: 87%;
}
.script .script .script {
    font-size: 100%;
}
/* FRACTION */
.fraction {
    display: inline-block;
    text-align: center;
    vertical-align: -.45em;
    white-space: nowrap; 
    line-height: 1em;
}
.fraction .numerator {
    display: block;
    line-height: 1em;
    padding-bottom: .08em; 
    padding-left: .08em;
    padding-right: .08em;
}
.fraction .denominator {
    display: block;
    float: right;
    border-top: 1px solid;    
    width: 100%;
    margin-right: -.1em;
    margin-left: -.1em;
    margin-top: 0px;
    line-height: 1em;    
    padding-top: .08em;
    padding-left: .08em;
    padding-right: .08em;
}

JavaScript

// --------------------------------------------------
// CHECK PARSER | latex.codecogs.com
$('.math').each(function(e) {
    $('<br><div style="background:yellow;text-align:right"><img src="' + 'http://latex.codecogs.com/gif.latex?$' + encodeURIComponent($(this).text().match(/(?:\$)(.*?)(?:\$)/g)) + '$"/></div><br>').insertAfter($(this));
});
// --------------------------------------------------
// My PARSER

// --------------------------------------------------
// SYMBOL
function s(dec) {
    return '&#' + dec + ';';
}
// UNARY-OPERATOR
function u_p()    {return uop(s(43));}
function u_m()    {return uop(s(8722));}
function u_pm()   {return uop(s(177));}
function uop(s) {
    var html =
'<span class="unary-operator">' + s + '</span>';
    return html;
}
// BINARY-OPERATOR
function b_p()    {return bop(s(43));}
function b_m()    {return bop(s(8722));}
function b_pm()   {return bop(s(177));}
function b_d()    {return bop(s(8901));}
function b_eq()   {return bop(s(61));}
function bop(s) {
    var html =
'<span class="binary-operator">' + s + '</span>';
    return html;
}
// SUB/SUPERSCRIPT
function sup(s) {
    var html =
'<span class="script">' +
'    <span class="super">' + s + '</span>' +     
'    <span class="sub"></span>' +        
'    <span style="display:inline-block;width:0"></span>' +
'</span>';      
    return html;
}
function sub(s) {
    var html =
'<span class="script">' +
'    <span class="super"></span>' +
'    <span class="sub">' + s + '</span>' +        
'    <span style="display:inline-block;width:0"></span>' +
'</span>';
    return html;
}
function supsub(sup,sub) {
    var html =
'<span class="script">' +
'    <span class="super">' + sup + '</span>' +
'    <span class="sub">' + sub + '</span>' +       
'    <span style="display:inline-block;width:0"></span>' +
'</span>';        
    return html;
}
// FRACTION
function frc(n, d) {
    var html = 
'<span class="fraction">' +
'    <span class="numerator">' + n + '</span>' +
'    <span...