Rendering content

$\newenvironment {prompt}{}{} \newcommand {\accordion }[0]{} \newcommand {\ungraded }[0]{} \newcommand {\xmDefaultPreamble }[0]{xmPreamble.tex} \newcommand {\qrset }[1]{\setkeys {qr}{#1}} \newcommand {\xmDefaultPrintstyle }[0]{xmPrintstyle.sty} \newcommand {\luastring }[1]{"\luatexluaescapestring {#1}"} \newcommand {\luastringO }[1]{\luastring {\unexpanded \expandafter {#1}}} \newcommand {\luastringN }[1]{\luastring {\unexpanded {#1}}} \newcommand {\RestoreMathJaxEnvironment }[1]{\expandafter \let \csname #1\expandafter \endcsname \csname mathjax-#1\endcsname \expandafter \let \csname end#1\expandafter \endcsname \csname mathjax-end#1\endcsname } \newcommand {\DeclareMicrotypeVariants }[1]{} \newcommand {\DeclareMicrotypeAlias }[2]{} \newcommand {\LoadMicrotypeFile }[1]{} \newcommand {\DeclareMicrotypeFilePrefix }[1]{} \newcommand {\DeclareMicrotypeBabelHook }[2]{} \newcommand {\microtypesetup }[1]{} \newcommand {\microtypecontext }[1]{} \newcommand {\textmicrotypecontext }[2]{#2} \newcommand {\leftprotrusion }[1]{#1} \newcommand {\rightprotrusion }[1]{#1} \newcommand {\noprotrusionifhmode }[0]{} \newcommand {\lsstyle }[0]{} \newcommand {\lslig }[1]{#1} \newcommand {\maketitle }[0]{} \newcommand {\problem }[0]{ } \newcommand {\exercise }[0]{ } \newcommand {\question }[0]{ } \newcommand {\exploration }[0]{ } \newcommand {\ConfigureTheoremEnv }[1]{\renewenvironment {#1}[1][]{\refstepcounter {problem}\ifthenelse {\equal {###1}{}}{}{\HCode {<span class="theorem-like-title">}###1\HCode {</span>}}}{} \ConfigureEnv {#1}{\stepcounter {identification}\ifvmode \IgnorePar \fi \EndP \HCode {<div class="theorem-like problem-environment #1" id="problem\arabic {identification}" titletext=" \GetTranslation {#1}">}}{\ifvmode \IgnorePar \fi \EndP \HCode {</div>}\IgnoreIndent }{}{}} \newcommand {\dialogue }[0]{\begin {description}} \newcommand {\foldable }[0]{\stepcounter {identification}\ifvmode \IgnorePar \fi \EndP \HCode {<div id="foldable\arabic {identification}" class="foldable">}} \newcommand {\unfoldable }[1]{\HCode {<span class="unfoldable">}#1\HCode {</span>}} \newcommand {\selectAll }[0]{\refstepcounter {problem}} \newcommand {\freeResponse }[0]{\refstepcounter {problem}} \newcommand {\javascript }[0]{\NoFonts } \newcommand {\sageCell }[0]{\NoFonts } \newcommand {\sageOutput }[0]{\NoFonts } \newcommand {\sagesilent }[0]{\NoFonts } \newcommand {\ungraded }[0]{\ifvmode \IgnorePar \fi \EndP \HCode {<div class="ungraded">}\IgnoreIndent } \newcommand {\accordion }[0]{\ifvmode \IgnorePar \fi \EndP \HCode {<div class="accordion">} } \newcommand {\expandable }[2]{\stepcounter {identification}\ifvmode \IgnorePar \fi \EndP \HCode {<div class="accordion">\Hnewline }\HCode {<h3 class="#1">}#2\HCode {</h3>\Hnewline }\HCode {<div id="accordion-item\arabic {identification}" class="accordion-item #1-content">\Hnewline } } \newcommand {\paragraph }[1]{\HCode {<span class="paragraphHead">}#1\HCode {</span>}\par \IgnorePar } \newcommand {\subparagraph }[1]{\HCode {<span class="subparagraphHead">}#1\HCode {</span>}\par \IgnorePar } \newcommand {\outcome }[1]{\HCode {<span class="learning-outcome">#1</span>} } \newcommand {\javascriptCode }[0]{\NoFonts } \newcommand {\GetTranslation }[1]{#1} \newcommand {\ref }[1]{\HCode {<a class="reference" href="\##1">#1</a>}}$

A description of how text, math, images, and interactive content are rendered.

Rendering in Ximera can be broken down into three parts:

Rendering text: is handled using the LaTeX package TeX4ht.
Rendering math: is handled using MathJax via TeX4ht.
Rendering images: is done by directly showing the image (in the case of a PNG or JPG) or converting to SVG and displaying the SVG.

There are issues with variables like “textwidth” versus “pagewidth” used in LaTeX. For online rendering, these variables are all basically made to be the width of the browser window (more or less—there are some very technical details here). This can make it difficult to horizontally align things with any subtlety. Moreover, the author should not trust LaTeX for vertical spacing on the web, as our page is very long and it is unclear what various units mean.