Mathematical matrices

**kreut** · Feb 28, 2012 07:36

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

**bulevardi** · Feb 28, 2012 10:11

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

**RyanReese** · Feb 28, 2012 11:00

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.

**markbrown4** · Feb 28, 2012 14:53

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>
<math>
  <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

**kreut** · Feb 28, 2012 17:24

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

Enjoy your week...

-Eric

User Tag List

Thread: Mathematical matrices

Thread Tools

Display

Mathematical matrices

Thank you!

Bookmarks

Bookmarks

Posting Permissions