Formula is getting clipped.

[friends...@gmail.com]

Hello Guys

New to MathJax implementation. I am using this library for my project.Some of the formulas are getting clipped while showing on any browser. Any help would greatly appreciated.
Please find the screen shot here.
https://docs.google.com/file/d/0ByMyMkrWjeFAbk45aklkZ0hrVms/edit

I am using HTML-CSS output.
Below is my configuration.
<script type="text/javascript" src="${pageContext.request.contextPath}/js/external/mathjax/MathJax.js?config=MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
     "HTML-CSS": {
            availableFonts : [ "STIX"],
            preferredFont : "STIX",
            webFont : "STIX-Web"
           
      }
        });
</script>

Div tag being generated to display on the browser.

<em id="cb-302922-5-91">k</em> = <span id="formula0" style="pointer-events: none; display:inline-block" contenteditable="false"><span class="MathJax_Preview"></span><span style="" aria-readonly="true" role="textbox" id="MathJax-Element-8-Frame" class="MathJax"><nobr><span style="width: 0.871em; display: inline-block;" id="MathJax-Span-67" class="math"><span style="display: inline-block; position: relative; width: 0.68em; height: 0px; font-size: 126%;"><span style="position: absolute; clip: rect(1.74em, 1000em, 2.361em, -0.335em); top: -2.253em; left: 0em;"><span id="MathJax-Span-68" class="mrow"><span id="tempstyle" class="mstyle"><span id="MathJax-Span-70" class="mrow"><span id="MathJax-Span-71" class="mrow"><span id="cb-945670-9-96" class="mfrac"><span style="display: inline-block; position: relative; width: 0.421em; height: 0px; margin-right: 0.12em; margin-left: 0.12em;"><span style="position: absolute; clip: rect(1.814em, 1000em, 2.527em, -0.377em); top: -2.769em; left: 50%; margin-left: -0.17em;"><span id="MathJax-Span-73" class="mrow"><span style="font-size: 70.7%; font-family: STIXMathJax_Main; font-style: italic;" id="MathJax-Span-74" class="mi">g</span></span><span style="display: inline-block; width: 0px; height: 2.253em;"></span></span><span style="position: absolute; clip: rect(1.814em, 1000em, 2.381em, -0.351em); top: -1.909em; left: 50%; margin-left: -0.149em;"><span id="MathJax-Span-75" class="mrow"><span style="font-size: 70.7%; font-family: STIXMathJax_Main; font-style: italic;" id="MathJax-Span-76" class="mi">r<span style="display: inline-block; overflow: hidden; height: 1px; width: 0.016em;"></span></span></span><span style="display: inline-block; width: 0px; height: 2.253em;"></span></span><span style="position: absolute; clip: rect(0.882em, 1000em, 1.19em, -0.383em); top: -1.293em; left: 0em;"><span style="border-left: 0.421em solid; display: inline-block; overflow: hidden; width: 0px; height: 1.25px; vertical-align: 0em;"></span><span style="display: inline-block; width: 0px; height: 1.063em;"></span></span></span></span></span></span></span></span><span style="display: inline-block; width: 0px; height: 2.253em;"></span></span></span><span style="border-left: 0em solid; display: inline-block; overflow: hidden; width: 0px; height: 0.568em; vertical-align: -0.028em;"></span></span></nobr></span><script id="MathJax-Element-8" type="math/mml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="inline"><mstyle mid="tempstyle" id="tempstyle"><mrow><mfrac linethickness="thin" id="cb-945670-9-96"><mrow><mi>g</mi></mrow> <mrow><mi>r</mi></mrow></mfrac></mrow></mstyle></math></script></span>

[Murray]

Hi

Please provide a link to a live page which exhibits the problem, otherwise it's difficult to pinpoint the issue and help you.

See the guidelines at :https://groups.google.com/forum/#!topic/mathjax-users/Dhk3bQgThaM

Regards

Murray

[friends...@gmail.com]

Thanks for Reply Murray. The site i am working isn't yet published on the internet. so i will try to describe the issue as elaborated as possible here.
I have attached the static html file attached. I have identified the problem is with the below style.

clip: rect(1.74em, 1000em, 2.361em, -0.335em)

Height and width are getting calculated wrongly here. Any inputs how we control the above style. See attached html for the style above mentioned.

Ask me if you need any more details.

Thanks for your help.

Regards
Satish M

[Peter Krautzberger]

Hi Satish,

I'm afraid, capturing the output only shows that something went wrong. 

Please try to create a minimal example on a live page where MathJax runs. People usually go for free services like jsbin or codepen to quickly share examples. While we can only guess, this is probably due to some bad interaction of the surrounding CSS or JavaScript with MathJax.

Regards,

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Davide P. Cervone]

> While we can only guess, this is probably due to some bad interaction of the surrounding CSS or JavaScript with MathJax.

And a likely suspect for that interaction is that the mathematics is initially loaded into an container that has display:none, then processed by MathJax, then revealed by changing display:none to something else. MathJax can't measure things properly when a container has display:none, and that can lead to the kinds of problems you are seeing. We can't tell if your setup has this problem from the information you have given.

Davide

[friends...@gmail.com]

Here is the jsbin link

http://jsbin.com/zixahuhezisa/5/

Appreciate

[friends...@gmail.com]

---------- Forwarded message ----------
From: Davide P. Cervone <>
Date: Tue, Sep 2, 2014 at 12:40 PM
Subject: Re: [mathjax-users] Re: Formula is getting clipped.
To:


OK, the problem is actually in your MathML.  You have multiple tags with the same id.  For example, your first equation is

        <span id="formula0">

          <math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">

            <mstyle id="temp style">
              <row><mo>=</mo></mrow>
            </mstyle>
          </math>
        </span>

and your second is

        <span id="formula0">

          <math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">

            <mstyle id="temp style">
              <mrow>
                <mfrac linethickness="thin">

                  <mrow><mi>g</mi></mrow>
                  <mrow><mi>r</mi></mrow>
                </mfrac>
              </mrow>
            </mstyle>
          </math>

        </span>

where I've removed some attributes that are not needed for this explanation.

Note that both <mstyle> tags are listed with id="tmp style".  Id's however, must be unique within a page, so you can't have two tags with the same id.  (Similarly, note that both <span>'s have the same id, as "formula0".)  The same is true in all your other equations.

MathJax retains the id's of the underlying MathML in the HTML that it generates, so this means the HTML also has duplicate ID's.  MathJax also uses id's to locate the various elements on the page (for purposes like measuring them), and so in the second (and subsequent) equations, when MathJax calls for the <mstyle> but its id, it actually gets the <mstyle> from the FIRST equation instead.  That means that when MathJax computes the size of the <mstyle>, it gets the size of the FIRST equation, not the second one.  The first equation is just an equal sign, so the size is that of the equal sign, not the fraction that is the actual second equation.  So MathJax clips to that size rather than the size of the fraction.

The solution is to make sure you have unique id's in your MathML, as is required by HTML.

Davide

PS, note that we could not have determined the solution t0 your problem from the information you originally gave, and that the live example was critical to the analysis of your situation.  That is why we ask for such things, and why we frequently can't answer peoples questions without it.