Mathematical matrices

HTML & CSS
1

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

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 [URL=“http://www.mathjax.org/”]MathJax.


<!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 :slight_smile:

5

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

Enjoy your week…

-Eric