pdf-test-expression.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LuaLaTeX OpenType Fonts Table</title>
<script> const noFontDrop=true;</script>
<script src="mathfont-table.js"></script>
<script src="lz-string/lz-string.min.js"></script>

<style>
    table {
      border-collapse: collapse;
      width: 100%;
      font-size: 14pt;
    }
    th {
	font-size: 10pt;
	background-color:white;
    }

    thead {position:sticky;top:0;}
    
    th, td {
      border: 1px solid #ccc;
      padding: 6px 10px;
      text-align: left;
      vertical-align: middle;
    }

    td { white-space: nowrap;}


    .duplicate {
      background-color: #fffacd;
    }
    p.breadcrumb {font-size: .9rem; border-bottom: solid thin black;}
    p.breadcrumb a {text-decoration:none; color:blue;}
</style>
<script>
  function checkfont (f) {
      return ((document.getElementById('select' + f).checked ? ' ' : '%') +'#1{' + f.replace('NewComputerModern','NCM') + '}');
}
  function updateLaTeX () {
      const layout=document.querySelector('input[name="layout"]:checked').value;
      let  docstr=String.raw`
% !TeX lualatex
\documentclass{article}
\usepackage{booktabs}

\pagestyle{empty}
\advance\textwidth 4cm
\advance\oddsidemargin -2cm
\advance\textheight 6cm
\advance\topmargin -2cm
\aboverulesep=7pt
\belowrulesep=7pt

\centering
\parindent=0pt

\def\flEXP{${document.getElementById('ltxedit').value}}

\def\flLIST#1{%
${checkfont('STIXTwo')}{STIXTwoMath-Regular.otf}
${checkfont('NewComputerModern')}{NewCMMath-Book.otf}
${checkfont('LatinModern')}{latinmodern-math.otf}
${checkfont('MLModern')}{mlmodern-math.otf}
${checkfont('Asana')}{Asana-Math.otf}
${checkfont('TeXGyreBonum')}{texgyrebonum-math.otf}
${checkfont('TeXGyrePagella')}{texgyrepagella-math.otf}
${checkfont('TeXGyreSchola')}{texgyreschola-math.otf}
${checkfont('TeXGyreTermes')}{texgyretermes-math.otf}
${checkfont('XITS')}{XITSMath-Regular.otf}
${checkfont('KpMathRegular')}{KpMath-Regular.otf}
${checkfont('Plex')}{IBMPlexMath-Regular.otf}
${checkfont('Garamond')}{Garamond-Math.otf}
${checkfont('Libertinus')}{libertinusmath-regular.otf}
${checkfont('Erewhon')}{Erewhon-Math.otf}
${checkfont('ConcMath')}{Concrete-Math.otf}
${checkfont('Euler')}{Euler-Math.otf}
${checkfont('DejaVu')}{texgyredejavu-math.otf}
${checkfont('OldStandard')}{OldStandard-Math.otf}
${checkfont('XCharter')}{XCharter-Math.otf}
${checkfont('Publiculum')}{Publiculum.ttf}
${checkfont('FiraMath')}{FiraMath-Regular.otf}
${checkfont('GFSNeoHellenic')}{GFSNeohellenicMath.otf}
${checkfont('NewComputerModernSans')}{NewCMSansMath-Regular.otf}
${checkfont('LeteSansMath')}{LeteSansMath.otf}
${checkfont('NotoSans')}{NotoSansMath-Regular.ttf}
${checkfont('ArsenalSans')}{ArsenalMath-Sans.otf}
${checkfont('KpMathSans')}{KpMath-Sans.otf}
${checkfont('Luciole')}{Luciole-Math.otf}
${checkfont('ComicMathRelief')}{ComicMathRelief.otf}
${checkfont('Pennstander')}{PennstanderMath-Regular.otf}
${checkfont('NagwaTK')}{NagwaTKMath-Regular.otf}
${checkfont('PL46')}{PL46-Math.otf}
}

\usepackage{unicode-math}
\def\defmathfont#1#2{\def\tmp##1##2{\expandafter\font\csname ##1#1\endcsname=[#2]:mode=base;script=math;language=dflt;mathfontdimen=xetex;mathfontdimen=tex3; at ##2pt\relax}
  \tmp{t}{12}\tmp{s}{10}\tmp{ss}{7}}

\flLIST\defmathfont

\begin{document}
${layout=='f'? '\\setlength\\lineskip{10pt}\\parfillskip=0pt' : ''}

\def\flSHOW#1#2{%
${layout=='f'? '\\ifhmode\\hfill\\fi\\vrule\\mbox{\\begin{tabular}[t]{c}\\csname t#1\\endcsname#1\\\\[-.5\\normalbaselineskip]\\rule{' + minwin.value +'em}{0pt} \\\\' : ''}%
${layout=='v'? '\\csname t#1\\endcsname#1&' : ''}%
  \csname t#1\endcsname$%
  \textfont0=\csname t#1\endcsname\textfont1=\textfont0 \textfont2=\textfont0 \textfont3=\textfont0 \textfont4=\textfont0
  \scriptfont0=\csname s#1\endcsname\scriptfont1=\scriptfont0 \scriptfont2=\scriptfont0 \scriptfont3=\scriptfont0 \scriptfont4=\scriptfont0
  \scriptscriptfont0=\csname ss#1\endcsname\scriptscriptfont1=\scriptscriptfont0 \scriptscriptfont2=\scriptscriptfont0 \scriptscriptfont3=\scriptscriptfont0 \scriptscriptfont4=\scriptscriptfont0
  {\begin{gathered}\flEXP\end{gathered}}$%
${layout=='h'? '&' : ''}%
${layout=='v'? '\\\\[30pt]\\midrule' : ''}%
${layout=='f'? '\\end{tabular}}\\vrule' : ''}%
}
\def\flHEAD#1#2{\csname t#1\endcsname#1&}

  \large
  \sbox0{\let\\\relax$\displaystyle\flEXP$}

${layout=='h'? '\\sbox0{\\begin{tabular}{|*{40}{c|}}' : ''}%
${layout=='v'? '\\sbox0{\\begin{tabular}{lc}' : ''}%
${layout=='h'? '&\\flLIST\\flHEAD\\\\[5pt]' : ''}%
${layout=='v'? '\\midrule' : ''}%
${layout=='h'? '&' : ''}
\flLIST\flSHOW
${layout=='h' || layout=='v' ?
'\\end{tabular}}\\pagewidth\\dimexpr\\wd0+4cm \\pageheight\\dimexpr\\ht0+\\ht0+2cm \\voffset=-1.5cm \\hoffset=-1cm \\shipout\\box0 ' : ''}

\end{document}
 `;

  let f=document.getElementById('doc');
  doc.textContent=docstr;
  document.getElementById('f1').submit();

}
</script>
</head>
<body>
  <p class="breadcrumb"><a href="./">MathFonts.github.io</a></p>
  <h1>LuaLaTeX Expressions Font Test</h1>

  <details id="fontselector" open>
    <summary><b>Settings / Font Selection</b></summary>
      <button onclick="updateURL()">Update/Copy URL</button>
      <button onclick="updateCookies()">Save State (Cookies)</button>
      <button onclick="deleteCookies()">Reset State (Delete Cookies)</button>
