mymath.in.ua | MATH FORMULAS | HTML & CSS

by Alexsandr Gorulko

HTML

<div class="math"></div>

CSS

.math {
    font-family: symbolaregular, 'Times New Roman', serif;
    font-size: 20px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}
/* BASELINE */
.baseline {
    display: inline-block;
    padding-left: 1em;
    padding-right: 1em;    
}
/* 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;
}
/* LIMITS */
.symbol_subsup,
.limits {  
    display: inline-block;
    vertical-align: -.1em;
    white-space: nowrap; 
    line-height: 1em;
    padding-left: .08em;
}
.symbol_subsup .super,
.limits .super {
    display: block;
    line-height: 1em;
}
.symbol_subsup .gap,
.limits .gap {
    display: block;
    float: right;  
}
.symbol_subsup .sub,
.limits .sub {
    display: block;
    line-height: 1em;
}
.symbol {
...

JavaScript

// TESTS

$('<span>UNARY/BINARY-OPERATOR<span><br><br>').appendTo('.math');
$(bl('1') + '1' + b_m() + '2' + b_eq() + u_m() + '1'+ bl() + '<br><br>').appendTo('.math');
$(bl('2') + u_p() + frc(1,2) + b_d() + u_m() + frc(1,2) + bl() + '<br><br>').appendTo('.math');

$('<span>SUB/SUPERSCRIPT<span><br><br>').appendTo('.math');

$(bl('1') + '1' + sup('2') + b_p() + '1'+ sub('2') + bl() + '<br><br>').appendTo('.math');
$(bl('2') + '1' + sup('1' + sup('1' + sup('1'))) + b_p() + '1'+ sub('1'+ sub('1'+ sub('1'))) + bl() + '<br><br>').appendTo('.math');
$(bl('3') + '1' + sup('2' + sup('3'  + sub('4'))) + b_p() + '1'+ sub('2' + sub('3' + sup(4))) + bl() + '<br><br>').appendTo('.math');


$('<span>FRACTION<span><br><br>').appendTo('.math');
$(bl('1') + u_pm() + frc('mp','nk') + bl() + '<br><br>').appendTo('.math');
$(bl('2') + u_p() + frc(1, u_m() + frc(1,2) + b_d() + frc('mp','nk')) + bl() + '<br><br>').appendTo('.math');
$(bl('3') + u_m() + frc(u_p() + frc(1,2) + b_m() + frc('mp','nk'), 2) + bl() + '<br><br>').appendTo('.math');
$(bl('4') + u_m() + '1' + sup(frc(2,u_p() + frc(1,2) + b_m() + frc('mp','nk'))) + bl() + '<br><br>').appendTo('.math');
$(bl('5') + u_m() + '1' + sub(frc(u_p() + frc(1,2) + b_m() + frc('mp','nk'), 2)) + bl() + '<br><br>').appendTo('.math');

$('<span>LIMITS<span><br><br>').appendTo('.math');
$(bl('1') + int() + subsup('a','b') + bl() + '<br><br>').appendTo('.math');
$(bl('2') + int() + s_subsup('a','b') + bl() + '<br><br>').appendTo('.math');
$(bl('3') + int() + s_limits('a','b') + bl() + '<br><br>').appendTo('.math');
$(bl('4') + sum() + subsup('a','b') + bl() + '<br><br>').appendTo('.math');
$(bl('5') + sum() + s_subsup('a','b') + bl() + '<br><br>').appendTo('.math');
$(bl('6') + sum() + s_limits('a','b') + bl() + '<br><br>').appendTo('.math');
// --------------------------------------------------
// BASELINE
function bl(s) {
    var html =
'<span class="baseline">' + (s||'') + ' <i>baseline</i></span>';
    return html;
}
// SYMBOL
function...