Wolfgang Pavel:
PHP-Formeleditor zur Herstellung mathematischer Formeln in HTML

Anleitung

Fassung: 28.12.2014

Zum : ► wpformeleditor.zip ( © 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).


Eine Buchempfehlung: Pavel / Winkler: Mathematik für Naturwissenschaftler – Verlag Pearson Studium, München, 2007 ISBN 978-3-8273-7232-1
Im Buchhandel leider vergriffen, aber als E-Book erhältlich im ► Pearson-Verlang

Inhalt:

1. Vorbemerkungen

1.1 Zweck

Ü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 zwar heutzutage von den meisten Browsern unterstützt werden (SVG); allerdings braucht man einen Formeleditor, der SVG erzeugt.

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.

1.2 Vor- und Nachteile

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, zumindest bei den meistens verwendeten Pixelformaten.

Nachteil ist, dass die Qualität des Formelschriftbilds von den verwendeten Schriftzeichen abhängt, insbesondere den für die mathematischen Symbole. Hier gibt es Qualitätsunterschiede je nach Browser und Betriebssystem.

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.

1.3 Realisation

Die verschiedenen Schriftgrößen und Positionen der Formelteile werden nur mit HTML und CSS durch DIV-Container mit den Eigenschaften margin, padding, font-size realisiert. Auf die Verwendung von position und float habe ich bewusst verzichtet.

Eine ganz andere Möglichkeit gäbe es durch Umsetzung der Formeln in eine MATHML-Struktur; vorbereitet habe ich dies. MATHML gehört zum offiziellen Standard von HTML5 und wird von allen guten modernen Browsern unterstützt – wären da nicht »Chrome«, aus dem Google mit Ignoranz seinen Benutzern gegenüber die MATHML-Unterstützung entfernt hat, und wie üblich der Microsoft-Internet-Explorer. Wenn man Internetseiten mit Formeln solchen Benutzern ansehbar machen möchte, die leider Chrome oder IE benutzen, und wenn man diese nicht zu Javascript zwingen will, muss man wohl auf MATHML derzeit verzichten.

1.4 Voraussetzungen

Serverseitig muss PHP5 unterstützt sein. Die HTML-Seite, die Formeln anzeigen soll, sollte HTML5, mindestens jedoch XHTML 1.0 (Strict oder Transitional), sein. Für korrekte Anzeige muss der Browser CSS3 unterstützen, was aber inzwischen alle gängigen Browser in aktueller Version tun; wesentlich sind hier die unterschiedlichen BOX-SIZING-Einstellungen. Weitere Zusätze – z.B. Javascript – sind weder auf dem Server noch beim Client notwendig.

Auch die korrekte Darstellung der mathematischen Sonderzeichen erfordert aktuelle Schriftzeichensätze in Browser bzw. Betriebssystem. Wenn Sie damit rechnen, dass Besucher Ihrer Seite noch alte 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 mit diesem Skript erzeugten Formeln erzielt man mit den Schriften »Liberation Serif« (in Linux) oder »Times New Roman« (in Windows). Diese Schriften werden automatisch für die Formeln verwendet, wenn sie im System des Betrachters installiert sind. Wenn gewünscht, kann die Auswahl der Schrift für die Formel mit den Eigenschaften (siehe Punkt 4) geändert werden.

2. Installation und Anwendung

2.1 Installation

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. Der Name »wpformel.php« ist nur für den Include-Befehl (siehe nächsten Punkt 2.2.) wichtig, ansonsten beliebig.

2.2 Einbinden in die HTML-Seite

Die Seite muss vom Server als PHP erkannt werden; dazu muss die Datei-Endung ».HTML« in ».PHP« umbenannt werden. (Manche Server verlangen auch etwas anderes, z.B. ».PHP5« oder ».PHTML«.)

Alle PHP-Befehle, hier insbesondere include und wpformel, müssen so gekennzeichnet werden: <?php derPHPbefehl ; ?>
Wenn der Server die Abkürzung zulässt, ist auch einfacher möglich: <? derPHPbefehl ; ?>
Im folgenden sind die Tags <? und ?> weggelassen, müssen aber in der HTML-Seite immer hinzugefügt werden.

Stellen Sie sicher, dass die Seite mit den Formeln in UTF-8-Kodierung angezeigt wird: Schreiben Sie dazu am Anfang des <head>-</head>-Teils Ihrer Seite den HTML-Befehl: <meta charset='utf-8' />.

Am Anfang der HTML-Seite, und zwar im <head>-</head>-Teil, muss dieser PHP-Befehl eingefügt werden: 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 der geänderte Name anzugeben.

