Wolfgang Pavel |
PHP-Formeleditorzur Herstellung mathematischer Formeln in HTML |
Zum Herunterladen:
wpformeleditor.zip ( © Zum Copyright siehe Startseite. )
Diese ZIP-Datei enthält den Formeleditor wpformel.php und diese Anleitung wpformeleditor.html in reiner, bereits aus PHP nach HTML übersetzter Form, sodass für die heruntergeladene Anleitung das Skript wpformel.php nicht nötig ist (aber natürlich zum Herstellen eigener Formelseiten).
Wie es zum Beispiel aussehen kann, zeigt meine
Integral-Formelsammlung. Dort können Sie sich auch - zum besseren Verstehen der Syntax - den PHP-Quellcode jeder Formel anzeigen lassen. Und auch kopieren/einfügen und damit experimentieren.
Üblicherweise werden mathematische Formeln auf Internetseiten als Grafiken (meist GIF oder PNG) angezeigt. Damit lassen sie sich aber schwer in der Größe verändern: Wenn man z.B. im Browser eine andere Schriftgröße einstellt, bleiben die Formeln entweder unverändert und passen dann nicht mehr zur sonstigen Schrift; oder die Formelgrafiken werden angepasst, was wegen ihrer Pixeleigenschaft unschön wirkt und bis zur Unleserlichkeit gehen kann.
Abhilfe würden Vektorgrafiken schaffen, die aber heutzutage von den Browsern nicht genügend unterstützt werden. Oder man benutzt spezielle Dateiformate, für die man dann aber »Plugins« oder »Addons« benötigt
Hier wird nun ein anderer Weg eingeschlagen: Die Formeln werden in HTML dargestellt; die eigentlich mühsame Erzeugung des HTML-Codes wird mit Hilfe eines PHP-Skripts erledigt, in dem die Formeln in einer auch in Textverarbeitungen ähnlichen Form eingegeben werden.
Vorteil ist, dass die Formeln nicht fertige Bilder fester Größe sind, sondern vom Browser wie normale Schrift erst bei der Anzeige erzeugt werden und deshalb ohne Verluste in jeder Schriftgröße dargestellt werden. Alle Größenangaben in den Formeln sind in em-Einheiten gemacht, sodass eine Einstellung der Schriftgröße über den Browser unproblematisch ist. Für den Ersteller der Internetseite ist von Vorteil, dass er mit normalen HTML-Mitteln (z.B. CSS-Angabe font-size) die Größe einer Formel festlegen kann. Würde die Formel als Grafik vorliegen, müsste entweder eine neue Grafik in anderer Größe erzeugt werden, oder beim Anwenden von width- und height-Angaben Verluste in der Darstellungsqualität in Kauf genommen werden.
Nachteil ist, dass die Qualität des Formelschriftbilds von den verwendeten Schriftzeichen abhängt, insbesondere den für die mathematischen Symbole. Hier gibt es große Qualitätsunterschiede bei den Browsern und Betriebssystemen. Ältere Internet Explorer z.B. zeigen etliche mathematische Sonderzeichen überhaupt nicht an.
Sicher sehen Formelseiten in TEX oder dem Formeleditor einer guten Textverarbeitung auf Papier oder als Dokument viel bessser aus. Aber sie sind eben nicht in einer HTML-Seite im Browser zu sehen, sondern müssen mit ihrem Dokument heruntergeladen und einem eigenen Programm angezeigt werden.
Das Hauptproblem bei der Darstellung mathematischer Formeln sind die Schrifthöhenverschiebungen (Hoch- und Tiefstellungen). Ich versuchte das erst mit CSS-Möglichkeiten, insbesondere Positionierung. Dabei kam ich an den Browserunterschieden bei der Behandlung verschachtelter Positionierungsangaben in Schwierigkeiten. Da ich keine Lust zu den traurigen Browserweichen hatte, griff ich zu der "guten alten" Methode der blinden Tabellen (siehe auch Punkt 8.2). Entsprechend urig sieht der HTML-Code aus. Das damit erzeugte Formelschriftbild ist aber doch recht passabel. Seit der Version vom 9.5.2010 werden die unterschiedlichen Maße der Schriftzeichen näherungsweise berücksichtigt.
Serverseitig muss PHP5 unterstützt sein. Die HTML-Seite, die Formeln anzeigen soll, sollte XHTML 1.0 (Strict oder Transitional) sein. Weitere Zusätze sind weder auf dem Server noch beim Client notwendig.
Nur neuere Browser stellen alle Sonderzeichen korrekt dar. Insbesondere ältere Internet Explorer versagen z.B bei logischen Operatoren UND (∧ - sieht so aus: ∧ ) und OR (∨ - sieht so aus: ∨ ) oder bei »enthalten in« (∈ sieht so aus: ∈ ). Wenn Sie damit rechnen, dass Besucher Ihrer Seite noch ältere Browser verwenden, sollten Sie sie vielleicht darauf aufmerksam machen und die Verwendung eines anderen oder neueren Browsers empfehlen.
Wichtig für ein gutes Schriftbild ist die verwendete Schrift. Die besten Ergebnisse für die erzeugten Formeln erzielt man mit der üblichen TrueType-Schrift »Times New Roman«. Diese Schrift wird deshalb seit der Version vom 5.9.2010 automatisch für die Formeln vorgegeben. Außerhalb der Formeln können jetzt durchaus andere Schriften eingestellt sein. Unter Linux muss diese Schrift evtl. erst installiert werden. Wenn gewünscht, kann die Schrift für die Formel mit den Eigenschaften (siehe Punkt 4) geändert werden.
Man kopiere das Skript »wpformel.php« (ggf. nach Entpacken der heruntergeladenen »wpformeleditor.zip«) auf den Server, am einfachsten in dasselbe Verzeichnis, in dem auch die Formel anzeigende HTML-Seite liegt. Hat man mehrere Formel anzeigende HTML-Seiten, kann es (derzeit) Sinn machen, mehrere Kopien des Skripts anzulegen, um evtl. unterschiedliche Konfigurationsdetails für die verschiedenen HTML-Seiten einzustellen. Die Konfigurationsdetails werden derzeit noch in dem Skript selbst vorgenommen. Der Name »wpformel.php« ist nur für den Include-Befehl (siehe nächsten Punkt 2.2.) wichtig, ansonsten beliebig.
Hierzu dient möglichst am Anfang der HTML-Seite, am besten schon im <head>-</head>-Teil, der PHP-Befehl: include("wpformel.php"). Liegt das Skript nicht in demselben Verzeichnis wie die HTML-Seite, ist der Pfad hinzuzufügen: include("pfad / wpformel.php"). Man beachte, dass ein absoluter Pfad in diesem Fall ab Root des Servers gilt. Hat man die Skriptdatei umbenannt, ist natürlich der geänderte Name anzugeben.
Sie können auch die in 1.4. erwähnte Standardschrift festlegen, z.B. durch ein CSS: font-family:'Times New Roman' .
In der HTML-Datei steht an der Stelle, an der eine Formel angezeigt werden soll, der PHP-Befehl wpformel( ' formel ' ), wobei formel nach den im folgenden angegebenen Regeln zu schreiben ist. Man verwende die einfachen Anführungszeichen ' und nicht " . (Wegen der Verwendung von $ als Steuerzeichen in Formeln (siehe dort) ist das wichtig. Bei Verwendung der doppelten Anführungszeichen " würde $ von PHP als Variablenkennung interpretiert werden; man müsste dies mit \$ ausschalten.)
Derzeit kommt eine Formel immer in eine eigene Zeile. Soll die Formel innerhalb eines Textes stehen, schreibe man den Text davor und dahinter in die Formel selbst als Text (siehe Syntax).
Mit einem zweiten Parameter kann man der Formel einige Eigenschaften (Lage, Farbe, u.a.) mitgeben: wpformel( ' formel ' , ' eigenschaften ' ). Die Syntax für diesen Parameter steht in Punkt 4.
Testzwecken dient der Aufruf wpformel( ' formel ' , parser , struktur ) oder wpformel( ' formel ' , ' eigenschaften ' , parser , struktur ), wobei parser und/oder struktur 1 (oder true) oder 0 (oder false) sein können. Bei Angabe von 1 (true) werden die erkannten Formelelemente der Reihe nach bzw. in der erkannten Formelstruktur ausgegeben. Dies kann dazu dienen, die Ursache zu finden, wenn die Anzeige der Formel nicht so ist, wie gewünscht.
Der Aufruf liefert auch ein Objekt als Rückgabewert, mit den Eigenschaften breite und hoehe: $irgendwas = wpformel( ... ); Dann enthalten $irgendwas.breite und $irgendwas.hoehe die Breite und Höhe der Formel in em-Einheiten der Umgebung. Dabei ist aber nur die Höhe genau; die Breite ist ein sehr grober Schätzwert.
Jede Folge von Schriftzeichen, die nicht eine im folgenden beschriebene Sonderbedeutung haben, bildet ein geschlossenes Element und entspricht dem Aussehen einer Variablen - die mathematische Bedeutung von Variablen ist hier irrelevant. Dazu gehören nicht nur die im normalen Zeichensatz vorhandenen Schriftzeichen, sondern auch Sonderzeichen, die als HTML-Entity dargestellt sind. Auf eine eigene Kodierung solcher Zeichen, z.B. aller griechischer Buchstaben, habe ich verzichtet. Die HTML-Kodierung dieser Zeichen findet man in vielen Quellen (z.B: http://de.selfhtml.org im Kapitel »HTML/XHTML - HTML-Referenz - HTML-Zeichenreferenz«).
Lateinische Buchstaben (a bis z und A bis Z), ausgenommen Namen von Standardfunktionen, werden kursiv dargestellt, wie es meistens mit Variablen gemacht wird.
Zwischenraum oder eine Folge von Zwischenräumen werden kontextabhängig behandelt. Sie haben meist ähnlich wie Operatoren trennende Wirkung, was aber oft optisch gar nicht zu bemerken ist; gelegentlich, z.B. bei Hoch- und Tiefstellungen, werden Zwischenräume ignoriert. Wo die spezielle Behandlung der Zwischenräume stört, setze man ein \ vor den Zwischenraum, um ihn zu einem normalen Textzeichen zu machen (siehe nächsten Absatz).
| wpformel('...') | Anzeige | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| a1B C |
| ||||||||||||
| U-sin(x+y) |
|
Zeichen, die normalerweise eine Sonderbedeutung haben, können als normale Schriftzeichen dargestellt werden, indem sie mit \ maskiert werden.
| wpformel('...') | Anzeige | |
|---|---|---|
| α |
| |
| \α |
|
Texte werden zwischen die speziellen Anführungszeichen ´text´ oder `text` gesetzt; zwischen beiden Varianten ist kein Unterschied. Texte werden unverändert an den Browser gegeben, die Sonderbedeutung des Formeleditors ist für alle Zeichen aufgehoben, auch \ hat keine maskierende Wirkung. Somit wirkt der Text als reiner HTML-Text einschließlich HTML-Tags.
Zwischenräume in Text werden original wiedergegeben; die HTML-Wirkung, dass mehrere Zwischenräume normalerweise wie nur ein Zwischenraum ausgeben werden, bleibt dabei erhalten. Man verwende gegebenenfalls, wie in HTML üblich, .
| wpformel('...') | Anzeige | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ´<b>ABC\α</b>def ´ |
| |||||||||||||
| `So wie <i>hier</i>:` R=(u/i) `sieht eine Formel aus` |
|
Als Operatoren werden alle Zeichen (einschließlich HTML-Entities) behandelt, die in der Konfiguration als solche definiert sind. Derzeit steht dies am Anfang des Skripts wpformel.php in der Anweisung define("Operator",...) (im Einzelnen siehe Beschreibung zur Konfiguration.)
Der Operator * in der Formel wird automatisch als · angezeigt; der Operator - automatisch als − .
Operatoren können zusätzlich für die Verwendung als unäre Operatoren in der Konfiguration definiert werden; Anweisung define("Unaer",...). Das entbindet von der Pflicht des linken Operanden.
In Einzelfällen ist es aber bequemer, einen der geforderten zwei Operanden durch einen leeren Ausdruck oder Zwischenraum zu ersetzen.
| wpformel('...') | Anzeige | ||||||
|---|---|---|---|---|---|---|---|
| a-b*c |
| ||||||
| -c+1 |
| ||||||
| =c+1 |
| ||||||
| {}=c+1 |
|
| _ | Tiefstellung, z.B. Index |
| ^ | Hochstellung, z.B. Potenz |
| / | Bruch |
| # | Reihe, z.B. Vektor oder »über« |
| __ | Unterschreibung, z.B. Summen- oder Integralgrenzen |
| ^^ | Überschreibung, dto. |
| ## | Spalten, z.B. in Matrizen |
Mehrere dieser Operationen hintereinander werden meistens rechtsrekursiv ausgeführt; mathematische Vorrangregeln werden nicht beachtet. Durch Klammern (ggf. unsichtbare Klammern) kann jedoch jede beliebige Zusammenfassung erreicht werden (siehe dort).
Gesondert behandelt werden: eine Tief- und Hochstellung hintereinander (in dieser Reihenfolge), sowie eine Unter- und Überschreibung hintereinander (in beliebiger Reihenfolge): beide Stellungen werden demselben Ausdruck angehängt
Beendet wird eine Positionsverschiebung durch nicht-unäre Operanden, durch weitere Operanden, durch Zwischenraum. Wenn letzteres nicht erwünscht ist, maskiere man den Zwischenraum mit \ oder verwende unsichtbare Klammern.
Positionsverändernde Operatoren sind stärker gebunden als unäre. Gegebenenfalls sind unsichtbare Klammern zu setzen.
| wpformel('...') | Anzeige | Bemerkung | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| x_i |
| |||||||||||||||
| A^2 |
| |||||||||||||||
| U_k^3 |
| |||||||||||||||
| Adam/Eva |
| |||||||||||||||
| Oben#Unten |
| |||||||||||||||
| x^a-1 |
| Operator Minus trennt | ||||||||||||||
| x^-a |
| Unäres Minus trennt nicht | ||||||||||||||
| x^(a-1) |
| Klammern binden | ||||||||||||||
| lim__x→1 f(x) |
| Man beachte trennenden Zwischenraum zwischen 1 und f | ||||||||||||||
| lim__x\ →\ 1 f(x) |
| Die verbreiternden Zwischenräume um den Pfeil trennen nicht | ||||||||||||||
| ∫__1^^∞ e^-x dx |
| Man beachte den trennenden Zwischenraum zwischen ∞ und e | ||||||||||||||
| v^^´→´ |
| Zur Darstellung von Vektoren: Das Pfeilzeichen ist als Text anzugeben, das es sonst als hier sinnloser Operator interpretiert wird. | ||||||||||||||
| (x#y) |
| |||||||||||||||
| 1#2#3##4#5#6##7#8#9 |
| |||||||||||||||
| -x/y |
| Das unäre Minus steht vor dem Bruch: die wohl üblichere Schreibweise | ||||||||||||||
| {-x}/y} |
| wenn man das Minus beim Zähler haben möchte (mathematisch hier irrelevant) |
Jedes Schriftzeichen (einschließlich HTML-Entities), ausgenommen Buchstaben und Ziffern, kann als Operator gesetzt werden, indem ihm ein $ vorangestellt wird. Dies gilt nur jeweils für diese eine Stelle; an anderer Stelle, ohne $, ist das Zeichen weiterhin ein gewöhnliches Schriftzeichen. Umgekehrt kann ein als Operator konfiguriertes Zeichen durch Voransetzen von \ zum normalen Schriftzeichen gemacht werden.
| wpformel('...') | Anzeige | Bemerkung | ||||||
|---|---|---|---|---|---|---|---|---|
| x^a?1 |
| Fragezeichen ist normales Schriftzeichen | ||||||
| x^a$?1 |
| Fragezeichen ist hier Operator | ||||||
| x^a=1 |
| Gleichzeichen ist als Operator konfiguriert | ||||||
| x^a\=1 |
| Gleichzeichen ist hier normales Schriftzeichen |
Funktionen (Standardfunktionen) sind in der Konfiguration als solche definiert. Derzeit steht dies am Anfang des Skripts wpformel.php in der Anweisung define("Funktion",...) (im Einzelnen siehe Beschreibung zur Konfiguration.)
Eine Funktion wird mit dem ihr folgenden Operanden gebunden, auch wenn diesem Zwischenraum oder ein unärer Operator vorangeht. Dies gilt auch für Potenzen oder Indices am Funktionsnamen. Besteht das Funktionsargument aus weiteren Operatoren und Operanden, müssen Klammern gesetzt werden, ggf. unsichtbare.
| wpformel('...') | Anzeige | Bemerkung | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| e^sin x |
| Der Zwischenraum trennt nicht | ||||||||||||
| e^sin^2 x |
| |||||||||||||
| e^sin -π/2 |
| Unäres Minus trennt nicht | ||||||||||||
| e^sin x-1 |
| Operator Minus trennt | ||||||||||||
| e^sin (x-1) |
| Klammern binden |
Jede Zeichenfolge (siehe 3.1) die mit einem lateinischen Buchstaben (klein oder groß)beginnt kann einmalig, ohne sie in die Konfiguration aufzunehmen, zur Funktion gemacht werden, indem ihr ein $ vorangestellt wird.
| wpformel('...') | Anzeige | Bemerkung | ||||||
|---|---|---|---|---|---|---|---|---|
| e^fkt x |
| fkt ist normale Zeichenfolge | ||||||
| e^$fkt x |
| fkt ist hier Funktion |
Positionsverändernde Operatoren sind stärker gebunden als Funktionen an ihren Operanden. Gegebenenfalls sind unsichtbare Klammern zu setzen. (Hier fiel es mir schwer, mich zwischen den beiden wohl gleich häufigen Varianten zu entscheiden.)
| wpformel('...') | Anzeige | Bemerkung | ||||||
|---|---|---|---|---|---|---|---|---|
| sin x/2 |
| Zähler/Nenner sind gemeinsam Operand vom Sinus. | ||||||
| {sin x}/2 |
| Der Nenner ist abgetrennt. |
Anpasser sind als solche in der Konfiguration definierte Zeichen (Anweisung define("Anpasser",...) . Anpasser sind ähnlich wie Funktionen an den folgenden Operanden gebunden und passen sich in der Höhe an den Operanden an.
Jedes andere Schriftzeichen kann zum Anpasser gemacht werden, indem ihm die Kombination $ziffer vorangestellt wird. Die Ziffer darf 1 bis 4 sein und bestimmt die Art der Annpassung:
| wpformel('...') | Anzeige | Bemerkung | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| x=$1∫A^x/2*dx |
|
Integralzeichen als einfaches Schriftzeichen | |||||||||||||
| x=$2∫A^x/2*dx |
|
Formel (an x= zu erkennen) und Integralausdruck haben dieselbe Basislinie | |||||||||||||
| x=$3∫A^x/2*dx |
|
Der Integralausdruck steht vertikal mittig zur Formel (x=); das dx ist durch Malzeichen vom Integral getrennt und steht wieder auf der Basislinie der Formel | |||||||||||||
| x=$3∫{A^x/2*dx} |
|
wie zuvor; das dx ist durch unsichtbare Klammer in den Integralausdruck eingebunden. | |||||||||||||
| x=$4∫A^x/2*dx |
|
Das Integralzeichen ist so groß, das Zeichen und Ausdruck mittig zur Formel stehen. | |||||||||||||
| x=∫A^x/2*dx |
|
Ohne Angabe wird die in der Konfiguration voreingestellt Anpassung genommen, hier 2 |
Wurzeln werden in der Form grad§radikand geschrieben, wobei § nur eine Abkürzung für √ ist; oder man verwendet das entsprechende Makro (siehe dort). Der Grad kann weggelassen werden. Der Grad ist üblicherweise ein einzelnes Schriftzeichen, meist Ziffer; in diesem Fall wird der Grad in der üblichen Form an das Wurzelzeichen herangerückt. Auch für die Wurzel gibt es die im vorigen Abschnitt beschrieben unterschiedlichen Angepassungen.
| wpformel('...') | Anzeige | Bemerkung | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 3§x |
| |||||||||||||
| §e^x |
| |||||||||||||
| (n+1)§e^x |
| Grad besteht aus mehr als einem Schriftzeichen | ||||||||||||
| 3 §e^x |
| Zwischenraum zwischen 3 und Wurzel trennt | ||||||||||||
| x=$2§A^x/2*dx |
| |||||||||||||
| x=$3§A^x/2*dx |
|
Einige häufig gebrauchte mathematische Zeichen werden aus zwei Schriftzeichen zusammengesetzt; sie erscheinen in der Ansicht als ein Sonderzeichen. Das erspart dafür die Verwendung von HTML-Entities. Sie sind in der Konfiguration definiert (Anweisung define("Doppel",...) .Derzeit sind dies:
| +- | ± |
| <= oder =< | ≤ |
| >= oder => | ≥ |
| <> | ≠ |
Klammern sind in der Konfiguration festgelegt (Anweisung define("Klammer",...)). Festgelegt sind zu jeder öffnenden Klammer die zugehörige schließende Klammer und eine Voreinstellung für die Anpassung wie bei Anpassern.
Wie bei Anpassern können auch für Klammern mit vorangestelltem $ziffer die Art der Anpassung eingestellt werden; die Bedeutung der Ziffern ist dieselbe wie bei Anpassern. Es muss nur eine der beiden Klammern angepasst werden, die andere erhält automatisch dieselbe Anpassung. (Werden fehlerhafterweise für öffende und schließende Klammer unterschiedliche Anpassungen angegeben, wird die der öffnenden Klammer verwendet).
Zusätzlich gibt es bei Klammern die Möglichkeit, sie durch Voranstellen von $0 unsichtbar zu machen. Diese Möglichkeit wird getrennt für die öffnende und schließende Klammer behandelt. Standardmäßig is {} als unsichtbar konfiguiert.
| wpformel('...') | Anzeige | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| x=a+b/c+d |
| ||||||||||||||||||||||||||
| x=(a+b)/(c+d) |
| ||||||||||||||||||||||||||
| x={a+b}/{c+d} |
| ||||||||||||||||||||||||||
| x=(A^x/2) |
| ||||||||||||||||||||||||||
| x=$2(A^x/2) |
| ||||||||||||||||||||||||||
| f(x)=$3{{1 ´für´ x>=0}#{0 ´für´ x<0}$0} |
|
Häufig verwendete, kompliziertere Ausdrücke können als Makros geschrieben werden.
Der Makroaufruf wird zwischen @< und >@ eingeschlossen. Am Anfang des Aufrufs steht dann der Makroname, durch die Definition bestimmt. Es können Parameter folgen, deren Bedeutung durch die Definition bestimmt sind. Die Parameter sind vom Makronamen und untereinander durch @ getrennt. Parameter dürfen, wenn in der Definition so vorgesehen, leer sein (...@@...) oder, wenn am Ende, weggelassen werden. Überzählige Parameter werden ignoriert.
Derzeit stehen zwei Makros zur Verfügung:
Weitere Makros können definiert werden.
| wpformel('...') | Anzeige | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @<wurzel@x-1@3>@ |
| |||||||||||||
| @<integral@f(u)*du@0@x>@ |
|
Dies geschieht derzeit nur direkt im Skript wpformel.php .
Es wird eine PHP-Funktion mit dem Namen mk_makroname und einer entsprechenden Anzahl von Parametern definiert. Die Funktion gibt dann als Ergebnis einen String in der hier beschriebenen Formel-Syntax zurück. Auf das Vorhandensein von Parametern ist mit (is_string($parameter)) abzufragen, um den Wert 0 für einen Parameter nicht als fehlend zu interpretieren.
Verschachtelte Verwendung von Makros (Makros in Makros) ist erlaubt.
Einige Eigenschaften, zum Beispiel Schriftgröße und Farben können für die ganze Formel oder teilweise für einzelne Formelteile bestimmt werden.
Dazu dient der schon in Punkt 2.3 erwähnte zweite Parameter im Formelaufruf: wpformel( ' formel ' , ' eigenschaften ' )
Der Parameter eigenschaften besteht aus einer oder mehreren durch Semikolon getrennten Eigenschaftsangaben.
Jede Eigenschaftsangabe hat die Form art:wert.
Beispiel: wpformel( 'a^2+b^2=c^2' , 'sf:red;hf:#ee99ee;sg:150';lg:m' ) : Die Formel wird in roter Schrift auf violettem Grund um die Hälfte größer als die Umgebung mittig ausgerichtet dargestellt:
|
Folgende Eigenschaften können für die ganze Formel angegeben werden:
| sn:... | Schriftname | stellt die Formel in der angegebenen Schrift dar |
| lg:... | l, m oder r | richtet die Formel horizontal links, mittig oder rechts aus |
| sf:... | CSS-Farbwert | Farbe der Schriftzeichen |
| hf:... | CSS-Farbwert | Hintergrundfarbe für die ganze Formel |
| fs:... | 0 oder 1 | Formel in Fettschrift, wenn 1; wirkt nur auf Schriftzeichen, nicht auf Bruchstriche usw. |
| sg:... | natürliche Zahl | Änderung der Schriftzeichengröße gegenüber der normalen Anzeige in Prozent (100=unverändert) ; wirkt auch auf Bruchstriche usw. |
| az:... | 1 oder 0 | Autozoom: Bei eingeschaltetem Autozoom (1) wird die Formel soweit vergrößert, dass die kleinsten in der Formel vorkommenden Schriftzeichen die minimale Schriftgröße (Konfigurationskonstante KfgSmn) nicht unterschreiten. |
| va:... | Dezimalzahl oder HTML-Maßangabe (px,em) | Vertikaler Abstand über und unter der Formel; wird keine Maßeinheit angegeben, wird automatisch em angenommen. |
Für Eigenschaften, die nicht angegeben sind; werden globale Voreinstellungen wirksam.
Um einzelen Formelteile abweichend von der übrigen Formel darzustellen, stellt man ihnen ähnlich den Anpassoperatoren eine Klausel mit folgender Syntax voran: $< eigenschaften > . Die Eigenschaften bestehen wie die globalen Eigenschaften aus einer oder mehreren durch Semikolon getrennten Angaben der Form art:wert . Die Eigenschaften wirken wie eine Funktion auf den unmittelbar folgenden Formelteil; gegebenfalls ist mit unsichtbaren Klammern ein größerer Bereich zu definieren.
Möglich sind (derzeit) aber nur folgende Angaben:
| sf:... | CSS-Farbwert | Farbe der Schriftzeichen |
| hf:... | CSS-Farbwert | Hintergrundfarbe des Formelteils |
| sg:... | natürliche Zahl | Änderung der Schriftzeichengröße gegenüber der normalen Anzeige in Prozent (100=unverändert) ; wirkt auch auf Bruchstriche usw. |
| wpformel('...') | Anzeige | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| A*$<sf:red;hf:yellow>sin x+a/u |
| |||||||||||||
| A*$<sf:red;hf:yellow>{sin x+a/u} |
| |||||||||||||
| $<sf:red;hf:yellow>A^sin x+a/u |
|
Will man für mehrere aufeinanderfolgende, vielleicht alle Formeln einer Seite Eigenschaften auf denselben vom Standard abweichenden Wert setzen, kann man dies tun, indem man die Variable $WPF_EIGENSCHAFTEN auf den Eigenschaftenstring setzt, wie er auch in dem wpformel-Aufruf verwendet wird.
Beispiel: $WPF_EIGENSCHAFTEN='lg:m;sg:120'; setzt alle folgenden Formeln horizontal mittig und etwas größer als die Umgebung.
Nicht angegebene Eigenschaften bleiben auf dem Standardwert, oder ggf. auf einem vorher in $WPF_EIGENSCHAFTEN eingestellten Wert. Die in einem wpformel-Aufruf angegebenen Eigenschaften überschreiben die globalen für diese eine Formel. Die in einer Formel angegebenen Teileigenschaften überschreiben alle umgebenenden Eigenschaften für diesen einen Formelteil.
Wenn der Formeleditor Fehler gegen die hier beschriebene Syntax feststellen kann, werden solche Fehler in Rotschrift in der ausgegebenen Formel angezeigt. Wenn notwendige Zeichen fehlen, wird dies durch ? dargestellt; andernfalls werden die fehlerverursachenden Zeichen selbst rot dargestellt.
Die Meldung »Strukturfehler« zeigt mindestens eine Schwäche oder sogar einen Fehler im Skript selbst an. In diesem Fall wäre ich für die Zusendung der fehlerverursachenden Formel per Mail dankbar.
Die Konfiguration von Voreinstellungen für etliche Details im Formeleditor geschieht derzeit am Anfang des Skripts »wpformel.php« . Geplant ist, dies später über eine gesonderte Konfigurationsdatei und Aufrufparameter zu machen.
define("Operator","Operatorenliste")
Die Operatorenliste enthält, durch Zwischenraum getrennt, alle Schriftzeichen, einschließlich HTML-Entities, die automatisch als Operatoren interpretiert werden sollen.
define("Klammer","Klammernliste")
Die Klammernliste enthält, durch Zwischenraum getrennt, für jede Klammer drei Angaben durch Komma getrennt: das Zeichen für Klammer-Auf, das Zeichen für Klammer-Zu und die Voreinstellung für die Größenanpassung. Soll die Klammer voreingestellt unsichtbar sein, ist die Voreinstellung 0 anzugeben.
define("Doppel","Doppelliste")
Einige mathematische Zeichen dürfen durch zwei bestimmte aufeinanderfolgende Schriftzeichen dargestellt werden; das erspart die Angabe einer HTML-Entity. Die Doppelliste enthält, durch Zwischenraum getrennt, für jede solche Doppeldarstellung zwei Angaben durch Komma getrennt: das Doppelzeichen und das entsprechende HTML-Entity-Zeichen. Die hier definierten Doppelzeichen sind automatisch auch Operatoren.
define("Unaer","Operatorenliste")
Operatoren, die unär behandelt werden sollen, stehen in der Operatorenliste durch Zwischenraum getrennt.
define("Funktion","Funktionenliste")
Namen von Standardfunktionen, die wie in 3.3.4. behandelt werden sollen, stehen in der Funktionenliste durch Zwischenraum getrennt.
define("Anpasser","Anpasserliste")
Jedes Zeichen, das wie in 3.3.5. als Anpasser behandelt werden soll zusammen (nach Komma) mit der voreingestellten Anpassungsziffer.
Für die vertikale Ausrichtung sind Größen für Schriftzeichen festegelegt, die bei "üblichen" Schriften, insbesondere der Times New Roman, annähernd passen. Für die meisten Schriftzeichen werden 3 vertikale Bereiche berücksichtigt: ein Kernbereich, der von allen kleinen Kleinbuchstaben (a,c,e,...) benutzt wird; ein Oberlängenbereich, der zusätzlich von einigen Kleinbuchstaben und allen Großbuchstaben; benutzt wird; ein Unterlängenbereich für einige Klein- und griechische Buchstaben (j,y,...). Drei Listen enthalten systematisierte Zeichen: Zeichen_klein belegen nur den Kernbereich; Zeichen_unter belegen Kern- und Unterbereich; Zeichen_weit belegen alle drei Bereiche.
Alle Operatoren, soweit nicht in den Listen enthalten, werden je nach Umgebung in zwei Größen ausgegeben: innerhalb von Zeichen, die nur den Kernbereich belegen, verwenden auch Operatoren nur diesen; sonst belegen Operatoren den Kern- und Oberlängenbereich. Die Ausnahmeliste Zeichen_std enthält diejenigen Operatoren, die immer standardmäßig (Kern- und Oberlängenbereich) behandelt werden. Die Liste Zeichen_einzeln listet Zeichen mit individuellen Maßen auf. Alle nicht erfassten Zeichen belegen Kern- und Oberlängenbereich.
define("Bezeichnung",Wert).
Alle Werte sind Dezimalzahlen. Schriftgrößen sind em-Einheiten. Nicht alle Werte sind sinnvoll: z.B. kann man mit einigen der folgenden Faktoren auch vergrößern (z.B. Exponent gegenüber Basis); da das nicht sinnvoll ist, ist dies in der folgenden Beschreibung auch nicht mehr erwähnt.
| KfgZmt | Schriftzeichen: oberster Bereich, nicht verwendet. |
| KfgZmo | Schriftzeichen: Oberlängenbereich |
| KfgZmm | Schriftzeichen: mittlerer, Kernbereich |
| KfgZmu | Schriftzeichen: Unterlängenbereich |
| KfgZgh | Schriftzeichen: Gesamthöhe (Summe der Bereiche) |
| KfgKoh | Schriftzeichen: Oberhöe für Klammern |
| KfgKuh | Schriftzeichen: Unterhöhe für Klammern |
| KfgZbr | Schriftzeichen: Breite (Durchschnittswert) |
| KfgZwr | Zwischenraumbreite: ein ganzer Zwischenraum ist in Formeln meist zu groß; deshalb hier die Möglichkeit, die Größe von Zwischenräumen zu bestimmen. Für größere Abstände schreibe man einfach mehrere Zwischenräume hintereinander. |
| KfgOab | Mindestabstand vor und nach Operatoren; es ist die Anzahl Zwischenräume anzugeben, nicht eine Schriftgröße in em! (Die Größe von Zwischenräumen wird - siehe oben - durch KfgZwr bestimmt.) Ganz ohne Abstand wirken Operatoren an die benachbarten Operanden angeklebt. Hier kann ein Abstand angegeben werden, der mindestens eingehalten wird. Mit zusätzlichen Zwischenräumen in der Formel selbst kann weiterer Abstand erzeugt werden. |
| KfgVop | Vertikale Verschiebung von Operatoren beim Wechsel der beiden möglichen Größen |
| KfgBst | Bruchstrichdicke: die umgebende Schriftgröße mit diesem Faktor multipliziert ist die Dicke des Bruchstrichs. |
| KfgVpd | Vertiale Abstände übereinanderliegender Elemente (Hochstellung, Tiefstellung, usw.) |
| KfgSmn | Minimale Schriftgröße: Mehrere verschachtelte Hoch- , Tiefstellungen, Brüche usw. verkleinern die Schriftgröße der innersten Elemente immer mehr; das kann zur Unleserlichkeit führen. Eine angegebene minimale Schriftgröße (in em) wird nicht unterschritten. (Siehe aber auch "Autozoom", Punkt 4) |
| KfgSmx | Maximale Schriftgröße: Bei durch Verkettung und Verschachtelung sehr hoch geratenen Ausdrücken können Klammern oder angepasste Operatoren in gleicher Größe unschön wirken. Eine angegebene maximale Schriftgröße wird nicht überschritten. Eine Angabe von 0 bedeutet hier eine unbeschränkte Schriftgröße. |
| KfgBsf | Schriftgrößenfaktor in Brüchen: Zähler und Nenner werden um diesen Faktor kleiner als der umgebende Ausdruck dargestellt. Wünscht man keine Verkleinerung von Zähler und Nenner, setze man KfgBsf auf 1.00 . |
| KfgHsf | Schriftgrößenfaktor für Hoch- und Tiefgestelltes: Hoch- und Tiefstellungen werden um diesen Faktor kleiner als der Basisausdruck dargestellt. |
| KfgKsf | Um diesen Faktor werden Klammern und Anpasser größer dargestellt als der unter ihnen enthaltene Ausdruck. |
| KfgWsf | Um diesen Faktor wird ein Wurzelzeichen größer dargestellt als der unter ihm stehende Ausdruck. |
| KfgWgf | Schriftgrößenfaktor für Wurzelgrad: In Wurzeln wird die Gradangabe, wenn vorhanden um diesen Faktor kleiner als der Radikand dargestellt. |
| KfgWgh | Vertkaler Abstand im Wurzelzeichen von Oberkante zur linken Spitze (Höehe für Grad) |
| KfgWpd | Horizontaler Abstand des Wurzelgrads vom Wurzelzeichen |
| KfgWst | Strichdicke für Wurzelzeichen |
| KfgGsf | Schriftgrößenfaktor für Unter- und Überschreibungen (z.B. Grenzen für Summe,Integral,Produkt): Unter- und Überschreibungen werden um diesen Faktor kleiner dargestellt. |
Demnächst vorgesehen:
Um die Schriftzeichen in der Formel präzise bei Hoch- und Tiefstellungen, Brüchen, usw. positionieren zu können, müsste man die genauen Maße eines jeden Schriftzeichens kennen. Leider weiß ich keine Möglichkeit, diese mit den Mitteln von HTML, CSS, PHP bestimmen oder abfragen zu können. Zwar gibt es die Einheit em, die ich auch verwende; jedoch bestimmt diese nur die Größe von Schriftzeichen in Bezug auf ihre Umgebung, hilft jedoch nicht bei der Größenbestimmung der einzelnen Schriftzeichen zueinander.
Das Ganze ist natürlich abhängig von der verwendeten Schrift und in gewissem Umfang auch vom Brower und Betriebssystem. In der Breite lässt sich diejenige einer Zeichenfolge wegen der Unterschneidungen noch nicht einmal aus den Einzelbreiten ihrer Schriftzeichen herleiten; es sein denn man verwendet eine monospaced Schrift.
Um die Abhängigkeit von der (beim Anwender) verwendeten Schriftart los zu werden, habe ich daran gedacht, eine feste Schrift einzubinden. Dies ist mit dem CSS-Befehl font-face durchaus möglich, zwar offiziell erst ab CSS 3, aber die gängigen Browser können das heute schon. Doch welche Schrift steht dafür zur Verfügung? Eine eigene Schrift zu bauen, fehlen mir die Kenntnisse und die Mittel und auch die Geduld. Eine fremde Schrift per font-face einzubinden, stellt rechtlich ein Zurverfügungstellen zum Download dar und ist in den Lizenzbestimmungen der meisten erhältlichen Schriften nicht erlaubt. Somit bleiben nur die Freeware- oder Open-Source-Schriften; und dort habe ich noch keine wirklich für den Zweck des Formeleditors geeignete Schrift gefunden, weder von der Optik, noch von dem Umfang des Zeichenvorrats. Immerhin sollten auch griechische Buchstaben und die mathematischen Sonderzeichen in der Schrift enthalten sein.
So vertraue ich jetzt erst einmal darauf, dass die Anwender (das sind nicht Sie, der/die Sie dieses Skript zur Gestaltung Ihrer Internetseite benutzen, sondern die Besucher Ihrer Internetseite) die True-Type-Schrifte TimesNewRoman auf ihrem Rechner installiert haben. Die mit meinem Skript erstellten Formeln erhalten den CSS "font-family:'Times New Roman',Times,Serif" aufgedrückt. Sie können das ändern, wovon ich aber abrate.
Wegen der übrigen Abhängigkeiten (Browser, Betriebssystem, evtl. doch abweichende Serif-Schrift) lohnt es sich nicht, die Maße jeden Schriftzeichens genau auszumessen. Ich habe deshalb eine näherungsweise Systematik verwendet, und zwar unterschiedlich für Höhe und Breite:
Für die Höhe habe ich 4 vertikale Bereiche definiert: einen Kernbereich, den alle Schriftzeichen, auch kleine Buchstaben (z.B. a,c,e) belegen; einen Oberlängenbereich, der von großen Buchstaben (alle Großbuchstaben, aber auch z.B. b,d,h) belegt wird, einen Unterlängenbereich (z.B. für y,j) und eine oberen Randbereich, der nur vom Integralzeichen belegt wird. Die 4 Maße habe ich in Konfigurationskonstanten (siehe Punkt 6.8) festgelegt. Sie können gern damit experimentieren. Den Operatorzeichen (z.B. +,-,·) habe ich eine umgebungsabhängige vertikale Verschiebung verpasst, weil sie im üblichen Schriftbild für Formeln zu hoch stehen. Und einige Symbole, insbesondere die Anpassoperatoren, haben eine eigene Behandlung bekommen.
Diese Höhenbehandlung funktioniert ganz gut auch mit anderen »normalen« Schriften, wie Arial und sogar der monospaced Courier.
Für die Breite habe ich überhaupt auf eine Größenbehandlung verzichtet. Grund ist die schon erwänte nicht berechenbare Breite von Zeichenfolgen außerhalb einer monospaced Schrift. Ich führe zwar die Breitenberechnung mit; die Breiten werden aber nur aus der Anzahl Schriftzeichen mal einer durchschnittlichen Zeichenbreite grob näherungsweise berechnet. Das führt dann auch zu einer Formelbreite im Ergebnis (siehe Punkt 2.3). Die berechneten Breiten werden von mir innerhalb der Formel nicht benutzt. Stattdessen baue ich die Formelteile in Blöcke, sodass die Blöcke gerade ihren Inhalt umschließen. Zur Methode lesen Sie den nächsten Abschnitt 8.2.
Für die im vorigen Abschnitt erwähnte horizontale Anpassung und Aneinanderreihung von Formelteilen sind mir zwei Methoden eingefallen: »blinde« Tabellen und div-Blöcke mit den CSS float und position.
Nun wird ja die Ächtung der Tabellen und die Alleinseligmachung des CSS-Boxings immer noch und immer wieder in einschlägigen Medien, Internetartikeln, Foren, usw. fast schon fundamentalisch nachgebetet. In meinen früheren Versionen des Formeleditors hatte ich mich für die Tabellen entschieden, schon deshalb, weil die CSS-Technik von den Browsern sehr uneinheitlich und fehlerhaft verarbeitet wurde; dass der Internet Explorer hier eine unrühmliche Spitzenstellung einnahm, ist bekannt.
Nun versuchte ich es erneut mit der »modernen« Technik. Ich erstellte schließlich den Formeleditor komplett – bis auf einige Endfeinheiten – in beiden Techniken. Denn die Brauchbarkeit zeigte sich nicht in einfachen Tests. Erst mit recht komplizierten Formeln – Brüche mit Hoch- und Tiefstellungen in Zähler und Nenner, Integralzeichen mit komplizierten Ausdrücken als Grenzen usw. stellte sich heraus, wo das eine oder andere versagte.
Das Ergebnis vorweg: Ich bleibe bei den Tabellen. Bei komplizierter verschachtelten float- und position-Blöcken schmierten die Formeln plötzlich ab. Und zwar bei den neuesten Versionen der Browser, bei älteren war es rasch trostlos. Auch konsequentes Trennen von float, position:relative und position:absolute in getrennten, verschachtelten Blöcken führte am Ende nicht zum Ziel, dafür zu unertäglich umständlichen Konstruktionen, gegen die das schlichte <tr> <td> der Tabellen direkt einfach und übersichtlich wirkt.
Den endgültigen Ausschlag gab der Versuch, Formelteile in ihrer Umgebung zu zentrieren. Das schlichte align='center' ist ja verpönt; aber einen Ersatz gibt es in CSS 2 nur für Zeichenfolgen (text-align:center) aber nicht für Blöcke. Die CSS-Standardmethode mit margin-left:auto;margin-right:auto scheidet aus, da dazu eine Breitenangabe nötig ist, die, wie ich im vorigen Abschnitt ausführte, hier nicht bekannt ist. Empfohlen wird in einschlägigen Veröffentlichungen eine Konstruktion von zwei ineinandergeschachtelten Blöcken: <div style='float:left;position:relative;left:50%;'> <div style='float:left;position:relative;left:-50%;'> (oder auch ...right:50%; am Schluss). Diese Konstruktion ist nicht nur ungeheuer verschroben, sondern erwies sich als sehr instabil innerhalb größerer Zusammenhänge mit weiteren positionierten Blöcken; die Auswirkungen waren sehr browserabhöngig. Da ich überhaupt noch nie Spass an endlosen Browserweichen fand und mein Formeleditor auch kein Ersatz für den Acid-Test sein soll, kehrte ich dann wirklich zur schlichten Tabellenzelle <td align='center'> zurück.
Nun kann man die üblichen Argumente für die »moderne« CSS-Technik, als da sind Trennung von Inhalt und Form, Barrierefreiheit, usw., kaum auf diese spezielle Anwendung Formeleditor übertragen. Insofern hoffe ich, dass Sie die uralte Blinde-Tabellen-Technik verzeihen. Besonders Besitzern älterer Browser wird das nützlich sein, wenn sie Ihre Internetseiten mit »meinen« Formeln besuchen.
| siehe auch: |
|
|