</p>
<p>
    <input type="radio" name="layout" id="lh"         value="h"/><label for="lh">Horizontal</label>
    <input type="radio" name="layout" id="lv" checked value="v"/><label for="lv">Vertical</label>
    <input type="radio" name="layout" id="lf"         value="f"/><label for="lf">Flow</label>
</p>
  <p>
    <input id="setminw" type="range" min="0" max="30" step=".5" value="10"/>
<label for="setminw">min width for flow layout:</label>  <output id="minwvalue"></output>em</p>
  </details>
</details>

  <h3>LaTeX Expression</h3>
  <textarea id="ltxedit" rows="10" cols="80">
    x^2+y^2 \\
    \int_0^1 \cos \theta \,d\theta
  </textarea>
  <form action="https://texlive.net/cgi-bin/latexcgi"
      enctype="multipart/form-data"
      method="post"
      name="f1" id="f1"
      target="_blank">
  <textarea style="display:none" type="text" name="filecontents[]" id="doc" rows="10" cols="80">
  </textarea>
  <input style="display:none" type="text" name="filename[]" value="document.tex"/>
  <input style="display:none" type="text" name="engine" value="lualatex"/>
</form>


<button onclick="updateLaTeX()">Generate PDF</button>

  <p>Select the fonts to be tested. Edit the LaTeX expression.<br/>
    Then submit the form to generate a PDF table in a new tab.</p>
    
<script>
  if(layoutP=="h") document.getElementById("lh").checked=true;
  if(layoutP=="v") document.getElementById("lv").checked=true;
  if(layoutP=="f") document.getElementById("lf").checked=true;
  if(ltxP) document.getElementById("ltxedit").value= LZString.decompressFromEncodedURIComponent(ltxP);
   const minwv = document.querySelector("#minwvalue");
   const minwin = document.querySelector("#setminw");

   if(widthP) {
       minwin.value=widthP;
   }
   minwv.textContent = minwin.value;
   minwin.addEventListener("input", (event) => {
       minwv.textContent = event.target.value;
   });
</script>

</body>
</html>