Ist ein Einfügen in <head>...</head> nicht möglich (z.B. in einem einschränkenden CMS), kann der include-Befehl auch im <body>...</body>-Teil vor dem ersten Formelaufruf angegeben werden; dann müssen aber die CSS-Angaben am Anfang der Datei wpformel.php (<style...>...</style>) in eine eigene CSS-Datei kopiert und in die verwendende HTML/PHP-Seite entsprechend eingebunden werden.

2.3 Aufruf zum Erzeugen einer Formel

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.)

Mit einem zweiten Parameter kann man der Formel einige Eigenschaften (Schriftgröße, Farben, 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 so erstellte Formel hat die Eigenschaften eines inline-block-Elements. So kann die Lage der Formel durch umgebende CSS-Angaben bestimmt werden: Normalerweise bleibt die Formel innerhalb eines Fließtextes. Mit <br />, oder umgebenden <div>-Angaben text-align, float kann Anordnung in Zeilen und Ausrichtung beeinflusst werden. Ein Formelaufruf darf aber nur stehen, wo HTML-Blockelemente erlaubt sind, also nicht z.B. in <span>...</span> oder <p>...</p> .

3. Syntax

3.0 Sonder-Schriftzeichen.

Mathematische Formeln enthalten meist Sonderzeichen – Operatoren, griechische Buchstaben, und anderes – die nicht im Zeichensatz Ihrer Tastatur enthalten sind. Sie können diese Zeichen in verschiedener Form schreiben. Die Ausgabe der Formeln in Ihrer HTML-Seite mit einem Browser erfolgt jedoch immer in der Kodierung UTF-8. Für das Schreiben haben Sie folgende Möglichkeiten:

  • Einfügen der Zeichen in UTF-8, zum Beispiel durch Auswahl aus einer Symboltabelle Ihres Editors, oder über die Zeichentabelle Ihres Systemst mit Hilfe von "Copy and Paste".
  • Angabe des UTF-Codes in der HTML-üblichen Form entweder dezimal: &#zahl; oder hexadezimal: &#xzahl;
  • Benannte HTML-eigene Zeichen (»named entities«): &name;
  • Speziell in diesem Formeleditor mögliche Ersatz-Schreibweise für einige häufig gebrauchte Zeichen (3.3.7), die Wurzel (3.3.6) und die griechischen Buchstaben (3.3.8)

Beispiele:
UTF-8dezimalhexadezimalentityErsatz-
Schreibweise
&#8734;&#x221e;&infin;
α&#945;&#x3b1;&alpha;%a
&#8721;&#x2211;&sum;
&#8594;&#x2192;&rarr;->

Nochmal zur Beachtung: Unabhängig von der Art der Eingabe wird die Ausgabe immer in UTF-8 an den Browser gesandt.

Codes und Entities finden Sie unter anderem bei
http://wiki.selfhtml.org/wiki/Referenz:HTML/Zeichenreferenz


3.1 Zeichenfolgen (Variable)

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 oder in Erstaz-Schreibweise dargestellt sind. Die HTML-Kodierung dieser Zeichen findet man in vielen Quellen (z.B: http://wiki.selfhtml.org/wiki/Startseite 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).

Beispiele:
wpformel('...')Anzeige
a1B C
a1B
 
C
U-sin(x+y)
U
sin
(
x
+
y
)

Zeichen, die normalerweise eine Sonderbedeutung haben, können als normale Schriftzeichen dargestellt werden, indem sie mit \ maskiert werden.

Beispiele:
wpformel('...')Anzeige
&alpha;
α
\&alpha;
&alpha;

3.2 Texte, Aufheben der Wirkung von Sonderzeichen.

Texte werden zwischen die speziellen Anführungszeichen ´text´ oder `text` gesetzt. In Texten ist die Wirkung von Zeichen wie Operatoren, Klammern, auch die Maskierung mit \ aufgehoben; insbesondere können mit <...> HTML-Tags stehen. In Texten zwischen ´...´ bleiben HTML-Entities und Ersatzschreibweisen gültig; mehrere Zwischenräume werden zu einem zusammengefasst. In Texten zwischen `...` werden alle Zeichen wie geschrieben, einschließlich aller Zwischenräume, ausgegeben.

Beispiele:
wpformel('...')Anzeige
´<b>ABC\&alpha;</b>def´
ABC\αdef
`<b>ABC\&alpha;</b>def`
<b>ABC\&alpha;</b>def
`So wie `´<i>hier</i>:´ R=(u/i) ´sieht eine Formel aus´
So wie          
hier:
 
R
=
(
u
i
)
 
sieht eine Formel aus
Beim letzten Beispiel kann – in der wpformel-Fassung seit 13.12.2014 – die Formel auch in umgebenden HTML-Fließtext eingefügt werden:
HTML-Text:<div>So wie <i>hier</i>: <?wpformel('R=(u/i)')?> sieht eine Formel aus</div>
AnzeigeSo wie hier:
R
=
(
u
i
)
sieht eine Formel aus
Um Formeln in eigenen Zeilen darzustellen, verwende man die üblichen HTML-Mittel, wie Zeilenumbruch (<br />), Absatz (<p>...</p>), Blöcke (<div>...</div>), usw. Beispiel:
HTML-Text:<div>So wie <i>hier</i>:<br /><?wpformel('R=(u/i)')?><br />sieht eine Formel aus</div>
AnzeigeSo wie hier:
R
=
(
u
i
)

sieht eine Formel aus

Zu beachten: Jede Formel ist ein CSS-Blockelement (normalerweise INLINE-BLOCK), darf also nur stehen, wo Blockelemente erlaubt sind, also z.B. nicht in <p>...</p> .

3.3 Operatoren

3.3.1 Normale Operatoren

Als Operatoren werden alle Zeichen (einschließlich HTML-Entities) behandelt, die in der Konfiguration als solche definiert sind. Dies steht 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.

Beispiele:
wpformel('...')Anzeige
a-b*c
a
b
·
c
-c+1
c
+
1
=c+1
?
=
c
+
1
{}=c+1
=
c
+
1

3.3.2 Positionsverändernde Operatoren

_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 das nicht erwünscht ist, verwende manunsichtbare Klammern.

Positionsverändernde Operatoren sind stärker gebunden als unäre. Gegebenenfalls sind unsichtbare Klammern zu setzen.

Beispiele:
wpformel('...')AnzeigeBemerkung
x_i
x
i
 
A^2
A
2
 
U_k^3
U
3
k
 
Adam/Eva
Adam
Eva
 
Oben#Unten
Oben
Unten
 
x^a-1
x
a
1
Operator Minus trennt
x^-a
x
a
Unäres Minus trennt nicht
x^(a-1)
x
(
a
1
)
Klammern binden
lim__x{->1} f(x)
oder: lim__x{&rarr;1} f(x)
oder lim__x{&#8594;1} f(x)
oder auch: lim__x{→1} f(x)
lim
x
1
 
f
(
x
)
Unsichtbare Klammern binden die Limesangabe
lim__x->1 f(x)
lim
x
1
 
f
(
x
)
Operator Pfeil beendet Tiefstellung
&int;__1^^&infin; e^-x dx
oder: &8747;__1^^&8734; e^-x dx
oder auch: ∫__1^^∞ e^-x dx
1
 
e
x
 
dx
Man beachte den trennenden Zwischenraum zwischen &infin; und e
v^^´->´
v
Zur Darstellung von Vektoren: Das Pfeilzeichen ist als Text (nur mit ´...´) anzugeben, da es sonst als hier sinnloser Operator interpretiert wird.
(x#y)
(
x
y
)
 
1#2#3##4#5#6##7#8#9
1
2
3
4
5
6
7
8
9
 
-x/y
x
y
Das unäre Minus steht vor dem Bruch: die wohl üblichere Schreibweise
{-x}/y}
x
y
wenn man das Minus beim Zähler haben möchte (mathematisch hier irrelevant)

3.3.3 Gesetzte Operatoren

Jedes Schriftzeichen (einschließlich HTML-Entities und Ersatzschreibweisen), 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 einzelnes Zeichen durch Voransetzen von \ zum normalen Schriftzeichen gemacht werden; um HTML-Entities und Ersatzschreibweisen funktionslos zu machen, sind sie als Text in ´...´ zu schreiben.

Beispiele:
wpformel('...')AnzeigeBemerkung
x^a?1
x
a?1
Fragezeichen ist normales Schriftzeichen
x^a$?1
x
a
?
1
Fragezeichen ist hier Operator
x^a=1
x
a
=
1
Gleichzeichen ist als Operator konfiguriert
x^a\=1
x
a=1
Gleichzeichen ist hier normales Schriftzeichen
x^a\+-1
x
a+
1
\ wirkt nur auf ein einziges Zeichen, hier +

3.3.4 Funktionen

Funktionen (Standardfunktionen) sind in der Konfiguration als solche definiert. Dies steht 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.

Beispiele:
wpformel('...')AnzeigeBemerkung
e^sin x
e
sin
 
x
Der Zwischenraum trennt nicht
e^sin^2 x
e
sin
2
 
x
 
e^sin -%p/2
e
sin
π
2
Unäres Minus trennt nicht
e^sin x-1
e
sin
 
x
1
Operator Minus trennt
e^sin (x-1)
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.

Beispiele:
wpformel('...')AnzeigeBemerkung
e^fkt x
e
fkt
 
x
fkt ist normale Zeichenfolge
e^$fkt x
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.)

Beispiele:
wpformel('...')AnzeigeBemerkung
sin x/2
sin
 
x
2
Zähler/Nenner sind gemeinsam Operand vom Sinus.
{sin x}/2
sin
 
x
2
Der Nenner ist abgetrennt.

3.3.5 Anpasser

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:

  • Keine Größenanpassung; das Zeichen wird in normaler Größe dargestellt.
  • Das Zeichen wird so hoch wie der folgende Ausdruck; vertikale Ausrichtung erfolgt an der Basislinie des Ausdrucks.
  • Das Zeichen wird so hoch wie der folgende Ausdruck; vertikale Ausrichtung erfolgt mittig.
  • Das Zeichen wird so hoch, dass Zeichen und Ausdruck vertikal mittig ausgerichtet werden können.
Beispiele:
wpformel('...')AnzeigeBemerkung
x=$1&int;A^x/2*dx
oder: x=$1&8747;A^x/2*dx
oder auch: x=$1∫A^x/2*dx
x
=
A
x
2
·
dx
Integralzeichen als einfaches Schriftzeichen
x=$2&int;A^x/2*dx
x
=
A
x
2
·
dx
Formel (an x= zu erkennen) und Integralausdruck haben dieselbe Basislinie
x=$3&int;A^x/2*dx
x
=
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&int;{A^x/2*dx}
x
=
A
x
2
·
dx
wie zuvor; das dx ist durch unsichtbare Klammer in den Integralausdruck eingebunden.
x=$4&int;A^x/2*dx
x
=
A
x
2
·
dx
Das Integralzeichen ist so groß, das Zeichen und Ausdruck mittig zur Formel stehen.
x=&int;A^x/2*dx
x
=
A
x
2
·
dx
Ohne Angabe wird die in der Konfiguration voreingestellt Anpassung genommen, hier 2

3.3.6 Wurzeloperator

Wurzeln werden in der Form grad§radikand geschrieben, wobei § nur eine auf der Tastatur vorhandene Schreibweise für bzw. &radic; ist; oder man verwendet das entsprechende Makro (siehe dort). Der Grad kann weggelassen werden. Der Grad darf nur eine Folge aus einem oder mehreren Buchstaben und Ziffern sein, meist wohl nur eine Ziffer. Auch für die Wurzel gibt es die im vorigen Abschnitt beschrieben unterschiedlichen Angepassungen.

Beispiele:
wpformel('...')AnzeigeBemerkung
3§x
oder: 3&radic;x
oder auch: 3&#8730;x
oder auch: 3&#x221a;x
oder auch: 3√x
3
x
 
§e^x
e
x
 
nnn§e^x
nnn
e
x
Grad besteht aus mehr als einem Schriftzeichen
3 §e^x
3
 
e
x
Zwischenraum zwischen 3 und Wurzel trennt
x=$2§A^x/2
x
=
A
x
2
Dieselbe Grundlinie für x= und Wurzelargument
x=$3§A^x/2
x
=
A
x
2
Dieselbe vertiikale Mitte für x= und Wurzel

3.3.7 Mehrfachzeichen

Einige häufig gebrauchte mathematische Zeichen werden aus mehreren – meist 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("Mehrfach",...) . Dies sind:

Mehrfach-
Schreibweise
Ausgabe
(UTF-8)
HTML-
Entity
DezimalHexadezimal
+-±&plusmn;&#177;&#xb1;
<= oder =<&le;&#8804;&#x2264;
>= oder =>&ge;&#8805;&#x2265;
<>&ne;&#8800;&#x2260;
->&rarr;&#8594;&#x2192;
<-&larr;&#8592;&#x2190;
<->&harr;&#8596;&#x2194;

3.3.8 Griechische Buchstaben

Griechische Buchstaben können in der Form %Isobuchstabe dargestellt werden:

Mehrfach-
Schreibweise
Ausgabe
(UTF-8)
HTML-
Entity
%AΑ&Alpha;
%BΒ&Beta;
%GΓ&Gamma;
%DΔ&Delta;
%EΕ&Epsilon;
%ZΖ&Zeta;
%IΗ&Eta;
%QΘ&Theta;
%JΙ&Iota;
%KΚ&Kappa;
%LΛ&Lambda;
%MΜ&My;
%NΝ&Ny;
%XΞ&Xi;
%OΟ&Omicron;
%PΠ&Pi;
%RΡ&Rho;
%SΣ&Sigma;
%TΤ&Tau;
%YΥ&Upsilon;
%FΦ&Phi;
%CΧ&Chi;
%VΨ&Psi;
%WΩ&Omega;
   
Mehrfach-
Schreibweise
Ausgabe
(UTF-8)
HTML-
Entity
%aα&alpha;
%bβ&beta;
%gγ&gamma;
%dδ&delta;
%eε&epsilon;
%zζ&zeta;
%iη&eta;
%qθ&theta;
%jι&iota;
%kκ&kappa;
%lλ&lambda;
%mμ&my;
%nν&ny;
%xξ&xi;
%oο&omicron;
%pπ&pi;
%rρ&rho;
%sσ&sigma;
%tτ&tau;
%yυ&upsilon;
%fφ&phi;
%cχ&chi;
%vψ&psi;
%wω&omega;

3.4 Klammern

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 ist {} als unsichtbar konfiguiert.

Beispiele:
wpformel('...')Anzeige
x=a+b/c+d
x
=
a
+
b
c
+
d
x=(a+b)/(c+d)
x
=
(
a
+
b
)
(
c
+
d
)
x=(A^x/2)
x
=
(
A
x
2
)
x=$2(A^x/2)
x
=
(
A
x
2
)
f(x)=$3{{1 `für` x>=0}#{0 `für` x<0}$0}
f
(
x
)
=
{
1
 
für
 
x
0
0
 
für
 
x
<
0

3.5 Makros

Häufig verwendete, kompliziertere Ausdrücke können als Makros geschrieben werden.

3.5.1 Aufruf von Makros

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:

  • @<wurzel@radikand@Grad>@
  • @<integral@integrand@untere Grenze@obere Grenze>@

Weitere Makros können definiert werden.

Beispiele:
wpformel('...')Anzeige
@<wurzel@x-1@3>@
3
x
1
@<integral@f(u)*du@0@x>@
x
0
f
(
u
)
·
du

3.5.2 Definition von Makros

Dies geschieht 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.

4. Eigenschaften.

Einige Eigenschaften, zum Beispiel Schriftgröße und Farben können für die ganze Formel oder teilweise für einzelne Formelteile bestimmt werden.

4.1 Eigenschaften für die ganze Formel

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.

Folgende Eigenschaften können für die ganze Formel angegeben werden:

sn:...Schriftname stellt die Formel in der angegebenen Schrift dar
sf:...CSS-Farbwert Farbe der Schriftzeichen
hf:...CSS-Farbwert Hintergrundfarbe für die ganze Formel
sg:...Zahl oder Zahl%Größenänderung (Faktor) gegenüber der normalen Anzeige (für unverändert: 1 bzw. 100%); wirkt auch auf Bruchstriche usw. (Wegen Kompatibilität zu früheren Versionen von wpformel wird eine zahl>20 automatisch als zahl% genommen.)
ms:...Zahl oder Zahl% Mindestschriftgröße, relativ zur umgebenden Schriftgröße (em bzw. %). Bei Brüchen, Hoch- und Tiefstellungen wird die hier angegebene Schriftgöße nicht unterschritten. Zwei Möglichkeiten:
  • positive Zahl: die betroffenen Formelteile werden in der hier angegebenen Mindestgröße dargestellt;
  • negative Zahl: die ganze Formel wird soweit vergrößert, dass alle betroffenenen Formelteile die Mindestgröße nicht unterschreiten. ms:0 schaltet Prüfung auf Mindestgröße ab.

Für Eigenschaften, die nicht angegeben sind; werden globale Voreinstellungen wirksam.

Beispiel: wpformel( 'a^2+b^2=c^2' , 'sf:red;hf:#ee99ee;sg:150%' ) : Die Formel wird in roter Schrift auf violettem Grund um die Hälfte größer als die Umgebung dargestellt:

a
2
+
b
2
=
c
2


4.2 Eigenschaften für einzelne Formelteile

Um einzelne 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 in Punkt 4.1 beschriebenen 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 die in Punkt 4.1 beschriebenen Angaben sf, hf und sg, nicht aber sn und ms.

Beispiele:
wpformel('...')Anzeige
A*$<sf:red;hf:yellow>sin x+a/u
A
·
sin
 
x
+
a
u
A*$<sf:red;hf:yellow>{sin x+a/u}
A
·
sin
 
x
+
a
u
$<sf:red;hf:yellow>A^sin x+a/u
A
sin
 
x
+
a
u

4.3 Globale Voreinstellungen.

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. Dies darf erst nach dem Einbinden des Skripts mit include("wpformel.php") gemacht werden, am besten erst im <body>...</body>-Teil

Beispiel: $WPF_EIGENSCHAFTEN='lg:m;sg:120'; setzt alle danach 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.

4.4 Einstellung der Schriftgrößen.

Für die Einstellung der Schriftgrößen gibt es für ganze Formeln und für Formelteile mehrere Möglichkeiten:

  • Die in der Umgebung einer Formel, also außerhalb von wpformel( ' formel ' ), festgelegte Schriftgröße wird zunächst für die Formel übernommen.
  • Mit z.B. <div style='font-size:...'><? wpformel( ' formel ' ); ?> </div> kann die ganze Formel größer oder kleiner dargestellt werden. Empfehlenswerter sind jedoch die folgenden Möglichkeiten. (Nicht möglich ist z.B. <span> ... wpformel( ' formel ' ) ... </span> , weil der Aufruf wpformel nur dort stehen darf, wo Blockelemente erlaubt sind. Gegebenenfalls verwende man <div style='display:inline-block;...'>...).
  • Mit der globalen Einstellung in der Variablen $WPF_EIGENSCHAFTEN='sg:zahl;...' wird eine geänderte Schriftgröße für alle folgenden Formeln – bis zu einer erneuten Änderung von $WPF_EIGENSCHAFTEN – festgelegt. Die zahl wirkt als Faktor zur umgebenden Schriftgröße, also so wie ein font-size: zahl em bzw. font-size: zahl % . Mit sg:2 oder sg:200% wird die Formelgröße verdoppelt, mit sg:0.5 oder sg:50% halbiert. Zu Abweichungen für einzelne Formeln oder Formelteile gibt es die weiteren Möglichkeiten.
  • Mit der Angabe im Formelaufruf wpformel( 'formel','sg:zahl...') wird die Schriftgröße dieser Formel geändert. Die zahl wirkt – wie zuvor beschrieben – als Faktor zur umgebenden Schriftgröße; eine evtl. mit $WPF_EIGENSCHAFTEN bestimmte Schriftgröße wird durch diese Angabe im Formelaufruf für diese eine Formel ersetzt.
  • Automatisch erhalten Formelteile je nach Stellung in der Formel eine eigene Schriftgröße, so bei Hoch- und Tiefstellungen, bei Brüchen und bei Anpassoperatoren. Diese Schriftgrößen-Änderungen sind im Skript wpformel.php als Konstanten vorgegeben, können also nur dort geändert werden – eher für experimentelle Zwecke.
  • Im Formelaufruf selbst kann mit der »Funktion« $<sg:zahl> die Schriftgröße für einen Teil der Formel geändert werden – siehe Punkt 4.2. Die zahl wirkt – wie zuvor beschrieben – als Faktor auf die ursprünglich für diesen Formelteil vorgesehene Schriftgröße; wirksam werden in diesem Fall also die umgebende Schriftgröße, ggf. eine Änderung durch $WPF_EIGENSCHAFTEN oder im Formelaufruf, ggf. eine automatische Änderung aufgrund der Lage des Formelteils, und die hier genannte »Funktion«.
  • Eine Mindestschriftgröße kann für ganze Formeln in $WPF_EIGENSCHAFTEN='ms:zahl;...' oder im Formelaufruf wpformel( 'formel','ms:zahl...'), nicht aber für Formelteile, angegeben werden – siehe Punkt 4.1. Die zahl, also die Mindesschriftgröße, bezieht sich auf die Grundschriftgröße der Formel, die durch die Umgebung und ggf. durch eine sg:...-Angabe ind WPF_EIGENSCHAFTEN oder im Formelaufruf, bestimmt ist.

5. Fehlermeldungen

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.

6. Konfiguration

Die Konfiguration von Voreinstellungen für etliche Details im Formeleditor geschieht am Anfang des Skripts »wpformel.php« . Geplant ist, dies später über eine gesonderte Konfigurationsdatei und Aufrufparameter zu machen.

6.1 Konfigurierte Operatoren

define("Operator","Operatorenliste")

Die Operatorenliste enthält, durch Zwischenraum getrennt, alle Schriftzeichen, einschließlich HTML-Entities, die automatisch als Operatoren interpretiert werden sollen.

6.2 Klammern

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.

6.3 Mehrfachzeichen

define("Mehrfach","Mehrfachliste")

Einige mathematische Zeichen dürfen durch zwei bestimmte aufeinanderfolgende Schriftzeichen dargestellt werden; das erspart die Angabe einer HTML-Entity. Die Mehrfachliste enthält, durch Zwischenraum getrennt, für jede solche Mehrfachdarstellung zwei Angaben durch Komma getrennt: das Mehrfachzeichen und das entsprechende HTML-Entity-Zeichen.

6.4 Unäre Operatoren

define("Unaer","Operatorenliste")

Operatoren, die unär behandelt werden sollen, stehen in der Operatorenliste durch Zwischenraum getrennt.

6.5 Standardfunktionen

define("Funktion","Funktionenliste")

Namen von Standardfunktionen, die wie in 3.3.4. behandelt werden sollen, stehen in der Funktionenliste durch Zwischenraum getrennt.

6.6 Anpasser

define("Anpasser","Anpasserliste")

Jedes Zeichen, das wie in 3.3.5. als Anpasser behandelt werden soll zusammen (nach Komma) mit der voreingestellten Anpassungsziffer.

6.7 Schriftzeichengrößen

Für die vertikale Ausrichtung sind Größen für Schriftzeichen festegelegt, die bei üblichen Schriften, insbesondere der anfangs erwähnten »Liberation Serif« und 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.

6.8 Maßangaben

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.

KfgZmtSchriftzeichen: oberster Bereich, nur von Spezialsymbolen belegt.
KfgZmoSchriftzeichen: Oberlängenbereich
KfgZmmSchriftzeichen: mittlerer Kernbereich
KfgZmuSchriftzeichen: Unterlängenbereich
KfgZghSchriftzeichen: Gesamthöhe (Summe der Bereiche)
KfgZbrSchriftzeichen: Breite (Durchschnittswert)
KfgZwrZwischenraumbreite: 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.
KfgOabMindestabstand 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.
KfgVopVertikale Korrektur von Operatoren bei Umgebung mit nur kleinen Symbolen
KfgBstBruchstrichdicke: die umgebende Schriftgröße mit diesem Faktor multipliziert ist die Dicke des Bruchstrichs.
KfgVpdVertikale Abstände übereinanderliegender Elemente (Hochstellung, Tiefstellung, usw.)
KfgBsfSchriftgröß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 .
KfgHsfSchriftgrößenfaktor für Hoch- und Tiefgestelltes: Hoch- und Tiefstellungen werden um diesen Faktor kleiner als der Basisausdruck dargestellt.
KfgKsfUm diesen Faktor werden Klammern und Anpasser größer dargestellt als der unter ihnen enthaltene Ausdruck.
KfgWgfSchriftgrößenfaktor für Wurzelgrad: In Wurzeln wird die Gradangabe, wenn vorhanden um diesen Faktor kleiner als der Radikand dargestellt.
KfgWpvVertikale Einpassung des Wurzelgrads
KfgWphHorizontale Einpassung des Wurzelgrads.
KfgWstStrichdicke für Wurzelzeichen
KfgWspVertikales Padding unter dem Wurzelstrich
KfgGsfSchriftgrößenfaktor für Unter- und Überschreibungen (z.B. Grenzen für Summe,Integral,Produkt)
KfgSgpWert, ab dem Schriftgrößen auch ohne % als Prozent genommen werden (wegen Kompatibilität früherer Versionen).

7. Änderungen gegenüber den Vorversionen

28.12.2014
  • Schrift-Sonderzeichen können wahlweise in UTF-8 oder als HTML-Entities geschrieben werden.
  • Weitere Ersatzschriftzeichen für häufig verwendete Sonderzeichen, insbesondere für die griechischen Buchstaben.
  • In Texten hebt ´...´ nur die Funktionalität von Operatoren, Klammern usw. auf; `...` hebt auch Zeichenersetzung (HTML-Entities, Ersatzschriftzeichen) auf. Bisher waren beide gleich wirkend.
13.12.2014
  • Bisherige HTML-Struktur mit TABLE ersetzt durch DIV-Container mit margin und padding.
  • Vollständige Unterstützung von UTF-8.
  • Überarbeitete Algorithmen zur Formelausgabe; dadurch verbesserte Darstellung.
  • Formel können in umgebendem Fließtext stehen
  • Der Befehl include("wpformel.php") muss jetzt zwingend im <head>...</head>-Teil der anzeigenden HTML-Seite stehen, wegen der darin enthaltenen CSSs.
  • Die Eigenschafts-Angaben lg, fs, az und va, sowie die Konfigurationsparameter KfgSmn und KfgSmx sind entfallen; stattdessen gibt es jetzt die Eigenschafts-Angabe ms für die Festlegung einer Mindestschriftgröße.
  • Die Eigenschafts-Angabe sg ist jetzt als Zahl der Faktor zur Schriftgröße (wie in em); soll es eine Prozentangabe sein, muss jetzt zahl% geschrieben werden. Für eine gewisse Kompatibilität zur früheren Version werden auch Zahlangaben größer als 20 automatisch als Prozent angenommen.
21.11.2013
  • Verwendung mit Zeichencodierung UTF-8 möglich.
  • Formelelemente werden bei Mausberührung nur noch angezeigt, wenn Parser oder Struktur eingeschaltet ist.
19.10.2010
  • Vermeiden der PHP-Warnungen, die bei eingeschaltetem E_WARNING im Zusammenhang mit get_class erschienen.
9.5.2010:
  • Völlige Überarbeitung der cl_Klassen zur Formelausgabe; Syntax bleibt kompatibel zu den alten Versionen.
  • Berücksichtigung der unterschiedlichen Schriftzeichen-Größen, insbesondere in der Vertikalen; dadurch mit kompakteren Formeln besseres Aussehen.
  • Berücksichtigung griechischer Buchstaben, mathematischer und anderer Sonderzeichen.
  • Neue Konfigurationselemente und Eigenschaften
  • Möglichkeit, Eigenschaften auch für Teile der Formel, abweichend von der übrigen Formel, zu bestimmen.
  • Die Eigenschaftsparameter wurden gegenüber der letzten Version (24.3.2010) inkompatibel geändert!
24.3.2010:
  • Ergänzung des Aufrufs wpformel() um einen Parameter, mit dem der Formel bestimmte Eigenschaften mitgegeben werden können (siehe Punkt 4).
  • XHTML-Strict-konform.
28.9.2009:
  • Änderung der Funktionsnamen ps_... in wps_..., um Konflikte mit den Funktionen im PHP-Postscript-Modul zu vermeiden.
31.10.2007:
  • Hinweis und Abbruch, wenn der Editor mit einer PHP-Version < 5 verwendet wird.
8.9.2007:
  • Getrennte Behandlung von Operatoren, Standardfunktionen, unären Operatoren und »Anpassern«.
  • Standardfunktionen und Anpasser binden automatisch den folgenden Operanden; das erspart oft eine unsichtbare Klammerung.
  • Kontextabhängig Behandlung von Zwischenräumen. Insbesondere wirken Zwischenräume nach hoch- oder tiefgestellten Operanden wie ein Operator trennend.
  • Veränderte Syntax und zusätzliche Möglichkeiten bei »einmaliger« Konfigurierung und Anpassung durch $ .
  • Veränderte und neue Konfigurationsanweisungen am Skriptanfang.
28.8.2007: erste Fassung.

8. Technisches

8.1 Darstellung der Schriftzeichen

Die Darstellung der Formelteile erfordert unterschiedliche Schriftgrößen und Positionen. Alle Darstellungsaufgaben habe ich mit CSS gemacht.

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 abhängig von der verwendeten Schrift und damit auch vom Brower und Betriebssystem und den darin festgelegten und installierten Schriften. 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. 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-Schrift Liberation Serif oder – wenn es unbedingt Windows sein muss – TimesNewRoman auf ihrem Rechner installiert haben. Die mit meinem Skript erstellten Formeln erhalten den CSS "font-family:'Liberation Serif','Times New Roman',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ähnte 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.

8.2 Blockstruktur

Die in früherer Version von wpformel.php verwendeten »blinden Tabellen« habe ich ganz entfernt. Auf float und auf position habe ich verzichtet.

Ich verwende nur div-Blöcke, die mit display:inline-block nebeneinander oder mit display:block untereinander gestellt werden.

Die Schriftgrößen – durchgehend in em-Einheiten angegeben – vererbt CSS (font-size) in untergeordnete Blöcke, sodass ineinander geschachtelte Formelteile sich mit allen ihren Teilen relativ nach dem jeweils umgebenden Block richten.

Vertikale Verschiebungen realisiere ich mit padding und margin, in einem Fall (Wurzelgrad) auch horizontal. Die Massangaben für die Verschiebungen werden ebenfalls alle in em gemacht, sodass auch diese sich in ineinander geschachtelten Blöcken vererben. Für diese Verschiebungen ist das CSS3-Modell box-sizing:border-box erforderlich und muss von den anzeigenden Browsern unterstützt sein.