padding for equations for fractions

88 views
Skip to first unread message

Ramakrishna Salagrama

unread,
Apr 16, 2017, 1:45:33 AM4/16/17
to MathJax Users
Hi, 

Is there anyway that we can created some padding above for equations.  If two lines have fractions then they appear to be overlapping.  How can I create some automatic padding?  

Thanks and Regards,
Ramakrishna
Untitled.png

Davide Cervone

unread,
May 19, 2017, 10:33:05 AM5/19/17
to mathja...@googlegroups.com
You do not give the TeX or MathML code that you are using to produce the result, so it is not easy to tell you what to do to obtain the desired result, but if you are using \\ as a line break, you can use \\[5px] to add 5px of additional space between the lines.  Of course, you can us any distance you want.  That might do what you need.

Davide


--
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.
<Untitled.png>

Ramakrishna Salagrama

unread,
May 29, 2019, 4:53:40 AM5/29/19
to MathJax Users
Hi, 

After long time, I am focussing on this issue.  Please check this page and two equations are very close to each other. Is there anyway to add padding above and below the fractions?


I am using the following code:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
"HTML-CSS": { scale: 90},
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"], 
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
messageStyle: "none",
}); </script> 

Thanks in advance.

Regards, 
Ramakrishna


On Friday, 19 May 2017 20:03:05 UTC+5:30, Davide Cervone wrote:
You do not give the TeX or MathML code that you are using to produce the result, so it is not easy to tell you what to do to obtain the desired result, but if you are using \\ as a line break, you can use \\[5px] to add 5px of additional space between the lines.  Of course, you can us any distance you want.  That might do what you need.

Davide


On Apr 16, 2017, at 1:45 AM, Ramakrishna Salagrama <ramakrishn...@gmail.com> wrote:

Hi, 

Is there anyway that we can created some padding above for equations.  If two lines have fractions then they appear to be overlapping.  How can I create some automatic padding?  

Thanks and Regards,
Ramakrishna

--
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 mathja...@googlegroups.com.

Davide Cervone

unread,
May 29, 2019, 7:55:08 AM5/29/19
to mathja...@googlegroups.com
Try adding a \strut to the denominators of the fractions.  E.g., try

    \displaystyle\frac{{SP - CP}}{{CP\strut}} \times 100 = \frac{{Profit}}{{CP\strut}} \times 100

and see if that does what you need.



To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/298f03f4-1aaa-47db-a14f-2f3b1c69cd93%40googlegroups.com.

Ramakrishna Salagrama

unread,
May 29, 2019, 1:19:23 PM5/29/19
to MathJax Users
Hi,

I used \strut command and it has increased space slightly. But I have thousands of equations on my site. Is there any thing that can be achieved through mathjax hub config?

Thanks and Regards, 
Ramakrishna
To unsubscribe from this group and stop receiving emails from it, send an email to mathja...@googlegroups.com.

Davide Cervone

unread,
May 30, 2019, 10:33:50 AM5/30/19
to mathja...@googlegroups.com
Well, if you change to the CommonHTML output jax by using


(CHTML rather than HTML), and then change your configuration to

MathJax.Hub.Config({
    CommonHTML: {
        styles: {'.mjx-chtml': {padding: '3px 0'}},
        scale: 90
    },
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
    messageStyle: "none",
    showMathMenu: false,
});

that will put 3px of extra padding on the top and bottom of all MathJax expressions.  That will apply to ALL expressions, even those without fractions, so it may cause the line separation to be uneven in paragraph that contain math.  Alternatively, you could use 

styles: {'.mjx-mfrac': {padding: '3px 0'}}

instead to add 3px top and bottom to all fractions (even if they are fractions of fractions, or in superscripts, etc.).  This will probably produce some bad looking results.

Perhaps one of those will work for you.

Davide


To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/c407c9b8-7d8f-4655-bdbc-b0845b267e64%40googlegroups.com.

Ramakrishna Salagrama

unread,
May 30, 2019, 2:58:36 PM5/30/19
to MathJax Users
Hi Mr.Davide, 

The code really worked well and Equations are looking very elegant with adequate spacing between them.   I used 6px padding. 

Thanks a ton. 

Regards, 
Ramakrishna
Davide


Davide Cervone

unread,
May 30, 2019, 3:01:28 PM5/30/19
to mathja...@googlegroups.com
Glad it worked out for you!

Davide



To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/69bd65db-864a-4a53-8412-0c92c8f6946c%40googlegroups.com.

Ramakrishna Salagrama

unread,
May 30, 2019, 3:11:35 PM5/30/19
to MathJax Users
Hi, 

I noticed a small problem with equation sizing.  I am using html buttons to hide some content. The content outside the button is appearing bigger and content inside the button is appearing smaller.  I am still ok with it. But please check why this is happening. This happened on mobile. But on desktop there is no problem. I checked on both chrome and brave browser.

Regards, 
Ramakrishna
Screenshot_2019-05-31-00-34-33-007_com.brave.browser.png

dr.j.r....@gmail.com

unread,
May 30, 2019, 3:59:25 PM5/30/19
to MathJax Users


On Thursday, 30 May 2019 19:58:36 UTC+1, Ramakrishna Salagrama wrote:

> The code really worked well and Equations are looking very elegant with adequate spacing between them.   I used 6px padding. 

If your equations use an ordinary sort of font, it might be better
to size your padding in 'ex' units.  Then there should always be an
appropriate amount of padding, even if the page is displayed as
a few lines on a screen such as 16384 x 11600 and also if the font
is increased to 48pt on a normal-sized screen.
Spacing related to characters should be in ex or em or similar;
spacing related to images should be in px or similar, except
when the images have been scaled in ex or em or similar;
except sometimes.

