SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  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,564
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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