# Mathematical matrices

• Feb 28, 2012, 07:36
kreut
Mathematical matrices
Hello!
I'm working on a mathematical website and I need to create a matrix such as:

Attachment 59194

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
• Feb 28, 2012, 10:11
bulevardi
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
• Feb 28, 2012, 11:00
RyanReese
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.
• Feb 28, 2012, 14:53
markbrown4
Two things you will want to have a look at is MathML and javascript polyfils like MathJax.

Code html5:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <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 :)
• Feb 28, 2012, 17:24
kreut
Thank you!
Thanks for the quick responses! I think that the MathML/MathJax solutions make the most sense for my project.