Copyright: Das Javascript-Programm 'TeX2HTML.js' ist freie Software, es kann nach Belieben kopiert und weitergegeben werden.
Bei Änderungen im Code muß der Autorname erhalten bleiben
Der Autor schließt jede Garantie für das Funktionieren oder sonstige Gewährleistung aus.
Funktionsweise
"TeX2HTML" basiert auf einem anderen Prinzip als viele andere TeX → HTML Konverter:
Die TeX-Formeln werden hier nicht in Bilder umgewandelt, sondern erst beim Laden im Browser des Nutzers
als HTML-<canvas>-tag gerendert. Das hat einige Vorteile:
ein sonst nötiger Kompilierungsschritt entfällt
HTML-code und TeX-code ist beliebig mischbar
Referenzen und Labels werden automatisch verlinkt
Für fortgeschrittene Autoren sind folgende Optionen möglich:
Wenn das CGI-Prog 'SSE-fmonitor.bin' installiert ist, erfolgt ein automatisches Update bei Änderungen am TeX-file.
man kan einen inverse search wie in Okular implementieren, dh. der Editor (zB. Emacs) springt an die Stelle im Quelltext, die man in der HTML-Seite anklickt.
Dazu muß ein entprechend konfigurierter Webserver (Apache2) laufen.
Ein kleiner Nachteil ist, daß die Formeln auf verschiedenen Browsern leicht unterschiedlich gerendert werden, da die Browser-Fonts nicht identisch sind.
Einbinden von TeX-Code
Das Javascript-File "TeX2HTML.js" muß im HTML-body eingebunden werden, mit <script src="TeX2HTML.js"></script>
Es wird dann bei "body.onload" ausgewertet.
Folgende Möglichkeiten zum Einbinden von TeX-Code gibt es damit:
TeX-File include
Dazu muß ein kleines dezidiertes HTML-File erstellt werden. Die TeX-Seite kann darin aus einem File eingelesen werden mit '<div tex-include="Test-tex.tex"></div>'.
Dann wird der <div> durch den TeX-Inhalt ersetzt.
Er kann auch beliebige HTML-Formatierungen enthalten.
TeX inline-code
In einem beliebigen HTML-File wird
in einem '<div tex-include>...</div>' (ohne Filenamen) wird der Inhalt zwischen den Tags <div>.... <\div>
als TeX-code parsiert und darin dargestellt
TeX links <tag tex-link="Zahlentheorie.tex"> <\tag> erzeugt einen anclickbaren Link, mit dem man das TeX-File
als HTML-Seite laden kann. Siehe zB. Zahlentheorie
Chapter Frame
Ein Spalte (zb Tabelle) mit einer Chapter-Liste (tags mit Attribut "tex-chapter") von TeX-Files, die beim Anklicken rechts auf der Seite
dargestellt werden.
Zum Beispiel: <tr><td tex-chapter="Zahlentheorie.tex">Zahlentheorie</tr>.
Beispiel-File: TeX-Chapters.html
1/2021 neu: Links zu anderen chapters (innerhalb des Chapter Frame) können mit \chapterLink{file.tex} gesetzt werden (Zurückspringen aber nicht mgl.)
Außerdem git es für den Emacs einen inverse search, dh beim Anklicken einer Gliederungszeile [sub[sub]]section,
einer Formel oder einer Fußnote
wird mittels dem CGI-Prog
emacsclient.bin der Emacs-Editor auf die entpr. TeX-Source-Zeile positioniert (erfordert 'server-start' im Emacs).
Damit das funzt, muß außerdem der Apache-Server als user=wolfk gestartet werden:
1. '/etc/apache2/apache2.conf' anpassen: user wolfk, group users, 2. apache2ctl stop && apache2ctl start
Grundsätzlich wird versucht, soviel wie möglich von der LaTeX-Syntax zu bewahren, und gleichzeitig die interaktiven Optionen und Formatierungen von HTML-Tags zu benutzen.
mehrzeilige Formeln '\begin{eqnarray}...\end{eqnarray}' bzw '\begin{eqnarray*}...\end{eqnarray*}'
(momentan interpretieren alle 3 obigen Formel-Umgebungen die zugehörigen Zeilen-Trenner '\\' und horizontalen
Tabulatoren '&', sodaß sie eigentlich überflüssig sind).
Es gibt aber für diese Formeln jeweils nur eine Nummer (oder keine bei 'eqnarray*')
der Operator \fbox erzeugt Rahmen um die Formel.
Die Position - hier aber innerhalb der Formel! - ist egal.
In numerierten Formeln und im Text kann \label{fname} angegeben werden, auf den man mit \ref{fname}
im Text bezug nehmen kann
Größenmäßig angepaßte Klammerpaare können '\left(...\right)' definiert werden: die Höhe wird auf die Höhe des
Formelteils innerhalb gesetzt. Die Klammer-Symbole sind beliebig und können direkt oder mit space angefügt werden.
Auszulassende Teile wie in Latex als '\left.' deklarieren.
Außerdem sind folgende Syntax-Regeln implementiert (im Text)
Kommentare sind alle Zeichen nach '%' bis zum Zeilenende
Newlines können in HTML-Form '<br>'' oder als LateX '\\' eingegeben werden
\fontsize{fsize} ändert die Fontgröße ab dem Auftauchen in. Der Defaultwert ist 'fsize=20' (in Pixeln).
'fsize' kann eine absolute Pixel-Zahl sein (zb. '\fontsize 11.1'). Der 2. Parameter 'Zeilenabstand' entfällt.
Der LaTeX-Befehl '\selectfont' wird ersetzt durch zB '\fontfamily{Times, serif}'.
\section{...}, \subsection{...}, \subsubsection{...} werden als numerierte Gliederungen mit <h2> .. <h4>-tags
dargestellt und im contents-div (page-top) gelistet. section, subsection werden auch in der Seite zum direkten Navigieren verlinkt.
\ref{fname} stellt die Formelnr (der Formel mit \label{fname}) bzw. die [sub[sub]]-Section-Nr dar;
mit einem Link dorthin. Auch Vorwärts-Referenzen sind erlaubt. Bei nicht zugeordnetem 'fname' gibt es eine JS-Alert-box.
\nonumbers (11/2020) ist ein globales Flag, das die [sub]-section-Numerierung ausschaltet. Referenzen mit \ref werden dann mit Titel aufgelöst.
Commands wie \newcommand{\BE}{\begin{equation}} (mit oder ohne Parameter). Sehr nützlich zB. ein link mit:
\newcommand{\link}[2]{<a href="#1" target='blank'>#2</a>}
\footnote{Text & ggf. Formeln} erzeugt einen Abschnitt am Ende des div-tags mit den Fußnoten (auch verlinkt).
Sie werden auch als Tooltip angezeigt, wenn die Maus über der FN-Marke ist!
\author{Text} wird in der Fußzeile (mit "Last modification ... Text") angezeigt
\script{File.js} bindet das Javascript-File 'File.js' ein (am Ende des parsens)
\eval_script{Javacript code} evaluiert den Code (am Ende des parsens)
\qterms (11/2020) ist ein globales Flag, das eine spezielle Darstellung von Termen zwischen 2 Single-Quotes wie: 'term'
einschaltet (benutzt in 'Welt.tex')
\texLink{texfile[#tagid]} (1/21) ermöglicht das Verlinken von anderen tex-Files. Sie werden bei click im neuen Window angezeigt, und wenn eine
'tagid' angegeben ist, wird dahin gesprungen. Das ist eine HTML-Tag-id, die explizit in das tex-File eingefügt werden muß, wie zB <span id='tagid'>
Es können auch section-ids wie '#sssec-5-4-1' benutzt werden (damit aber abhängig von späteren section-Umstellungen).
\split{label} für sehr umfangreiche Seiten (zB Tagebuch.tex). Damit kann man die HTML-Seite in Abschnitte unterteilen,
die separat interakt. ein- bzw. ausgeblendet werden können. Die zugehörigen Fußnoten werden dann lokalisiert und die Formel-canvasse erst beim Ausklappen gerendert.
\satz{ [\label{satz-xyz}] Satztext mit Formeln} (10/24 neu) für einen mathematischen Satz. Sätze werden automat. mit der Variablen 'satznr' numeriert und können mit
Referenz \ref{satz-xyz} angesprungen werden. Bei Mausbewegung über der Ref. wird der Satz mit weißem Hintergrund hervorgehoben und umrahmt
Implementierte TeX-Syntax innerhalb von Formeln
Test des Formel-Layouts:Layout-Test.html
Großgeschriebene Symbole wie '\DEF', '\QEQ' sind eigene Ergänzungen
Term := T1 T2 ... Trennzeichen sind alle Zeichen, außer Buchstaben und ".,:;!" nach "\"
Operatoren := \frac \stackrel \choose \atop mit zwei Operanden, und der üblichen LaTeX-Syntax: \frac t1 t2, {t1 \choose t2}
griechische Kleinbuchstaben:
griechische Großbuchstaben:
math Symbole:
Unicode-Zeichen können in Formeln direkt eingeben werden, zb ℘ = ℘ (hex oder dez). (funzt nicht für codes > 0x1d000, zB Fraktur-Zeichen)
Font optionen
1. File deklarativ laden (asynchron) in div mit Attribut <div tex-include="Test-tex.tex">
2. inline mode: Tag mit leerem Attribut <span tex-include>Inlined Text mit TeX-Formeln </span>
\section{Eine 'Section'-Gliederung (h2)}
Eine inline-Formel mit Rahmen
$\fbox \hat x = ¼ \frac 1{\dot \alpha + \tilde \beta + \frac 12} + \sqrt 2 \overline{\dot a \choose \tilde b}^2 \zeta \cos \phi$
und ohne: $\tilde f(k) \sim - \int_0^\infty \frac{k^2}{2b} e^{-\frac 12 (\frac {k-k_0}{\Delta k })^2}e^{- \frac {k^2}{2b}} $.
mit großen Klammern: $\left( p_m s^{mi}_k \right)^2$. +
$ = \sum_{k_1k_2}^{100} \left(\phi^{a_1 a_2}_{k_1 k_2} (\phi^{\bar a_1 a_2}_{k_1 k_2})^\ast - cc \right) +im_2 (...) $\\
Die Größe $\fbox D$ aligned $D$
\subsection{Eine Subsection (h3)}
Mit HTML-Zeilenumbruch hier: Ein TeX-Kommentar (hier unsichtbar)% alles wird ignoriert bis zu diesem NL\n
\newcommand{\BE}{\begin{equation}} \newcommand{\EE}{\end{equation}} % ohne Argumente
\newcommand{\PD}[2] { \frac {\partial #1} {\partial #2}} % mit 2 Argumenten
$ x = y^2 + \PD {(x+y)} {(z+t)}$ ergibt % ein TeX-Kommentar
mit "newcommand BE..."
\BE y = \pm \sqrt{x} \label{eq-xy}\EE
Das ist Formel \ref{eq-xy} (Im Text referenziert mit ref{eq-xy}). Griech. Symbole $\psi_1 = \phi_2 + \bar\partial \chi^2 $
und eine abgesetzte Formel (mit Rahmen):
\footnote{Eine Fußnote mit Formel $ z = \int dk e^{- {k}} $ }
\[\vec x^\ast = \underbrace{\bar \alpha +{\bf \bar \beta}^*_{1+\alpha}}_{\alpha = \beta} - e^{i\omega t} \,\,\partial_1\!\Psi_1^\dagger
\frac {\psi_{12}' -\phi'_{12}}{\mu_2 + 2\delta^2} {a b \atop b} \fbox
\equiv \sqrt{ \hbar \Re(x)} \;\mbox{und}\; \langle \Im(z), u\rangle + \sqrt{\frac 1 {1+2\pi}} \sum_1^n {a,b\,c \choose b c d }
{a_1 \choose b_1} \DEF \prod^n e
\to \underline{\bf q \QEQ p \Psi_{\uparrow\downarrow}\]
und eine Formel mit Numerierung und Rahmen\footnote{noch eine Fußnote}
\begin{equation} \fbox \sigma_0 \DEF {1\, 0 \choose 0\, 1},\quad \sigma_1 \DEF {0\, 1 \choose 1\, 0},\quad
\sigma_2 \DEF {0\, -i \choose i\; 0},\quad \sigma_3 \DEF {1\; 0 \choose 0\, -1} \end{equation}
und eine mehrzeilige, abgesetzte Formel mit '[...]'-Umgebung (ohne Nummer)
\[ x_1 = a_{11} y_1 + a_{12} y_2 \\ x_2 = \frac 12 a_{21} y_1 + a_{22} y_2\]
und mit {eqnarray}-Umgebung (mit Nummer und label 'eq-2') und '&'-Ausrichtung
\begin{eqnarray} \label{eq-2} x_1 & = & \underbrace{a_{11} y_1}_{a=b} + a_{12} y_2 \\
&=& a_{21} y_1 + \underbrace{a_{22} y_2}_{=z} \end{eqnarray}
und Bezugnahme auf diese Gl \ref{eq-2}\\
Probleme mit höheren char-codes: $ 0x26a4=⚤ $ ok $0x1d74d = 𝝍 0x1d592=𝖒=𝔪 𝔪 $ falsch!
Tests
Höhere Zeichencodes 'c ≥ 0x1d400' funzen nicht: zB #x1d74d = 𝝍 in einem <canvas>:
wird nicht parsiert, warum???
$ x= y^2 0x1d74d = 𝝍 0x26a4=⚤ 0x1d592=𝖒=𝖒 𝔪 $
Laufzeit-Tests
Anzeige des navigator.useragent
Zeitfresser sind die Zuweisungen gc.font = "20px sans-serif";.
Sie brauchen auf dem neuen FF 37.0 ~1.2msec, das sind ~120x so viel wie das akt. rendering!!
(Auf dem alten FF 26.0 ist es ca. 4x schneller!)
(55)
Ein zentriertes div-tag (mit CSS "margin-left = margin-right = auto").
Der canvas ist darin eingebettet (width sollte gleich sein).
Auch die Formelnr. (55) wird dynamisch positioniert