Can LaTeX Profiles be Rendered
Adequately with Static CSS?

William F. Hammond

San Diego

TUG 2014
Portland Oregon
July 2014


Can LaTeX Profiles be Rendered Adequately with Static CSS?

MathJax demonstrates that heavy customization of CSS with JavaScript and webfonts provides good platform-dependent rendering. The issue with MathJax is speed, not quality.

There has been and continues to be intense development with CSS. One may speculate that, as CSS continues to evolve, static CSS may entirely suffice not only for HTML documents but also for the direct online rendering of profiled LaTeX documents when presented using XML syntax.

1.  Disclaimer

2.  About These Slides

3.  A Thematic Poster

Frivolity. Empty colored flexible rows and columns were drawn somewhat haphazardly. Some boxes were given borders, but many were not. Finally little bits of mathematics were entered.

(This poster was written in HTML rather than in profiled LaTeX, but it relies only on static CSS.)

4.  A calculus handout

Online notes on the Gamma function from an honors freshman calculus class that I taught in 1995

These three fonts are nearly consistent with respect to CSS. Aside from font invocation, the variations have to do with margin settings for

5.  Handling of Fractions

Fractions are handled as CSS tables. BUT
  • Must be treated as if \frac{{a}}{{b}}, so that the 2 x 1 table has both rows and cells

  • Bar in middle is “collapsed” common horizontal border (the row role)

  • Content of numerator & denominator must be allowed to contain fractions (the cell role)

  • Wanted: a CSS model for columns

6.  Nested Parentheses


7.  Handling of Parentheses

  • Implemented as CSS borders using border-radius.

  • Perfectly-sized.

  • This approach not presently useable with brackets and braces.

8.  Math that is challenging to set

Maintaining vertical alignment is a challenge for things like infinite series, oversets, math accents, and especially for fractions.

Lots of examples:

9.  CSS Flexible Boxes

In the second instance the flexible rows have blue horizontal borders, while the flexible columns have red vertical borders.

10.  Typesetting on paper

11.  The CSS Future