Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Aligning mhchem arrows #1491

Open
mhchem opened this issue May 27, 2016 · 7 comments
Open

Aligning mhchem arrows #1491

mhchem opened this issue May 27, 2016 · 7 comments
Labels
Expected Behavior This is how MathJax works Feature Request

Comments

@mhchem
Copy link

mhchem commented May 27, 2016

I'd like to align the mhchem arrows in length. But I do not know enough about the inner workings of MathJax to touch the arrow definitions.

First of all, is there a reason for using both, long arrows (e.g. \longrightarrow) and x-arrows (\xrightarrow)? We could use x-arrows only, with a phantom argument. This would make the whole task much easier.

Further issues: The harpoons do not stretch correctly.

The single-headed arrows are a little bit shorter for the same input as the double headed.

To complete the set, I would also need an arrow similar to the harpoons, but with full arrow heads.

The following test document works with current and new mhchem, as the arrow code stayed untouched.

<!doctype html>
</html>
<head>
  <meta charset="utf-8">
  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({ TeX: {extensions: ['mhchem.js']} });
  </script>
  <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</head>
<body>
\(\def\rel#1{\mkern3mu\mathrel{#1}\mkern3mu}
\def\a#1#2{| \rel{#2{a}} | \rel{#2[a]{}} | \rel{#2[a]{a}} | \rel{#2{aaaaa}} | \rel{#2[aaaaa]{}} | \rel{#2[aaaaa]{aaaaa}} | \rel{#1} |}\)
<br>
\(\a{\longrightarrow}{\xrightarrow}\)<br>
\(\a{\longleftarrow}{\xleftarrow}\)<br>
\(\a{\longleftrightarrow}{\xleftrightarrow}\)<br>
\(\a{\longrightleftharpoons}{\xrightleftharpoons}\)<br>
\(\a{\longRightleftharpoons}{\xRightleftharpoons}\)<br>
\(\a{\longLeftrightharpoons}{\xLeftrightharpoons}\)<br>
\(\a{\longleftrightarrows}{\xleftrightarrows}\)<br>
</body>
</html>

image
@dpvc
Copy link
Member

dpvc commented May 28, 2016 •
edited

is there a reason for using both, long arrows (e.g. \longrightarrow) and x-arrows (\xrightarrow)? We could use x-arrows only, with a phantom argument.

The x-arrow constructs produce much more complicated MathML results, so they are slower to process (both for conversion from TeX to MathML and from MathML to HTML-CSS) and less semantic; and phantom elements just make that worse. Since we have been working hard on making MathJax output accessible, we are more aware of the problems that non-semantic MathML can cause for users with assistive needs. Of course, the mhchem MathML results can be pretty non-semantic already, so perhaps it is not necessary to worry about it in this situation.

The harpoons do not stretch correctly.

This is because the MathJax TeX fonts don't include the needed glyphs for stretching them. The STIX fonts do, as shown below,

stix

but using those requires the page author to force STIX fonts be used. That is possible, bur rarely done. Also, the stretched versions don't have the different sized arrows. Again, MathJax doesn't have the required glyphs for that. (Indeed, Unicode doesn't have the required glyphs, so that complicates things.)

The single-headed arrows are a little bit shorter for the same input as the double headed.

I'm not sure if you are meaning the long-arrow or the x-arrow versions of these. The long versions are different by design, since that is how they are in actual TeX:

TeX:
tex-arrows

MathJax:
mj-arrows

The code for these is

\begin{align}
  &\colorbox{red}{$\longleftarrow$}\\
  &\colorbox{red}{$\longrightarrow$}\\
  &\colorbox{red}{$\longleftrightarrow$}
\end{align}

with the color extension loaded in MathJax. The background colors help to see the difference in the widths. So these are reproduced in MathJax as they should be.

The x-versions are all the same width:

short-arrows
long-arrows

To complete the set, I would also need an arrow similar to the harpoons, but with full arrow heads.

Again, the MathJax TeX fonts don't include the needed glyphs for that. An un-stretched version could be created similar to the harpoon versions, but the MathJax TeX fonts don't have the needed pieces to produce the stretched one, and nether does the STIX font. Because there isn't even a single-character equivalent version in the MathJax TeX font, it is difficult to make an x-arrow version of it as well.

I understand that these are limitations for you, and we do hope to improve the situation for stretchy arrows in MathJax version 3, but the current fonts don't support the arrows that you are looking for.

@dpvc dpvc added Expected Behavior This is how MathJax works Feature Request labels May 28, 2016
@mhchem
Copy link
Author

mhchem commented May 28, 2016

I now understand why the "long" arrows are sized differently: Because TeX does it that way.

However, the "x" arrows are sized differently, as well. For me, I can see a difference with all the renderers.
Looking at the DOM, I see widths of

  • HTML/CSS: 1003.04em, 1003.04em, 1003.1em
  • SVG: 3398, 3417 and 3463

for the following code.

\begin{align}
  &\colorbox{red}{$\xleftarrow{aaaaaa}$}\\
  &\colorbox{red}{$\xrightarrow{aaaaaa}$}\\
  &\colorbox{red}{$\xleftrightarrow{aaaaaa}$}
\end{align}

Maybe I am too pedantic and I should skip the idea of same-length arrows.

Concerning the stretchable asymmetric harpoons, that really is a semantic problem with the STIX fonts. I will use the non-stretchable "long" arrows for the while being. Rather non-stretching than semantically wrong. \underset{bbbbbb}{\overset{aaaaa}{\longRightleftharpoons}}

Concerning the missing arrow type.

An un-stretched version could be created similar to the harpoon versions

Yes, could you please help me with that? (Provide the code?)

@dpvc
Copy link
Member

dpvc commented May 30, 2016

Add this below the definition of longLeftrightharpoons:

      longleftrightarrows: ["Macro","\\stackrel{\\longrightarrow}{\\smash{\\longleftarrow}\\Rule{0px}{.25em}{0px}}"],

Reverse the arrows if that isn't the correct arrangement. Adjust the height of .25em to suit, but try it at a variety of sizes (reloading the page after zooming) to make sure it works OK at different scales.

@pkra
Copy link
Contributor

pkra commented Nov 9, 2016

@dpvc is this issue tagged correctly?

@mhchem mhchem mentioned this issue Jan 30, 2018
Open
@mhchem
Copy link
Author

mhchem commented Jan 30, 2018

Users are asking for strechy <=>> and <<=> arrows. mhchem/MathJax-mhchem#4

@dpvc
Copy link
Member

dpvc commented Feb 1, 2018

We will be rebuilding the fonts for version 3.0 of MathJax, and can address the missing glyphs needed for those arrows at that time.

@adamma1024
Copy link

Hi, is the problem solved or will be solved in 2021?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Expected Behavior This is how MathJax works Feature Request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@pkra @dpvc @mhchem @adamma1024