HTML-CSS vs CommonHTML

[ljbo...@gmail.com]

The documentation describes them in nearly identical ways, only pointing out that CommonHTML is now the default, whereas HTML-CSS used to be the default. So my question is: what are the pros and cons of both? One difference I have become aware of recently is that it is apparently easier to write browser-specific hacks for HTML-CSS than for CommonHTML (c.f. this comment on an open bug).

[Davide Cervone]

The documentation describes them in nearly identical ways, only pointing out that CommonHTML is now the default, whereas HTML-CSS used to be the default.

There is no real default, as what is used depends on the configuration you load.  But CommonHTML is being recommended, and it is the one that will be further developed in the future.

So my question is: what are the pros and cons of both?

HTML-CSS is the original output format for MathJax written 8 years ago, when the browser landscape was quite different.  It involves a lot of browser-specific hacks to accommodate differences in the older versions of browsers.  HTML-CSS has support going back to IE6, Safari 2, and Firefox 3, for example.  Since then, a lot has changed with browser, and also with HTML and CSS themselves.  The browsers are much more consistent in their implementations of the standards, and the coverage for newer features is more wide-spread.  So CommonHTML was written two years ago in order to take advantage of that.  One of the design goals was to make it be browser agnostic (i.e., no browser-specific hacks) so that the same HTML is used for all browsers (that is the "common" in CommonHTML).  This necessitated dropping support for the oldest browsers, so it only goes back to IE8 (and that is a little buggy, so IE9 is the real lower limit), so that is one difference.

Another difference is that CommonHTML currently only supports the MathJax TeX fonts (not the STIX fonts or any of the other web-based fonts available in HTML-CSS).  CommonHTML is set up to use a local copy of the fonts, if they are installed, or web fonts if not, but it does not go through the detection process that HTML-CSS uses to select a local font in preference to web based fonts.  (This is partly because that process is fragile, and partly because we wanted to make it possible to use CommonHTML server-side to preprocess the math, and so you can't tell what fonts the user will have.)  CommonHTML could be extended to use the other web fonts, but that hasn't been done yet.

Another difference is that in the HTML-CSS output, the bounding box for the complete expression is accurate, but the bounding boxes for sub-expressions are not (so setting the background color in CSS for some subexpression would not always produce the expected result).  CommonHTML goes to considerable pains to make the internal bounding boxes be correct as well.

Finally, the HTML-CSS layout involved taking measurements of some subexpressions while they were being constructed (in the old days, this was crucial, since the different browsers' text handling could produce very different widths for the same expression).  But taking those measurements was both time consuming (it caused page reflows), and browser-dependent (so made it not work server-side).  The CommonHTML output doesn't do those measurements, making it faster, and browser independent.

These are some of the most important differences.

One difference I have become aware of recently is that it is apparently easier to write browser-specific hacks for HTML-CSS than for CommonHTML (c.f. this comment on an open bug).

It's not that it is harder, it is that CommonHTML is not supposed to have any browser-specific hacks.  That is an important design decision.  They are just not allowed. So when there is a difference in how browsers handle HTML, one has to come up with a means of producing the desired output that works across ALL browsers (not a hack to fix one browser).  Doing THAT is what is sometimes hard.

Davide

[dsfitz...@gmail.com]

This is probably a niche use case, but I've just noticed by experiment that the annotations provided by Hypothes.is work when using HTML-CSS (e.g. you can highlight an equation) but do not when using CommonHTML.

I'm considering enabling Hypothes.is in my HTML textbook for the fall since we'll be teaching online and this provides a method for collaborative note-taking.

Are students going to run into rendering problems if they change to HTML-CSS or should they be mostly fine?

[Davide Cervone]

This is probably a niche use case, but I've just noticed by experiment that the annotations provided by Hypothes.is work when using HTML-CSS (e.g. you can highlight an equation) but do not when using CommonHTML.

It is not clear if you are talking about v2 or v3 of MathJax.  The HTML-CSS output is only in v2, so that suggests you are using MathJax v2, but in v2 the CommonHTML output is selectable.  In v3 it is not, so that suggests you are using v3.

There is a discussion here

https://groups.google.com/d/msg/mathjax-users/1BzTQFINbqY/xGYAlhDNAwAJ

that provides some code that can be used to make the text selectable in v3 (there are several issues discussed there, and the code to make the output selectable is the second part).

The SVG output is not selectable in either version.  Perhaps that is what you changed to if you are using v2?

I'm considering enabling Hypothes.is in my HTML textbook for the fall since we'll be teaching online and this provides a method for collaborative note-taking.

Are students going to run into rendering problems if they change to HTML-CSS or should they be mostly fine?

The HTML-CSS output is the oldest output format, and is the slowest one, so the main difference will be that it will take longer to render.  Other than that, the output is generally comparable among all the output format.

Davide

[dsfitz...@gmail.com]

I did not correctly explain the role of Hypothes.is I think. I am referring to highlighting, not selection.

This is an annotation tool, to replicate online what students would do with a physical textbook. A student with a dead tree Calculus book might, for example, want to highlight (e.g. with a yellow highlighter pen) the equation defining continuity at a point.

I am talking about v2 of MathJax. PreTeXt is not yet on v3. Here is a trial version of a book with Hypothes.is enabled:

http://www.cs.uleth.ca/~fitzpat/apex-hypothesis/sec_continuity.html

I can highlight text (it gets a yellow background, like a physical highlighter). I can't highlight math, unless I switch to HTML-CSS mode.

Probably the Hypothes.is javascript is not compatible with that from MathJax.

[Davide Cervone]

OK, here's what's happening: apparently Hypothesis doesn't just mark the beginning and ending too the annotation, but tries to drill down into the containing HTML and mark individual text regions separately (probably to make it possible to have an annotation cross tag boundaries).  For MathJax output, that means it wraps each symbol in a separate annotation tag.  In CommonHTML out, the character are actually set as 0 height and are contained in a surrounding <span> tag that adds the proper height and depth (so that the bounding box of the character is tight rather than that of the line height as a whole). Because the annotation tag is inside the container that gives the character its height and depth, that means the annotation height is 0, and it doesn't show up (even though it is there).

The HTML-CSS output doesn't try to make the bounding boxes of the characters be correct, and so when Hypothesis inserts the annotations, they are not zero height, and so show up.

In trying to be smart about the annotations, Hypothesis is getting itself in trouble when dealing with MathJax output.  If it were not to descend into tags that are completely within its annotation, for example, then it would be able to highlight CHTML output as well as HTML-CSS output.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/83cada50-5efa-40d9-970b-ca0bdc7d60a1o%40googlegroups.com.

[dsfitz...@gmail.com]

Thanks!

There's an old issue about this on the Hypothesis GitHub page. I'll pass this along and see if they can do anything about it.

To unsubscribe from this group and stop receiving emails from it, send an email to mathja...@googlegroups.com.