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).
Ü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.
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.
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.
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.
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.
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.
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> .
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:
UTF-8 | dezimal | hexadezimal | entity | Ersatz- Schreibweise |
---|---|---|---|---|
∞ | ∞ | ∞ | ∞ | |
α | α | α | α | %a |
∑ | ∑ | ∑ | ∑ | |
→ | → | → | → | -> |
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
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).
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.
wpformel('...') | Anzeige |
---|---|
α |
α |
\α |
α |
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.
wpformel('...') | Anzeige |
---|---|
´<b>ABC\α</b>def´ |
ABC\αdef |
`<b>ABC\α</b>def` |
<b>ABC\α</b>def |
`So wie `´<i>hier</i>:´ R=(u/i) ´sieht eine Formel aus´ |
So wie
hier:
R
=
(
u
i
)
sieht eine Formel aus |
HTML-Text: | <div>So wie <i>hier</i>: <?wpformel('R=(u/i)')?> sieht eine Formel aus</div> |
Anzeige | So wie hier:
R
=
(
u
i
) |
HTML-Text: | <div>So wie <i>hier</i>:<br /><?wpformel('R=(u/i)')?><br />sieht eine Formel aus</div> |
Anzeige | So 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> .
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.
wpformel('...') | Anzeige |
---|---|
a-b*c |
a
−
b
·
c |
-c+1 |
−
c
+
1 |
=c+1 |
?
=
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 das nicht erwünscht ist, verwende manunsichtbare Klammern.
Positionsverändernde Operatoren sind stärker gebunden als unäre. Gegebenenfalls sind unsichtbare Klammern zu setzen.
wpformel('...') | Anzeige | Bemerkung |
---|---|---|
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{→1} f(x) oder lim__x{→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 |
∫__1^^∞ 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 ∞ 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) |
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.
wpformel('...') | Anzeige | Bemerkung |
---|---|---|
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 + |
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.
wpformel('...') | Anzeige | Bemerkung |
---|---|---|
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.
wpformel('...') | Anzeige | Bemerkung |
---|---|---|
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.)
wpformel('...') | Anzeige | Bemerkung |
---|---|---|
sin x/2 |
sin
x
2 | Zähler/Nenner sind gemeinsam Operand vom Sinus. |
{sin x}/2 |
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 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∫A^x/2*dx |
x
=
∫
A
x
2
·
dx |
Formel (an x= zu erkennen) und Integralausdruck haben dieselbe Basislinie |
x=$3∫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∫{A^x/2*dx} |
x
=
∫
A
x
2
·
dx |
wie zuvor; das dx ist durch unsichtbare Klammer in den Integralausdruck eingebunden. |
x=$4∫A^x/2*dx |
x
=
∫
A
x
2
·
dx |
Das Integralzeichen ist so groß, das Zeichen und Ausdruck mittig zur Formel stehen. |
x=∫A^x/2*dx |
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 auf der Tastatur vorhandene Schreibweise für √ bzw. √ 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.
wpformel('...') | Anzeige | Bemerkung |
---|---|---|
3§x oder: 3√x oder auch: 3√x oder auch: 3√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 |
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 | Dezimal | Hexadezimal |
---|---|---|---|---|
+- | ± | ± | ± | ± |
<= oder =< | ≤ | ≤ | ≤ | ≤ |
>= oder => | ≥ | ≥ | ≥ | ≥ |
<> | ≠ | ≠ | ≠ | ≠ |
-> | → | → | → | → |
<- | ← | ← | ← | ← |
<-> | ↔ | ↔ | ↔ | ↔ |
Griechische Buchstaben können in der Form %Isobuchstabe dargestellt werden:
Mehrfach- Schreibweise | Ausgabe (UTF-8) | HTML- Entity |
---|---|---|
%A | Α | Α |
%B | Β | Β |
%G | Γ | Γ |
%D | Δ | Δ |
%E | Ε | Ε |
%Z | Ζ | Ζ |
%I | Η | Η |
%Q | Θ | Θ |
%J | Ι | Ι |
%K | Κ | Κ |
%L | Λ | Λ |
%M | Μ | &My; |
%N | Ν | &Ny; |
%X | Ξ | Ξ |
%O | Ο | Ο |
%P | Π | Π |
%R | Ρ | Ρ |
%S | Σ | Σ |
%T | Τ | Τ |
%Y | Υ | Υ |
%F | Φ | Φ |
%C | Χ | Χ |
%V | Ψ | Ψ |
%W | Ω | Ω |
Mehrfach- Schreibweise | Ausgabe (UTF-8) | HTML- Entity |
---|---|---|
%a | α | α |
%b | β | β |
%g | γ | γ |
%d | δ | δ |
%e | ε | ε |
%z | ζ | ζ |
%i | η | η |
%q | θ | θ |
%j | ι | ι |
%k | κ | κ |
%l | λ | λ |
%m | μ | &my; |
%n | ν | &ny; |
%x | ξ | ξ |
%o | ο | ο |
%p | π | π |
%r | ρ | ρ |
%s | σ | σ |
%t | τ | τ |
%y | υ | υ |
%f | φ | φ |
%c | χ | χ |
%v | ψ | ψ |
%w | ω | ω |
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.
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 |
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>@ |
3
√
x
−
1 |
@<integral@f(u)*du@0@x>@ |
x
∫
0
f
(
u
)
·
du |
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.
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.
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:
|
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:
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.
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 |
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.
Für die Einstellung der Schriftgrößen gibt es für ganze Formeln und für Formelteile mehrere Möglichkeiten:
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 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("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.
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 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.
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, nur von Spezialsymbolen belegt. |
KfgZmo | Schriftzeichen: Oberlängenbereich |
KfgZmm | Schriftzeichen: mittlerer Kernbereich |
KfgZmu | Schriftzeichen: Unterlängenbereich |
KfgZgh | Schriftzeichen: Gesamthöhe (Summe der Bereiche) |
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 Korrektur von Operatoren bei Umgebung mit nur kleinen Symbolen |
KfgBst | Bruchstrichdicke: die umgebende Schriftgröße mit diesem Faktor multipliziert ist die Dicke des Bruchstrichs. |
KfgVpd | Vertikale Abstände übereinanderliegender Elemente (Hochstellung, Tiefstellung, usw.) |
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. |
KfgWgf | Schriftgrößenfaktor für Wurzelgrad: In Wurzeln wird die Gradangabe, wenn vorhanden um diesen Faktor kleiner als der Radikand dargestellt. |
KfgWpv | Vertikale Einpassung des Wurzelgrads |
KfgWph | Horizontale Einpassung des Wurzelgrads. |
KfgWst | Strichdicke für Wurzelzeichen |
KfgWsp | Vertikales Padding unter dem Wurzelstrich |
KfgGsf | Schriftgrößenfaktor für Unter- und Überschreibungen (z.B. Grenzen für Summe,Integral,Produkt) |
KfgSgp | Wert, ab dem Schriftgrößen auch ohne % als Prozent genommen werden (wegen Kompatibilität früherer Versionen). |
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.
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.