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

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 https://people.bath.ac.uk/feb/lwarp/lwarp-intro.html. 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:

  \DeclareMathOperator{\Sym}{Sym}
  \def \Mon {{\mathbf{Mon}}}
  \newcommand{\Q}{\mathbb{Q}}
  

  and then:

  \begin{warpHTML}
    \CustomizeMathJax{\DeclareMathOperator{\Sym}{Sym}}
    \CustomizeMathJax{\def \Mon {{\mathbf{Mon}}}}
    \CustomizeMathJax{\newcommand{\Q}{\mathbb{Q}}}
  \end{warpHTML}
  

  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:

  \MathJaxFilename{lwarp-with-Xy-jax_v6.txt}
  

  You will also need this configuration file: lwarp-with-Xy-jax_v6.txt. (Explanation is in Section 1. Also requires xypic.js in directory “js”)

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

  \[
  \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]
  }
  \],
  

  or

  \displaymathnormal{$$
  \xymatrix{
  &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}
  

  

• • 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{tikzpicture}
  
  
  \end{tikzpicture}
  \end{figure}
  

  or

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

  Examples can be found towards the end of this file.

• • When using tikz-cd use:

  {\displaymathother
      \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)
         \arrow{u}[right]{\eta_B}
         \end{tikzcd}
  \]
  }
  

• • It is possible to compile an Xy-pic diagram as a figure with alt text. Use:

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

  Examples can be found towards the end of this file.

• • To select your own .CSS files use:

  \CSSFilename{your_file.css}
  

• • 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{} \]
  or
  \[\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.