Bracket notation looks bad with default HTML-CSS render

[szho...@gmail.com]

When writing LaTeX, it is common to write quatum mechanical bracket notation simply as

$$

|\psi\rangle

$$

instead of

$$

\left| \psi \right\rangle

$$

When using LaTeX, this is rendered fine.  But when using MathJax, the | and the \rangle do not match.  The | is not tall enough.  Is there a practical workaround for this when I don't have control over the content?

Here's a screenshot to show you what I'm talking about:

When using the SVG renderer, it's shown with Computer Modern fonts, which look fine.  But using SVG is both slow and blurry here, so I'd prefer to avoid it. Is there a better workaround?

[William F Hammond]

On Mon, Nov 26, 2012 at 12:35 PM, <szho...@gmail.com> wrote:

$$

|\psi\rangle

$$

With this markup how is MathJax supposed to know that the '|' is a balancer matching the \rangle
rather than '|', '\psi', and '\rangle' a conventional list of symbols?  Remember that MathJax's TeX markup is actually an input language for presentation MathML.  It's very close, but there are subtle ways in which it differs from LaTeX.

There is a reason why LaTeX provides the \left, \right construction.

--
William F Hammond
http://www.albany.edu/~hammond/
Email: gel...@gmail.com

[Szabolcs Horvát]

I agree with you that writing simply |\psi\rangle is not completely right.  There is indeed a "braket" package for latex which I use when writing these things.

But as I said in this case I do not control the content, and there a lot of real world use of |\psi\rangle.  For example, I like to read Wikipedia with MathJax because I often magnify the text for readability (and of course formula images comes out terrible when zoomed).  Wikipedia articles are full of simple |\psi\rangle without \left and \right.

What I am looking for is a practical workaround, if there exists one, which will display the | using the same size as the angle bracket, and which doesn't have the disadvantages that the SVG rendered has (blurry, thick characters and slower rendering).  Can I maybe install fonts with which |psi> looks better and force MathJax to use them?

[Davide P. Cervone]

The reason that this is happening for you is that the "|" character in the STIX fonts doesn't have the same depth as the corresponding character in the TeX fonts (or the MathJax web fonts).  There is a character that does, however, which is U+2223 (divides) so you could configure MathJax to remap the "|" to U+2223 by including

<script type="text/x-mathjax-config">

MathJax.Hub.Register.LoadHook("[MathJax]/jax/output/HTML-CSS/fonts/STIX/fontdata.js",function () {

  MathJax.OutputJax["HTML-CSS"].FONTDATA.REMAP[0x007C] = "\u2223";

});

</script>

in your page just before the script that loads MathJax.js itself.

Davide

[Davide P. Cervone]

What I am looking for is a practical workaround, if there exists one, which will display the | using the same size as the angle bracket, and which doesn't have the disadvantages that the SVG rendered has (blurry, thick characters and slower rendering). 

I agree that the SVG rendering is fuzzier, but it should be faster, in general, not slower.  What browser are you using?

 Can I maybe install fonts with which |psi> looks better and force MathJax to use them?

You can download the MathJax fonts and install them.  They will be used in preference to the STIX fonts, and the vertical bar has the same vertical height and position as the angle bracket. The fonts are at

https://github.com/mathjax/MathJax/tree/master/fonts/HTML-CSS/TeX/otf

though you will have to download them individually.  The fonts aren't packaged separately for local installation, as they are intended to be used as web fonts.

Davide

[Szabolcs Horvát]

Thank you Davide, this is wonderful and it works very well!

[Szabolcs Horvát]

On 26 November 2012 14:22, Davide P. Cervone <dp...@union.edu> wrote:
> What I am looking for is a practical workaround, if there exists one, which
> will display the | using the same size as the angle bracket, and which
> doesn't have the disadvantages that the SVG rendered has (blurry, thick
> characters and slower rendering).
>
>
> I agree that the SVG rendering is fuzzier, but it should be faster, in
> general, not slower. What browser are you using?

I am using Chrome on OS X, but I may be wrong that SVG was slower, as
this was based on a subjective impression, not a precise measurement.

>
> Can I maybe install fonts with which |psi> looks better and force MathJax
> to use them?
>
>
> You can download the MathJax fonts and install them. They will be used in
> preference to the STIX fonts, and the vertical bar has the same vertical
> height and position as the angle bracket. The fonts are at
>
> https://github.com/mathjax/MathJax/tree/master/fonts/HTML-CSS/TeX/otf
>
> though you will have to download them individually. The fonts aren't
> packaged separately for local installation, as they are intended to be used
> as web fonts.
>

Thank you, I will try this too, but for the moment your previous
solution seems to work very well too.

Is it correct that for the Wikipedia userscript from
http://docs.mathjax.org/en/v1.1-latest/dynamic.html it is sufficient
to prepend the code you gave in your previous message to the config
variable? This *does* seem to work, but I don't really know any
JavaScript so I wasn't sure if this was indeed the correct way.

[Davide P. Cervone]

> Is it correct that for the Wikipedia userscript from
> http://docs.mathjax.org/en/v1.1-latest/dynamic.html it is sufficient
> to prepend the code you gave in your previous message to the config
> variable? This *does* seem to work, but I don't really know any
> JavaScript so I wasn't sure if this was indeed the correct way.

Yes, that should work. In fact, you can replace the contents of
config with this new code, as the MathJax.Hub.Startup.onload() call is
no longer necessary.

Note also that Wikipedia now has a MathJax option (you need to have an
account in order to set the preference to enable it). That might
handle more of the math (I'm not sure the userscript can identify all
the math on the page).

Davide