Sample HTML file: produced with lwarp, with mathematical formulae displayed with MathJax, and xymatrix commutative diagrams displayed with XyJax-v3

João Faria Martins

Last modified: May 23, 2023


\[\xymatrix @R=30pt@C=60pt {&A\ar [d]_{\iota _0^A} \ar [r]^f & X\ar [d]_{\iota _0^X} \ar [r]^g & B.\\ & A \times I \ar @/_4pc/[rru]_<<<<<<<<<<<{H} \ar [r]^{f \times \id _I} & X\times I \ar @{-->}[ur]^{H'} } \]

The responsibility for this HTML file is João Faria Martins’ only.
Corrections, suggestions, etc. are very welcome, and can be sent to:
This is strictly a non-specialist experimental file.

See the links below for:

1 Context: using Lwarp to compile latex to HTML, so that xymatrix diagrams are displayed with Xy-Jax

This HTML file (that you are reading) was produced with the lwarp.sty package, available with TeXLive. 1 In particular the preamble contains:


The version of the software was:

pdfTeX, Version 3.141592653-2.6-1.40.22 (TeX Live 2022/dev/Debian)
lwarpmk: v0.903   Automated make for the LaTeX Lwarp package.

The source latex file can be found here: Sample_Lwarp_Xy-jax.tex.

This HTML file also makes use of the following configuration script, so that Xy-pic diagrams, particularly xymatrix commmutative diagrams, can be displayed by using Xy-Jax-v3. (Or at least a good sample of them: there seem to be some compatibility issues.)

This script file has minimal additions (two in total) in the original Lwarp MathJax emulation code, that is automatically created by lwarp v0.902), namely:

(Two lines were added to the script above, as shown, in order that browsers can find Xy-Jaxv3.)

This modification was produced under items 5 and 6 of the licence (The LATEX Project Public License 1.3).
Credit is due to instructions in: (the official Xy-Jaxv3 documentation) and in "40.11 lwarp_mathjax.txt" of the official Lwarp documentation.

If using Xy-pic diagrams displayed with XyJax-v3, insert the following in the preamble of your latex file:


Compile .tex to .html using:

  • 1. pdflatex Sample_Lwarp_Xy-jax.tex (possibly twice) : creates Sample_Lwarp_Xy-jax.pdf (usual pdf file, that can also be shared) and Sample_Lwarp_Xy-jax_html.tex. (And some other aux files.)

  • 2. lwarpmk html : converts Sample_Lwarp_Xy-jax_html.tex to Sample_Lwarp_Xy-jax_html.html. And then creates Sample_Lwarp_Xy-jax.html (possibly split into different HTML files if such option is chosen).

  •   Note: Use lwarpmk html1 to force a recompile.

  •   Note: In case of error, with lwarpmk html, use lwarpmk pdftohtml to create HTML file.

  •   Note: When using bibtex files, then the following is required:

    • • bibtex Sample_Lwarp_Xy-jax_html.aux

    • pdflatex Sample_Lwarp_Xy-jax_html.tex

  • The following steps are only needed once (any time tikz figures change). Only needed with tikz.

  • 3. lwarpmk limages : If there are images done with tikz, tikz-cd, etc.

  • 4. Repeat 2 (now using lwarpmk html1) and 3 (to finish creating the images).

1 See also, for a quick introduction on how to use Lwarp, and without which this explanation that you are reading would not have been written.

  • Note. It is advisable to use a recent version of TexLive.


  • • The usage of XyJax-v3 software with lwarp is experimental.

  • • Not all accessibility features of commutative diagrams displayed with XyJax-v3 work.
    Among the accessibility features that seem to work well are:

    • 1. View original latex source.

    • 2. Zoom maths expression.

2 Examples: xymatrix diagrams displayed with Xy-Jaxv3 using Lwarp

This is an example of a HTML file with:

  • • Mathematical formulae displayed with MathJax:

    \begin{equation} \label {test} x^2+y^2=1, \end{equation}

    \[\big ( x \ra { \gamma } y\big ) \in \pi _1(X,X_0), \]

    \[ \dots \to \pi _i(E_b,x) \ra {\iota } \pi _i(E,x) \ra {\d } \pi _i(B,b) \ra {\delta } \pi _{i-1}(E_b,x) \to \dots \ra {\iota } \pi _1(E,x) \ra {\partial } \pi _1(B,b) \ra {\delta _x} \pi _0(E_b) \ra {\iota } \pi _0(E)=\{0\}. \]

  • • To see how lecture notes look like with Lwarp, see subsections 6.1 and 6.2.

  • • This configuration is compatible with AMS-CD commutative diagrams, e.g. this diagram from the amscd package manual:

    \[ \begin {CD} A @>a>b> B\\ @VlVrV @AlArA\\ C @<a<b< D \end {CD} \]

  • • Commutative diagrams drawn with Xy-pic displayed by using XyJax-v3.

    \[\xymatrix @R=60pt@C=60pt{&S_3 \ar @{^{(}->}[r]^f \ar [dr]_{g}^{\cong } &S_4 \ar @{->>}[d]^\pi \\ &&S_4/V, } \]

    \[ \xymatrix { && \Q \\ & \Q (\w ) \ar @{<-}[ur] \\ & & \Q (\g )\ar @{<-}[uu] & \Q (\b )\ar @{<-}[uul] & \Q (\a ),\ar @{<-}[uull]\\ &&\Q (\a ,\b ,\g )\ar @{<-}[uul]\ar @{<-}[u] \ar @{<-}[ur] \ar @{<-}[urr] } \]

    \[\xymatrix @R=1pt{\\\\\\(123).}\xymatrix @R=39pt{ & \red {\bullet }\ar @{-}[dr] \ar @{-}[rr] && \blue {\star }\ar @{-}[dl] \\ && \green {\square } }\qquad \xymatrix @R=1pt{\\\\\\\\ =} \xymatrix @R=39pt{ & \blue {\star }\ar @{-}[dr] \ar @{-}[rr] && \green {\square }\ar @{-}[dl] \\ && \red {\bullet } } \xymatrix @R=1pt{\\\\\\\\ ,}\]

    \[\xymatrix @R=30pt@C=60pt {&A\ar [d]_{{\iota _0}^A} \ar [r]^f & X\ar [d]_{{\iota _0}^X} \ar [r]^g & B,\\ & A \times I \ar @/_4pc/[rru]_<<<<<<<<<<<{H} \ar [r]^{f \times \id _I} & X\times I \ar @{-->}[ur]^{H'} } \]

    \[ \xymatrix { & \displaystyle \bigoplus _{y \in H_0} \mathbf {H}_1(x,y)\otimes \mathbf {H}_1'(y,z)\ar [dd]_{\displaystyle \bigoplus _{y \in H_0} \eta _{(x,y)} \otimes \eta '_{(y,z)}} \ar [rr]^{\mathrm {proj}} && \displaystyle \int ^{y \in H_0} \mathbf {H}_1(x,y)\otimes \mathbf {H}_1'(y,z)\ar @{-->}[dd]^{ \displaystyle \int ^{y \in Y} \eta _{(x,y)} \otimes \eta '_{(y,z)} }\\ \\ & \displaystyle \bigoplus _{y \in H_0} \mathbf {H}_2(x,y)\otimes \mathbf {H}_2'(y,z) \ar [rr]_{\mathrm {proj}} && \displaystyle \int ^{y \in H_0} \mathbf {H}_2(x,y)\otimes \mathbf {H}_2'(y,z)\,\, , } \]

    \[\xymatrix { &\displaystyle \int ^{y \in {Y}} \Hpb _{(X,Y)}^{M_1}(-,y) \otimes \Hpb _{(Y,Z)}^{M_2}(y,-)\ar @{=>}[dd]|{\tHpb {\mathbf {W}_1}{X}{Y} \bullet \tHpb {\mathbf {W}_2}{Y}{Z}} \ar @{=>}[rrr]^>>>>>>>>>>>>>>>>>{\eta _{(X,Y,Z)}^{M_1,M_2}}&&& \Hpb _{(X,Z)}^{M_1\times _Y M_2} \ar @{=>}[dd]|{\tHpb {\mathbf {W}_1\#_0 \mathbf {W}_2}{X}{Z}} \\\\ &\displaystyle \int ^{y \in {Y}} \Hpb _{(X,Y)}^{N_1}(-, y) \otimes \Hpb _{(Y,Z)}^{N_2}(y,-)\ar @{=>}[rrr]^>>>>>>>>>>>>>>>>>{\eta _{(X,Y,Z)}^{N_1,N_2}}&&& \Hpb _{(X,Z)}^{N_1\times _Y N_2}\,. } \]

3 Issues when using XyJax-v3 and Lwarp for typesetting xymatrix diagrams

Please do contact me if you know the solution to any of these issues. Remember: this is stricly a non-specialist file!

  • • The commands of the form:



    \left ( x \xrightarrow{f} y\right)

    do not seem to work well inside

    \begin{equation} \end{equation}.

    So use instead, for example,

    $$ \stackrel{(*)}{\implies} $$
    $$ \left ( x \xrightarrow{f} y \right)$$

    Here is how it looks:

    \[ \stackrel {(*)}{\implies }\]

    \[\left ( x \xrightarrow {f} y \right ) .\]

  • • Sometimes there are errors if there are mathematical commands in the title of sections, subsections, etc.

  • • Lwarpmk gives error messages if it finds xymatrix inside:

    \begin{equation} \end{equation}.

    (However a html file can still be produced with lwarpmk pdftohtml.)

    So avoid:

    \begin{equation} \xymatrix{   } \end{equation},

    and use instead:

    \[ \xymatrix{   } \],


    $$ \xymatrix{   } $$.
  • • The 2-cell option does not appear to work with Xy-Jaxv3. However xymatrix diagrams can still be compiled as svg figures, with alt text; see 5.1.

    \[\xymatrixcolsep {0.5cm}\xymatrixrowsep {2cm}\hskip -0.5cm\xymatrix {& T\times T\ar [drr]_{\sqcup } \ar [rr]^{ \tau } &\drtwocell <\omit >{\,\,\, \mathbf {R}}& T \times T \ar [d]^{\sqcup } \\ &&& T.} \]

  • Not all accessibility functions of MathJax work with Xy-Jaxv3, only some can be used, e.g. zoom and source latex code.
    Accessibility features of Xy-jax are not officially supported.

  • • References to section, chapters etc, have glitches if inside mathematics environments. For instance, the links provided do not appear to work well. E.g.

    \begin{equation} \label {Euler} \exp (x+yi)=e^x\big (\cos (y)+i\sin (y) \big ) \end{equation}

    \begin{align*} e^{i\pi }+1&=\big (\cos (\pi )+i\sin (\pi ) \big )+1, \quad \textrm { using Equation } \eqref {Euler}. \textrm { (Just for testing) equations } \eqref {test}, \eqref {xydiagram}\\ &=0. \quad \textrm { A reference to second section } \protect \ref {sec:context} \end{align*} Outside maths environments all seems to work fine:

    Using Equation (2). (Just for testing) equations (1), (3)
    A reference to second section 2

  • • When compiling xymatrix, or tikz, diagrams as sgv figures, with Alt-Text (which sometimes is necessary) it sometimes happens that the figure is not cropped correctly. This seems to depend stronly on the operating system being used.

4 More general notes

  • pdf and HTML automatically coexist: here is the pdf version of this HTML file Sample_Lwarp_Xy-jax.pdf

  • • It is possible to split an HTML page into sub-pages: credit Instructions can be seen in the source latex file of this HTML file Sample_Lwarp_Xy-jax.tex.

  • • Additions are required in the .tex file in order that MathJax displays commands, macros and definitions correctly. E.g. write:

    \def \Mon {{\mathbf{Mon}}}

    and then:

      \CustomizeMathJax{\def \Mon {{\mathbf{Mon}}}}

    This means that you can use slightly different versions of commands for pdf and for html.

  • • If using Xy-pic diagrams (if displayed as Xy-jax) put in the preamble of the tex file:


    You will also need this configuration file: lwarp-with-Xy-jax_v3.txt. (Explanation is in Section 1.)

  • • Sample use of Xy-pic compatible with lwarp (so that the resulting xymatrix code is readable by Xy-Jax): E.g.:

    && \Q\\ & \Q(\w) \ar@{<-}[ur] \\
    & & \Q(\g)\ar@{<-}[uu] & \Q(\b)\ar@{<-}[uul] & \Q(\a)\ar@{<-}[uull]\\
    &&\Q(\a,\b,\g)\ar@{<-}[uul]\ar@{<-}[u] \ar@{<-}[ur] \ar@{<-}[urr]


    &S_3 \ar@{^{(}->}[r]^f \ar[dr]_{g}^{\cong} &S_4 \ar@{->>}[d]^\pi
    \\ &&S_4/V,
  • • Figures, with alternative text, can be included like this:

    \includegraphics[width = 0.4\textwidth,
    alt={Type your alternative text here}]{Stasheff.png}

    (This figure shows Stasheff’s Polytope.           The top face is a pentagon, the bottom face is a pentagon ...)

  • • Figures, including tikz and tikz-cd figures, can be compiled as figures with Alt Text. (The same option is also available for xymatrix diagrams, and may be preferable to Xy-Jaxv3, in the cases when it is sensible to provide a comprehensive alternative text to the figure/diagram, instead of relying mainly on the availability of the latex code, for accessibility.)
    Warning: In some operating systems, issues seem to exist with the conversion of tikz figures to svg: e.g. figures may be incorrectly cropped for the web-page.
    Size of xymatrix figures and tikz-cd figures seemingly then must be adjusted manually.

  • • When using tikz pictures use (note the Alt Text option):

    \begin{figure}\ThisAltText{Alt text to your diagram}


    \begin{center}\ThisAltText{Alt text to your diagram}

    Examples can be found towards the end of this file.

  • • When using tikz-cd use:

        \ThisAltText{ Alt text to your commutative diagram }
           \begin{tikzcd} F(A) \arrow{r}{F(f)}& F(B) \\
           G(A)\arrow{r}[swap]{G(f)} \arrow{u}{\eta_A} & G(B)
  • • It is possible to compile an Xy-pic diagram as a figure with alt text. Use:

    \ThisAltText{Write some alt text here.}
    $$ \xymatrix{ } $$

    Examples can be found towards the end of this file.

  • To select your own .CSS files use:

  • • Avoid good old Tex commands like

    {\bf }, {\it }.

    It seems that lwarp does not deal with them properly. Instead use:

    \textbf{ }, \textit{ }.

    (In fact better to avoid italics altogether for accessibility reasons: use bold.)

  • • Lwarp gives errors messages when compiling Xy-pic diagrams inside

    \begin{equation} \end{equation}

    Use instead:

    \[\xymatrix{} \]
    \[\begin{xy} \xymatrix{} \end{xy}\]

    Or use lwarpmk pdftohtml if there are compilation errors.

  • • Figures created with tikz and xymatrix frequently have issues: e.g. they may be too small (so size needs to be adjusted), or incorrectly cropped. Seems to depend on operating system.

5 Some examples of tikz and xymatrix diagrams compiled as svg images, with alternative text

As written in Section 2, it is possible to display xymatrix diagrams by using XyJax-v3. In some cases, it may however be preferable to compile xymatrix diagrams as figures with Alt Text. (E.g. it may be sensible to instead provide a comprehensive alternative text to the figure/diagram, instead of relying mainly on the availability of the latex code, for accessibility.)

This option (svg image with alternative text) is also available for tikz and tikz-cd figures. Examples are below.

5.1 An xymatrix diagram compiled as an image with alt text

An xymatrix diagram compiled into a picture with alt text. Can utilize equation numbers, with no errors. The 2-cell option can be used.
The size of the svg image must be adjusted. Sometimes the image is not correctly cropped: depends on operating system.

(Write some alt text here.)

5.2 A tikz image compiled as an image with alt text:

Size can be adjusted. Sometimes (depending on operating system, it seems) the image may be incorrectly cropped. See figure 1.

(An equilateral triangle, with one of the edges horizontal.          Vertices are labelled 1, 2 and 3, clockwise, starting from the top left vertex.)

Figure 1: An equilateral triangle with its vertices labeled 1, 2 and 3

5.3 A tikz image compiled to an image with alt text, outside a float environment

(This figure shows a rectangle, whose largest side is horizontal.   Is vertices are labelled 1, 2 (top edge) and 3 and 4.   (bottom edge), from left to right.)

5.4 A tikz-cd diagram compiled into a figure with alt text:

Issues with size of diagrams created with tikz-cd. Sometimes (depending on operating system) the image may be incorrectly cropped.

The following diagram commutes.

(A diagram showing F (f ) ◦ ηA = ηB ◦ G(f ))

6 Sample mathematics

6.1 Adjoint functors and coadjoint functors via universal arrows

Let \(\Cc \) and \(\Dc \) be categories. Let \(G\colon \Dc \to \Cc \) be a functor.

  • Definition 1. Let \(A\) be an object of \(\Cc \). A universal arrow from \(A\) to \(G\colon \Dc \to \Cc \) is a pair:

    \[ \left (F_A, A \ra {\eta _A} G(F_A)\right ), \]

    where \(F_A\) is an object in \(\Dc \) and \(\eta _A\colon A \to G(F_A)\) is an arrow in \(\Cc \), such that the following universal property is satisfied:

    For any object of \(B\) of \(\Dc \) and any arrow \(f\colon A \to G(B)\), in \(\Cc \), there exists a unique arrow \(\hat {f}\colon F_A \to B\), in \(\Dc \), that makes the following diagram, in \(\Cc \), commute:

    \[\xymatrix {& A \ar [drr]_f\ar [rr]^{\eta _A} && G(F_A) \ar @{-->}[d]^{G(\hat {f})}\\ &&& G(B)} \]

  • Exercise 2. In the conditions of the previous definition, prove that if \(\left (F_A, A \ra {\eta _A} G(F_A)\right )\) is a universal arrow from \(A\) to \(G\), then we have a bijection:

    \[\phi _{A,B}\colon \hom _\Cc \big (A,G(B)\big ) \longrightarrow \hom _\Dc (F_A,B), \]

    such that

    \[ \big (f\colon A \to G(B)\big ) \stackrel {\phi _{(A,B)}}{\longmapsto } (\hat {f}\colon F_A \to B\big ).\]

    Moreover, prove that the bijection \(\phi _{A,B}\) is natural in \(B\). This means that given any arrow \(g\colon B \to C\), in \(\Dc \), the following diagram (in the category of sets) commutes:

    \[ \xymatrix { & \hom _\Cc (A,G(B)) \ar [d]_{m\mapsto G(g)\circ m } \ar [rrrr]^{\phi _{A,B}} &&&& \hom _\Dc (F_A,B) \ar [d]^{n\mapsto g\circ n } \\ & \hom _\Cc (A,G(C)) \ar [rrrr]_{\phi _{A,C}} &&&& \hom _\Dc (F_A,C)\\ } \]

6.2 The Galois correspondence for \(f(t)=t^3-2\), over the rational field

Let \(f(t)=t^3-2 \in \Q [t]\). Let \(\w =e^{\frac {2\pi i}{3}}\). Let \(\a =\sqrt [3]{2}\), \(\beta =\a \w \) and \(\gamma =\a \w ^2\). Hence the set of roots of \(f\) is \(\{\a ,\b ,\g \}\). The splitting field of \(f\), over \(\Q \) is:

\[\Q (\a ,\b ,\g )=\Q (\a ,\w ).\]

The monomorphism of groups,

\begin{align*} \theta \colon \Gamma (f,\Q ) &\longrightarrow \Sym (\{\a ,\b ,\g \})\\ \tau & \longmapsto \left ( \begin{CD} \{\a ,\b ,\g \} &\longrightarrow &\{\a ,\b ,\g \}\\ a &\longmapsto &\tau (a) \end {CD}\right ), \end{align*} is, in this case, an isomorphism. The diagram of subgroups of \(\Gamma (f,\Q ) \cong \Sym (\{\a ,\b ,\g \})\) is below (note that inclusions go in the direction of arrows):

\[\xymatrix { && \Sym (\{\a ,\b ,\gamma \} )\\ & \{\id , (\a \b \g ), (\a \g \b )\} \ar [ur] \\ & & \{\id ,(\a \b )\}\ar [uu] &\{\id ,(\a \g )\}\ar [uul] &\{\id , (\b \g )\}\ar [uull]\\ && \{\id _R\}\ar [uul]\ar [u] \ar [ur] \ar [urr] } \]

The corresponding diagram of intermediate fields \(\Q \subseteq L \subseteq \Q (\a ,\b ,\g )\) is:

\[\xymatrix { && \Q \\ & \Q (\w ) \ar @{<-}[ur] \\ & & \Q (\g )\ar @{<-}[uu] & \Q (\b )\ar @{<-}[uul] & \Q (\a )\ar @{<-}[uull]\\ &&\Q (\a ,\b ,\g )\ar @{<-}[uul]\ar @{<-}[u] \ar @{<-}[ur] \ar @{<-}[urr] } \]

Also note that \(\{\id _R\}\), \(\Sym (R)\) and \({\{\id , (\a \b \g ), (\a \g \b )\}}\cong A_3\) are the only normal subgroups of \(\Sym (R)\). So, respectively,

\begin{equation} \label {normalext} \Q (\a ,\b ,\g ):\Q ,\qquad \Q :\Q \quad \textrm { and } \quad \Q (\w ):\Q \end{equation}

are the only normal extensions of \(\Q \) contained in \(\Q (\a ,\b ,\g )\). Note that the fact that the extensions in (4) are are normal also follows from the fact that they are the splitting fields of \(p(t)=t^3-2\), \(q(t)=t\) and \(r(t)=t^2+t+1\) (which has \(\w \) and \(\w ^2\) as roots), over \(\Q \).

  • Remark 3. Also note that we have a series of subfields of \(\C \) (we use \(\leq \) to denote subfield):

    \[\Q \leq \Q (\w ) \leq \Q (\a ,\b \,\g )=\Q (\a ,\w ).\]

    Note that:

    • • \(\Q (\w ): \Q \) is a normal extension (since it is the splitting field of \(t^2+t+1\), over \(\Q \)).

    • • \(\Q (\w ,\a ):\Q (\w )\) is also a normal extension. This is because \(\Q (\w ,\a )\) is the splitting field of \(t^3-2\) over \(\Q (\w )\).

    And then it follows that:

    • • \(\Gamma \big (\Q (\w ,\a ),\Q (\w )\big )\) is normal in \(\Gamma (\Q (\w ,\a ): \Q )\),

    • • we have a series of subgroups of \(\Gamma \big ( \Q (\w ,\a ): \Q \big )\):

      \[\{e\}=\Gamma \big ( \Q (\w ,a): \Q (\w ,\a ) \big )\trianglelefteq \Gamma \big ( \Q (\w ,\a ): \Q (\w ) \big ) \trianglelefteq \Gamma \big ( \Q (\w ,\a ): \Q \big ),\]

    • • The quotient groups can be explicitly determined:

      • – \(\Gamma \big ( \Q (\w ,\a ): \Q \big ) / \Gamma \big ( \Q (\w ,a): \Q (\w ) \big ) \cong \Gamma \big (\Q (\w ): \Q )\cong \Z _2\).

        Where the last equation follows since \(\Q (\w ): \Q \) is a normal extension of degree 2, since it is the splitting field of the irreducible polynomial \(t^2+t+1\), over \(\Q \). This \(\Z _2\) is an abelian group.

      • – \(\Gamma \big ( \Q (\w ,\a ): \Q (\w ) \big ) / \Gamma \big ( \Q (\w ,\a ): \Q (\w ,\a ) \big ) \cong \Gamma \big (\Q (\w ,\a ): \Q (\w ))\cong \Z _3. \)

        Where the last equation follows since \(\Q (\w ,\a ): \Q (\w )\) is a normal extension of degree 3. This is because it is the splitting field of the polynomial \(t^3-2\), which is irreducible over \(\Q (\w )\). This is an abelian group.

      What was just shown is a general patern that exists any time we compute the splitting field of a polynomial that is soluble by radicals.