Is there a way to adjust SVG output align?

[Jinjun He]

Hello,

I use MathJax SVG output in my mobile project and below is my MathJax config:

<script type="text/x-mathjax-config">

    MathJax.Hub.Config({

        jax: ["input/TeX", "output/SVG"],

        styles: {

            "div .MathJax_SVG_Display": {

                "display": "inline!important"

            },

            ".MathJax_SVG svg > g, .MathJax_SVG_Display svg > g": {

                fill: "#4d4d4d",

                stroke: "#4d4d4d"

            }

        },

        extensions: ["tex2jax.js"],

        TeX: {

            extensions: ["AMSmath.js", "AMSsymbols.js", "noErrors.js", "noUndefined.js"]

        },

        showMathMenu: false,

        "SVG": {

            linebreaks: {

                automatic: true,

                width: "container"

            },

            scale: 80

        }

    });

    </script>

My Latex code is: $$1-2-3+4+5-6-7+8+9-10-11+12+\cdots +1997-1998-1999$$．

HTML code:

<div style="background: #6FE067;width: 100%;">

        <p>$$1-2-3+4+5-6-7+8+9-10-11+12+\cdots +1997-1998-1999$$．</p>

</div>

SVG linebreaks option automatic is true and the width  is same as container width. the output SVG already break my latex code  into two lines.but the second line text is almost align center.  

so is there a way to adjust the align for the second line? I want to align left for the second line.

ps. I use the latest MathJax.

Thanks!

[Peter Krautzberger]

Hi,

>  "div .MathJax_SVG_Display": { "display": "inline!important" },

Don't do this. It will break things. Messing aggressively with MathJax's CSS is a bad idea.

>  I want to align left for the second line.

You seem to want to left-align all display equations. So you're probably after the displayAlign config option, see http://docs.mathjax.org/en/latest/options/hub.html?highlight=displayalign.

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.

[Jinjun He]

Thank you Peter. displayAlign is what I want to display equations. 

I tried to find answer in http://docs.mathjax.org/en/latest/options/SVG.html .Thank you so much to point the answer in http://docs.mathjax.org/en/latest/options/hub.html?highlight=displayalign.

I use "div .MathJax_SVG_Display": { "display": "inline!important" } because all of my equations translate by the MathType editor from Microsoft Word are  display equations. But in browser, I want to display all of my equations inline.

My customers say some display equations render better and bigger than inline equations. like \int_{1}^{2}:

How can I more elegant fix for this issue?

Thanks!

[Peter Krautzberger]

Hi,

There is probably an easy workaround but you might want to post a live sample, e.g. on Jsbin or codepen.

Regards,
Peter.

[Jinjun He]

Hi Peter,

Here is my live sample http://jsbin.com/catacuxuhe/edit?html,output . Thank you so much !

[Peter Krautzberger]

Hi,

It's not clear what your workflow is generating.

As your example shows, display vs inline in the TeX input primarily depends on the delimiters ($ vs $$ in your example).

Regards

Peter.

[Jinjun He]

Hi Peter,

maybe http://jsbin.com/biyixikoge/edit?html,output can describe my question more clearly.

[Davide P. Cervone]

If you want to have inline math typeset as though it were display style, you can do that by using inline delimiters and wrapping the math in \displaystyle{...}, e.g., 

$\displaystyle{a=\int_1^2 2^x \,\text{d}x}$

If you are generating your math via some program, perhaps you can get the program to insert those for you automatically.  If not, you can have MathJax do it automatically by adding

<script type="text/x-mathjax-config">

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {

  MathJax.InputJax.TeX.prefilterHooks.Add(function (data) {

    if (!data.display) {data.math = "\\displaystyle{"+data.math+"}"}

  });

});

</script>

to your HTML file BEFORE the script that loads MathJax.js.

Davide

[Jinjun He]

Hi Davide,

Thank you,  \displaystyle{...} is work for me. I will change my workflow to generate inline equations and replace all of my display equations to inline equations, because with  \displaystyle{...} I don't need to generate display equations any more.

By the way, 

<script type="text/x-mathjax-config">

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {

  MathJax.InputJax.TeX.prefilterHooks.Add(function (data) {

    if (!data.display) {data.math = "\\displaystyle{"+data.math+"}"}

  });

});

</script>

Dose this config above effect render speed or performance?

Thank your answer!

[Peter Krautzberger]

> Dose this config above effect render speed or performance?

It will very very slightly affect performance; I doubt your readers will notice the difference.

Regards,

Peter.

--

[Jinjun He]

Hi Peter，

Maybe this is the best choice for me although affect performance. I just think about use MathJax-node for server  side rendering  in my next project. Thank you !