add viewBox in xy pictures

[xworld21]

Fix #2376 for xy pictures. This requires XSLT changes because setting the correct @viewBox implies that vertical alignment must be done in CSS (as it should, so that text is placed correctly), hence we need to handle @imagedepth.

The change looks ok in very simple tests but it makes me a little nervous, because I don't quite understand the reasoning behind the original code and I might be breaking something. If you have a xy corpus, I can check it properly.

Source:

\documentclass{article}
\usepackage[all]{xy}
\begin{document}
\[ x = \xymatrix{A \ar[r] \ar[d] \ar[rd] & B \\ C & D} \]
Followed by more text.
\end{document}

Before:

After (correctly mimicking LaTeX):

Vertical alignment is hit and miss when the SVG is nested inside MathML:

• Safari: works out of the box
• Chrome: one must add display: inline-block or display: block to <mtext>
• Firefox: vertical-align is completely ignored in MathML and I couldn't find a way to make it look right

@dginev does the MathML spec say anything about vertical-align?

[dginev]

@xworld21 I think Firefox is behind on the CSS support for MathML. At the moment Chrome is the main browser that has existing support for CSS+MathML, and the community is pending some interop focus (and funding) to get the others in line.

That said, vertical-align is actually specified only for a limited number of display contexts. Quoting MDN:

The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.

If we have a need to use it over MathML (display: inline math; and display: block math;), I suspect we'd need to lobby the CSS group for an extension to vertical-align. Which is a steep hill to climb, typically.

Edit: But there is a chance I am missing subtleties about how the inline and block adjustments to math fit in with the traditional contexts.

[dginev]

Also, could you add the TeX source for the XY diagram screenshots you shared here, so that we can test and discuss the same conversion example? I got curious how the concrete XML looks like with the changes.

Likely it's too early for me to ask for turning it into a test, since Bruce should opine if the strategy has legs to run on.

[xworld21]

That said, vertical-align is actually specified only for a limited number of display contexts. Quoting MDN:

The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.

Oh, I think I have figured this one out. In Chrome, the children of <mtext> have an unmodifiable display: block. Changing <mtext> to display: inline (or block, inline-block) reverts to the normal behaviour, where the SVG element is inline and can be vertically aligned.

I have just checked MathML Core, and I believe Safari is getting it right, because

[...] the mtext element is laid out as a block box

which I read as saying that it should work as normal HTML. So this may well be a Chrome bug.

[brucemiller]

FWIW, I can get Firefox to work too by wrapping svg:svg with a <span class='ltx_inline-block'>. Ideally, that would only happen within a mtext, and only when there's a vertical-align, but I couldn't find the magic place to do it conditionally. So, in desperation, I added it to the xslt template for mode="as-svg", so it's always there; it doesn't seem to cause any harm.