SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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. #2
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Thank you!

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

    Enjoy your week...

    -Eric


Bookmarks

Posting Permissions

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