Remember that in at least one browser (Firefox) one can set
Zoom Text Only, which generally zooms writing but not pictures.
I like it.

Euler wrote a paper, "De motu rectilineo trium corporum se mutuo
attrahentium", in which he used not only (IIRC) the ordinary Greek
beta character but also an ancient form of beta, both mathematically
equivalent.  Evidently the printer had the ordinary beta in
sufficient abundance, but no ancient ones.  So he printed spaces
instead, in each of which was hand-written an ancient beta.  One
could see that each ordinary character, including Greeks, was the
same (near enough) throughout, as expected for the printing of
those days - but the ancient betas were all a bit different, as
one would expect for the handwriting of a non-calligraphist printer.

So, when I had translated the paper (with the aid of
news:alt.language.latin), I screen-captured a good ancient
beta into a .PNG file, sized it with 'style="width:0.57em;"' and
put it in plain text for information.  It maintains the proper
size of the adjacent text, for all amounts and types of Zoom.
Copy attached, maybe.
-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |
OLD-BETA.PNG

Ramakrishna Salagrama

unread,
May 31, 2019, 1:43:08 AM5/31/19
to MathJax Users
Hi,

I found that this problem is occuring with chtml. Equation sizes are same with html-css. I don't know what is causing this sizing issue.

Regards,
Ramakrishna

Ramakrishna Salagrama

unread,
May 31, 2019, 4:54:19 AM5/31/19
to MathJax Users
Hi, 

When I inspected the elements outside the button and inside the button, there is a style attribute which is controlling the equation size. Please check the equations in side the button and outside. 


Style Attribute {
    font-size: 115%;
    position: relative;
}

Style Attribute {
    font-size: 106%;
    position: relative;
}

Equations outside the Spoiler button, are bigger and equations inside the button are smaller.  Is the font size dynamic and decided by mathjax script?

Regards, 
Ramakrishna

Davide Cervone

unread,
May 31, 2019, 2:47:41 PM5/31/19
to mathja...@googlegroups.com
The answer boxes are initially in containers that are set to have display:none.  Because the browser doesn't lay out elements with display:none, MathJax is not able to measure the font sizes within those containers.  This means MathJax uses some defaults to handle those expressions, and in your case, those values are different from the sizes that get used in the (unhidden) text, where MathJax can accurately determine the size of the surrounding text.

There are two possible solutions:

  1. Once the answer has been revealed, use MathJax.Hub.Queue(["Serenader", MathJax.Hub, "id"]) after you display the answer container, where "id" is the id of the container that you just opened.  That will cause MathJax to re-render the math that has been revealed, and since it is no longer display:none, it will be able to get the correct sizes.

  2. Don't use display:none to hide the answer, but instead use something like

            visibility:hidden; height: 1px; width: 1px; overflow: hidden; padding: 0; margin: 0; border: none; position: absolute; left: 10px; top: 0;

    to make the element invisible, but still allow MathJax to take measurements.  You can make a CSS class that has these values (called "hidden" for example), and have your "Show Answer" and "Show Explanation" buttons and/remove the "hidden" class from the elements rather than setting the display:none style directly.

Either of those should get you the same size in both cases.

Davide


To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/2132b40d-fb31-4e5d-b4df-ff3a6edbe714%40googlegroups.com.

Ramakrishna Salagrama

unread,
Jun 1, 2019, 7:47:30 AM6/1/19
to MathJax Users
Hi Davide,

Thank you for your patience reply. As I am not a programmer, your suggestions are difficult to implement by myself. Is there anyway that I can create padding with html-css?

Thanks and regards,
Ramakrishna

Davide Cervone

unread,
Jun 1, 2019, 8:16:30 AM6/1/19
to mathja...@googlegroups.com
The issue actually affects both output renderers (for me, I'm seeing font-size:122% outside the answers, and font-size:118% inside the answers when HTML-CSS is used).  This is because MathJax can't measure the fonts inside the display:none container no matter which renderer is being used.  Whether the difference is significant can depend on the browser and its settings.  So switching to HTML-CSS does not mean that the sizes will be the same in both cases.

One possible alternative, if you can't change the coding yourself, is to prevent MathJax from doing automatic size matching (so that it will not try to scale the math to match the surrounding font), and then set the scaling factor by hand.  For example:

MathJax.Hub.Config({ 
    CommonHTML: { 
        styles: {'.mjx-chtml': {padding: '6px 0'}},
        matchFontHeight: false,
        scale: 115
    }, 
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}, 
    messageStyle: "none", 
    showMathMenu: false, 
}); 

The scaling factor may depend on the browser and its settings, so 115 may not be the best value for everyone, but at least it will be consistent in the two locations.

Finally, it looks like auto-correct distorted the code I gave you.  It should be

MathJax.Hub.Queue(["Rerender", MathJax.Hub, "id"])

not

MathJax.Hub.Queue(["Serenader", MathJax.Hub, "id"]) 

in case anyone else needs this.  Sorry I didn't catch that initially.

Davide



To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/2132b40d-fb31-4e5d-b4df-ff3a6edbe714%40googlegroups.com.

Ramakrishna Salagrama

unread,
Jun 1, 2019, 9:55:34 AM6/1/19
to MathJax Users
Hi Davide,

matchFontHeight: false, piece of code worked well with scale set to 105.  It is consistent. So far so good. 

Thanks a lot. 

Ramakrishna.
Reply all
Reply to author
Forward
0 new messages