mathican: Mathe darstellen

Hallo zusammen,

ich möchte gerne Polynome in HTML so darstellen, dass möglichst jeder Browser sie darstellen kann. MathML kommt daher nicht in Frage. Bilder kommen auch nicht in Frage, da die Polynome per Zufall generiert werden. Bislang haben ich folgenden Ansatz:

eingelesen wird bspw. folgender String: "(m^13*(m^8:m^12)):b^8"

Den schicke ich dann durch einen Parser, der mir folgendes liefert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Testarea</title>

<style type="text/css">
.zaehler {
 border-bottom:1px solid #000000;
}

td {
 text-align:center;
 //border:2px solid #ff0000;
 vertical-align:middle;
}

tr {
}

table {
 padding:0em;
 margin:em;
 display:inline;
}

</style>

</head>

<body style="font-family:Arial;font-size:100.1%">
<table><tr><td>m<sup>13</sup>&middot; (</td><td><table><tr><td class='zaehler'>m<sup>8</sup></td></tr><tr><td>m<sup>12</sup></td></tr></table></td><td>)</td></tr></table>

<table><tr><td></td><td>
<table><tr><td class='zaehler'>m<sup>13</sup>&middot; (</td><td>
<table><tr><td class='zaehler'>m<sup>8</sup></td></tr><tr><td>m<sup>12</sup></td></tr></table>
</td><td>)</td></tr><tr><td>b<sup>8</sup></td></tr></table></td><td></td></tr></table>

</body>
</html>

Das Problem seht ihr ja selbst. Hat jemand eine Idee, wie ich das verbessern kann. Der Parser sieht im Moment so aus:

function changeToTables(sTerm) {
 //document.write("sTerm = "+sTerm+"<br>");
 document.f.debug.value += "sTerm = "+sTerm+"\n\n";
 var result = "";
 if (getPosOhneKlammer(sTerm,"+")>-1) {
  result=changeToTables(before(sTerm,"+"))+"+"+changeToTables(after(sTerm,"+"));
 } else {
  if (getPosOhneKlammer(sTerm,"-")>-1) {
   result=changeToTables(before(sTerm,"-"))+"-"+changeToTables(after(sTerm,"-"));
  } else {
   if (getPosOhneKlammer(sTerm,":")>-1) {
    result="</td><td><table><tr><td class='zaehler'>"+changeToTables(before(sTerm,":"))+"</td></tr><tr><td>"+changeToTables(after(sTerm,":"))+"</td></tr></table></td><td>";
   } else {
    if (getPosOhneKlammer(sTerm,"*")>-1) {
     if (sTerm.charAt(getPosOhneKlammer(sTerm,"*")+1)=="(") {
      result=changeToTables(before(sTerm,"*"))+"&middot; ("+changeToTables(after(sTerm,"*"))+")";
     } else {
      result=changeToTables(before(sTerm,"*"))+"&middot;"+changeToTables(after(sTerm,"*"));
     }
    } else {
     if (sTerm[0]=="(" && sTerm[sTerm.length-1]==")") {
      if (isNumber(sTerm) || isVariable(sTerm) || isTerm(sTerm)) {
       result = sTerm;
      } else {
       result=changeToTables(sTerm.substring(1,sTerm.length-1));
      }
     } else {
      if (getPosOhneKlammer(sTerm,"^")>-1) result=changeToTables(before(sTerm,"^"))+"<sup>"+changeToTables(after(sTerm,"^"))+"</sup>";
      else {
       document.write("Keine weiter Zerlegung moglich, da sTerm[0]="+sTerm[0]+" und  && sTerm["+eval(sTerm.length-1)+"]="+sTerm[sTerm.length-1]+"<br>");
       result = sTerm;
      }
     }
    }
   }
  }
 }
 return result;
}

function isNumber(sTerm) {
 var aResult = new Array(); aResult[0]="noTerm";
 var bResult = false;
 aResult = sTerm.match(/(-*)\d+/g); // Was ist mit 2-3b
 if (aResult!=null) {
  if (aResult.length==1) {bResult = true; document.write(sTerm+" ist Zahl.<br>");}
 }
 return bResult;
}

function isVariable(sTerm) {
 var aResult = new Array();  aResult[0]="noTerm";
 var bResult = false;
 aResult = sTerm.match(/(-*)[abcmn]+/g);
 if (aResult!=null) {
  if (aResult.length==1) {bResult = true; document.write(sTerm+" ist Variable.<br>");}
 }
 return bResult;
}

function isTerm(sTerm) {
 var aResult = new Array(); aResult[0]="noTerm";
 var bResult = false;
 aResult = sTerm.match(/(-*)[abcmn]^(-*\d+)/g);
 if (aResult!=null) {
  if (aResult.length==1 && aResult[0]==sTerm) {
   bResult = true;
   document.write(sTerm+" ist Term: "+aResult+"<br>");
  } else {
   document.write(sTerm+" ist kein Term.<br>");
  }
 } else {
  document.write(sTerm+" ist kein Term.<br>");
 }
 return bResult;
}

Danke, wenn ihr mir irgendwie auf irgendeine Weise weiterhelfen könnt.

  1. Hallo,

    was machen denn die Rahmen da, ohne die sähe es doch gut aus, oder?

    //border:2px solid #ff0000;

    kommentieren im CSS mit /* kommentar  */

    Gruß, Frankx

  2. Hi,

    ich möchte gerne Polynome in HTML so darstellen, dass möglichst jeder Browser sie darstellen kann. MathML kommt daher nicht in Frage. Bilder kommen auch nicht in Frage, da die Polynome per Zufall generiert werden.

    Vielleicht ist MediaWiki, die Software von Wikipedia was für dich. Die wandelt in TeX eingegebene Formeln on-the-fly in Grafiken um, bspw. hier.

    Homepage von MediaWiki
    TeX-Bearbeitungshilfe

    HTH

    Margin-Auto