# Thread: Mathematical matrices

1. ## Mathematical matrices

Hello!
I'm working on a mathematical website and I need to create a matrix such as:

CodeCogsEqn.png

I can use images (as above) in some situations, but I'd like to be able to create one with CSS so that I can have my users enter elements "on the fly" via input boxes.

Any thoughts on how I might be able to accomplish this would be appreciated.

Thanks so much,

Eric

2. You can try having brackets [] in a specific class with specific height, z-index or positioning, and the numbers in another class, with another z-index or positioning?

Maybe this seems too complex :s

3. You will need a fair amount of javascript to pull this off.

I'd personally have the edges of the brackets become images and along the left hand / right hand side of each matrix I'd hav a border on each side repeating down, that way height wouldn't be an issue.

I'd personally use tables for their ease of use here. Easier maintenance for me.

4. Two things you will want to have a look at is MathML and javascript polyfils like MathJax.

Code html5:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>untitled</title>
<body>
<h1>MathML FTW!</h1>
[itex]
<mrow>
<mo>[</mo>
<mtable>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>0</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>0</mn>
</mtd>
<mtd>
<mn>1</mn>
</mtd>
</mtr>
</mtable>
<mo>]</mo>
</mrow>
</math>
</body>
</html>
This seemed to work (though a little differently) in firefox, safari & opera. Not at all in chrome.

If MathJax does what I think it does then it will replace that MathML with HTML/CSS and should make it look consistent.
If you are writing a site specifically for math though, it makes sense to use the tools that were precisely designed for it.

Hope it helps

5. ## Thank you!

Thanks for the quick responses! I think that the MathML/MathJax solutions make the most sense for my project.

-Eric

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•