Need help with math-css?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

parsegon
123 Stars 12 Forks 90 Commits 0 Opened issues

Description

Easy way to represent math by a few lines of HTML via CSS.

Services available

!
?

Need anything else?

Contributors list

# 80,443
math-css 123 CSS top 10

MathCSS

A verbose, responsive, and easy way to represent basic math and calculus by a few lines of HTML without the need for a heavier JavaScript library. Built exclusively in CSS using a block-chain technique. Sister library to: https://github.com/mathexl/chemistry-css

Render Example

New in 2.5.0 * Added support for Matrixes * Added support for display in white

What's MathCSS good for? * Quick depictions of integrals, summations, products, and alike. * Fast loading time. MathCSS uses no JS. None! * Scalable, responsive design. MathCSS is built like a choo-choo-s train. * Special math symbols without looking up the unicode.

Support soon to be added for: * Multi-bounds

Usage

Getting Started

First, add the CSS file to your page:


And you're ready to go! Documentation is easy as provided below. Simply, add an

equation
attribute to begin as follows (you can use the
mathbox
alias as well):

If you want the display to be entirely in white, add the class

white
to the
tag. So:

Integrals, Products, Summations

The goal of MathCSS is so that your HTML reads like math. You can easily add
integral
,
doubleintegral
,
tripleintegral
,
product
,
summation
like such:

</div>

To specify bounds and input, simply use

upperbound
,
lowerbound
, and
of
attributes:
5x
39x
35x + 45

upperbound
,
lowerbound
, and
of
will only display correctly when inside
integral
,
doubleintegral
,
tripleintegral
,
product
, or
summation
.

Since

upperbound
and
lowerbound
attributes are absolute, the order in which you declare them doesn't matter.

Fractions, Derivatives (a special fraction), Partial Derivatives

MathCSS has built-in support for
fraction
,
derivative
(short fraction), and
partial derivative
.

</div>

To specify top and bottom, simply use

top
and
bottom
attributes:
5x
39x

While MathCSS cannot support infinite fraction's within each other, it can go down a scope of 2. You can embed a subfraction in a fraction, but not a subfraction in a subfraction in a subfraction due to sizing constraints. For instace, the following code will work:

    <div fraction>
        <div top>
            35y + 4x
        </div>
        <div bottom>
            12x + 4z
        </div>  
    </div>

    + y<sup>2</sup> +

    <div fraction>
        <div top>
            35x + 4y
        </div>
        <div bottom>
            12z + 4
        </div>  
    </div>

</div>
<div bottom>

    <div fraction>
        <div top>
            35x + 2x
        </div>
        <div bottom>
            11x + 4
        </div>  
    </div>

    + 5 +

    <div fraction>
        <div top>
            35x + 4x
        </div>
        <div bottom>
            12x + 4
        </div>  
    </div>

</div>

If you ever need to enclose a fraction in a fraction in a fraction, it is optimal to use a de facto (x / y) notation - that helps with readibility anyway due the decreasing sizes of integer.

Since derivatives are technically both a fraction and an operand, they behave like a fraction in MathCSS. For the term that is being derived, just follow the derivative with a

term
tag. For example:
x
y
35x + 45

MathCSS also tries to allow users to never have to look up the unicode for common math symbols. Hence, there is a built in partial derivative function, just exclude the special d's. And yup,

partial derivative
reads just like English, use two words, not one or hyphenated.
x
y
35x + 45

Limits

Creating limits involves just three parts, the variable
variable
, what it is approaching
goingto
, and the term represented by
of
. The following code below would render the limit of x approaching infinity of thirty-five x squared plus twelve x plus nine.

x

35x2 + 12x + 9

Square Roots and Roots

You can add square roots easily using the
root
attribute. You can also specify the degree of the root with
degree
. Use
of
for the term. The
degree
tag is optional.

35x + 45y2 + 23
4

Vector Brackets

You can add vector wide brackets using
vector
instead of
term
.

4x, 3

HR Magic!

Using HTML's built in

tag, we can easily add common math characters into our equation without the messy closing tags.

For example, if you want to show the integral from the upperbound of infinity to the lower bound of 2 pi, of 35x + 45, simply:


2
+ 6
35x + 45

The above code renders:

Render Example

The tags


and

will automatically show. The available subclasses range from greek commons, discrete math symbols, and common figures. See the full list below. Simply use

-- no
 necessary.

Operand and Values:

partial
,
pm
,
infty
,
approx
,
neq
,
leq
,
geq

Discrete Math:

forall
,
exists
,
nexists
,
in
,
notin
,
and
,
or
,
cap
,
cup
,
congruent
,
subsetleft
,
subsetright
,
notsubsetleft
,
notsubsetright
,
subsetorequaltoright
,
subsetorequaltoleft
,
notsubsetorequaltoleft
,
notsubsetorequaltoright

Greek Letters:

pi
,
alpha
,
beta
,
lambda
,
delta
(more coming soon)

Absolute Value

To add absolute value, you can either use the

u
tag or use
with whatever is being absoluted. For instance:

HTML
-5 + -5 = 10 
`

General Operands

If you need to add, subtract, multiply, or divide two terms in a sequence, use

add
,
subtract
,
multiply
,
divide
.

Note that these attributes will only display functionally within the general equation tag and not within a integral for spacing reasons.

For example:

5x2
39x
35x + 45
<div add></div>

<div doubleintegral>
    <div upperbound>
        5y
    </div>
    <div lowerbound>
        3y
    </div>
    <div of>
        35y<sup>78</sup> + 45
    </div>
</div>

Exponents

If you want to add exponents, use the standard HTML

tags:
5x2
39x
35x + 45

Matrixes

The inherent complexity of matrixes makes them a bit different syntactically in Math.css. Math.css supports matrixes up to the size of 8 rows and infinite (within reason) cols. First, you need to declare the type of matrix along with the number of rows.
Due to the limits of CSS, the amount of rows needs to be statically declared unlike the number of cols.

This will create a matrix of two rows. The key attributes

three
,
four
,
five
,
six
,
seven
,
eight
all work respectively.

Due to the need to dynamically size the width of entries for long entries, we need to insert things into a matrix on a column to column basis.

To make things easy, math.css ships with two different ways of inserting columns. The first is the b-a method, which encloses a tags (entries) with b tags (cols). For instance, if I wanted the matrix of two by two rows, with the first row being 6 and 12, and the second row being 4 and 5, we get this:

6 4 12 5

However, this can get tedious given the amalgam of tags necessary. Therefore, you can instead use the alternate


method where you separate each entry with an

tag. Therefore, nothing is enclosed.
6
4
12
5

Choose

If you want to add probability constructs like n choose k, simply use the

choose
tag, similar to how you would construct a fraction. Using the tags
top
and
bottom
for each part of the choose.
4
3

License

MIT License: free to use and open source.

Want to add something? Feel free to fork or email me at [email protected] Or even send me a tweet to @mathewpregasen :).

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.