Properly determine container widths. Resolves issue #1478. #1479
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ry to handle the problem with full-width equations being too wide when the ex-size isn't measured accurately enough. Issue mathjax#1478.
…L-CSS, and add the CSS from handle-floats into the standard HTML-CSS. Remove the content of the handle-floats extension. Issue mathjax#1478.
unpacked/jax/output/SVG/jax.js
Outdated
| HUB.Insert(style,({ | ||
| left: {marginLeft: SVG.Ex(shift)}, | ||
| right: {marginRight: SVG.Ex(-shift), marginLeft: SVG.Ex(Math.max(0,shift-(l+svg.w+r)))}, | ||
| right: {marginRight: SVG.Ex(-shift), marginLeft: SVG.Ex(Math.max(0,shift-(w)))}, |
There was a problem hiding this comment.
Is there something missing? O/w maybe remove parentheses around (w).
There was a problem hiding this comment.
I get it. It's a query-replace artifact.
|
I can't really comment much on the code. But if it works, fine. |
|
lgtm. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This path changes how the container width is determined so that it can be used within shrink-wrap elements like table cells and inline-block elements, while still properly handling floating elements that reduce the width.
The old approach was to use an
<hr>element to get the width, since that would fill the available space, but not overlap floating elements. The problem with that approach is that shrink-wrap elements would end up being width 0 if they don't have any other content than the math.To resolve this, we can use an element with
display:table-cellandwidthset to some large amount, since the table will shrink the cell to the available space, but the large width will force it to be as large as possible. Thus it gets the full width of that is available. (This was the technique used in thehandle-floatsextension for displaying the HTML-CSS output within the available space, but it was not used for measuring the space.) This is more effective than the<hr>technique, since it means that in a shrink-wrapped element, the table cell will try to be as large as possible (forcing the container to be as large as possible), whereas the rule would not, leaving the width of 0.The HTML-CSS and CHTML output now include the CSS used in the
handle-floatsextension to make sure that the output fits within the floating elements. This was not being done with the CHTML output (and there was nohandle-floatsextension for it), and this makes the currenthandle-floatsfor HTML-CSS obsolete.I would recommend reviewing the SVG output first, then the HTML-CSS and finally the CHTML output.
Note: IE < 8 will not get the container width correct inside shrink-wrap elements, since it doesn't implement
display:table-cellproperly, and we are forced to usedisplay:block; width:100%instead, which doesn't force the container to be as wide as possible. But sincedisplay:blockis also implemented incorrectly in IE < 8, it does get the proper width between floating elements when not used inside a shrink-wrap element. This only applies to HTML-CSS output, since SVG only works in IE9 and above, and CHTML only in IE8 and above.