Skip to content

Dealing with display:none

Jump to bottom Edit New page
Davide P. Cervone edited this page May 26, 2013 · 4 revisions

See here for an example: http://aperiodical.com/2012/04/inclusion-and-exclusion-and-the-new-gmat/ (click the link "click for a spoiler")

It seems that inline maths which is inside a <div> which is hidden when the page loads, reports its width incorrectly, leading to it bunching up against the following text. When there's a comma following the maths, the comma is drawn on top of the last character screenshot.

I've noticed this on a few pages, and I've finally had a few other people confirm it's happening on the page I linked to above. It's the same on Chrome 18, Firefox 9 and IE8. Is there anything I can do to fix it? Would having the div not hidden but positioned at something like (-10000px,-10000p) work?

Thanks, Christian

By "hidden" do you mean that the CSS used is visibility:hidden or do you really mean display:none? Within an element that has display:none set, the browser does not compute the sizes of the sub-elements, and so MathJax can't tell how big anything is. So it does the typesetting in a separate location and then transfers the results to its actual location on the page, hoping that the environment will be similar enough to work, but there is no guarantee of that. In particular, if the font size or family is different there, that can cause the math to not be sized appropriately, or for its bounding box to not match the math correctly. That is what I suspect is happening in your case.

One solution is to not use display:none. You have suggested positioning it off screen, which is one possible approach. Another would be to use

position: absolute; top: 0, left:0; width:0, height:0, overflow: hidden; visibility: hidden;

so that the content is not seen, but still properly laid out so that MathJax can measure the pieces. Then turn off those settings when you are ready to see the math. Others have uses this approach with success.

Davide

Thanks, that works. Oh, for reference: yes, it was setting display:none, not visibility:hidden.

from https://groups.google.com/forum/#!msg/mathjax-users/NCzCDDgv9j8/ziemT7-Gs5kJ

When calling MathJax.Hub.Typeset() on a div where css display is set to none, the result of the rendering is in some cases overlapping. Please take a look at the this image and notice the "y" before the "to solve the problem". The "Question:" content had display:block, while the "Step 1" div had it's display set to none when Typeset() was called on the whole div surrounding both of them.

The step display state is toggled via a button down on the page.

The text used is the following:

Look at the inverse cosine function at the R.H.S. of the given problem and
assuming the terms on L.H.S. as $x$ and $y$, we use
$\cos \left( {x + y} \right) = \cos x\cos y - \sin x\sin y $ to solve the problem.

Is there any solution to render this correctly ?!

The problem is that within a container where display is none, browsers do not compute the widths and heights of elements, and so MathJax can't tell how big the letters really are. In this case, it uses a div with visibility:hidden that it adds to the beginning of the page in order to typeset the formulas, hoping that the fonts and styles are similar enough that when they are placed into their correct location, they will still work. This works better in some browsers than other (with Internet Explorer being one that works the worst).

The way to handle this would be to not typeset the element with display:none until it is displayed (when the display is toggled via the button farther down the page).

Alternatively, you could call MathJax.Hub.Reprocess() on the div that has been revealed after the display:none has been changed. This should replace the math with re-processed output, correctly sized for the current location. This will cause an update of the layout, but it shouldn't be too bad, since the original math should be close to the correct size.

In MathJax version 2.0, you can use MathJax.Hub.Rerender() instead, which will avoid redoing the TeX to MathML conversion and just reproduce the output. Since v2.0 displays the equations in groups of several at a time (rather than one at a time), the update should occur in a single step, rather than equation-by-equation, for a smoother look.

Note that when I say "use MathJax.Hub.Reprocess()", you need to perform that via MathJax's queuing mechanism, as in

MathJax.Hub.Queue(["Reprocess",MathJax.Hub,revealedDiv]);

See the dymaic math documentation for details.

Thank you so much Davide,

Now here is my other question. I don't know if this is very hackish, but is there any problem with doing the following:

  1. Page loads with default wrapper/parent container (of both "question" and "step" container) set with "position:relative;"
  2. Also initially have the "step" block be with "visibility:hidden; position:absolute;"
  3. Have Typeset() do its work
  4. When Typeset() is done/complete, change "step" to "display:none;visibility:visible;position:static"

I did try this and it appears to work fine, even in IE.

The mentioning of "position" above has nothing to do with the error, it's just for cosmetic purposes so that I don't get any extra space on the page while Typesetting() ?! What do you think ?

Yes, that looks good. I'm not sure it is necessary to have the position:relative in (1), but it shouldn't cause any problems (leaving it out should cause the absolute positioned elements in (2) to move to the top, left of the page rather than the immediate container, and that might help the extra space issue as well, since they are as out of the way as they can be. You might also explcitily put top:0,left:0 in (2), as I think the position doesn't necessarily default to that in all browsers.

Other than that, looks good.

See also these examples from a talk I gave at the Joint Math Meetings in January 2013.

Add a custom sidebar
Clone this wiki locally