forcing alignment on \[ ... \] content

Francois Chaplais

unread,

Feb 18, 2022, 12:31:37 PM2/18/22

to MathJax Users

This is related to the eqnarray environment.

Generally speaking, I wish to handle equation numbering, and related \href{}, on my own.

In the case of an eqnarray environment, I would use a table object in HTML to layout the equations and numbering.

I also would like to have an equation rendering, by contrast to an inline (LR) rendering.

The trouble is that I cannot align the content of the \[ ... \] through CSS, because it is centered as for an equation.

Can you help me?

TIA,

François

Davide Cervone

unread,

Feb 18, 2022, 6:51:14 PM2/18/22

to mathja...@googlegroups.com

You could use

\(\displaystyle{...]\)

instead, which will typeset using displayed-equation rules, but as an in-line expression.

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.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/5979863c-2d35-4240-b0c7-0c6c27655532n%40googlegroups.com.

Francois Chaplais

unread,

Feb 19, 2022, 11:21:12 AM2/19/22

to MathJax Users

The best code I have come up with so far is:

CSS:

.eqnarray {
width: 100%;
}
table.eqnarray td:nth-child(1) {
text-align: end;
}
table.eqnarray td:nth-child(2) {
text-align: center;
width: 30px;
}
table.eqnarray td:nth-child(3) {
text-align: left;
}
table.eqnarray td:nth-child(4) {
text-align: end;
}
HTML

<table class="eqnarray">
<tr>
<td>\( \displaystyle{\frac{dx}{dt}} \)</td>
<td>\( = \)</td>
<td>\( f(x,u,t) \)</td>
<td>\( (1)\)</td>
</tr>
<tr>
<td>\( y\)</td>
<td>\( =\)</td>
<td>\( h(x,u,t) \)</td>
<td>\( (2)\)</td>
</tr>
</table>

-----

Not quite like what you get with a regular eqnarray, but not bad.

All the best

François

Davide Cervone

unread,

Feb 20, 2022, 8:13:51 AM2/20/22

to mathja...@googlegroups.com

I would recommend something more like the following:

.eqnarray {
width: 100%;
border-collapse: collapse;
}
table.eqnarray tr {
vertical-align: baseline;
}
table.eqnarray td:nth-child(1) {
text-align: right;
width:50%;

}
table.eqnarray td:nth-child(2) {
text-align: center;
}

table.eqnarray td:nth-child(3) {
text-align: left;

width:50%;
}
table.eqnarray td:nth-child(4) {
text-align: right;
}

and using \({}={}\) for the equal sign in order to get the spacing correct. This will perform something like centering (the equal sign will be centered in the space to the left of the equation numbers). This is not quite what MathJax (or LaTeX) does, but it is better than what you had originally. There are two problems with this approach. First, the centering isn't in the the full 100% width, but in the width minus the wide of the tags, so equations with different tags will be centered differently, and that will be noticeable, and second, the centering is on the equal sign, not the full equations.

If you re willing to add a little more to your table structure, you can do better:

<!DOCTYPE html>
<html>
<head>
<title>Test eqnarray</title>
<style>
.eqnarray {
width: 100%;
border-collapse: collapse;
}
table.eqnarray tr {
vertical-align: baseline;
}
table.eqnarray td:nth-child(1) {
width:50%;
}
table.eqnarray td:nth-child(2) {
text-align: right;
}
table.eqnarray td:nth-child(3) {
text-align: center;
}
table.eqnarray td:nth-child(4) {
text-align: left;
}
table.eqnarray td:nth-child(5) {
width: 50%;
}
table.eqnarray td:nth-child(6) {
text-align: right;
width: 0;
max-width: 0;
}
table.eqnarray td:nth-child(6) > * {
margin-left: -10em;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>

<table class="eqnarray">
<tr>
<td></td>

<td>\( \displaystyle{\frac{dx}{dt}} \)</td>
<td>\({} = {}\)</td>
<td>\( f(x,u,t) \)</td>

<td></td>

<td>\( (1)\)</td>
</tr>
<tr>

<td></td>

<td>\( y\)</td>
<td>\({} ={}\)</td>
<td>\( h(x,u,t) \)</td>

<td></td>

<td>\( (2)\)</td>
</tr>
</table>

</body>
</html>

This introduces to extra table cells that do the centering, and makes the cell fo the tag be 0-width with the tag lapping over on the left (but taking up not horizontal space).

I'm curious, however, why the MathJax tags and labels are not sufficient for your use. The tagformat extension provides a lot of control over the structure and text of the tags and their anchors, so I'm wondering what is insufficient with that for your needs. Also, you will probably need to disable the \tag, \notag, \nonumber, \label, and \ref macros, unless you plan to honor those in your output. Seems like a lot of work to go through to duplicate functionality that is already available.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/7e6e2165-f127-4ace-8e59-17147f467281n%40googlegroups.com.

David Farmer

unread,

Feb 20, 2022, 8:22:04 AM2/20/22

to mathja...@googlegroups.com

Doesn't the table structure around the equations ruin the accessibility?

> To view this discussion on the web visithttps://groups.google.com/d/msgid/mathjax-users/7e6e2165-f127-4ace-8e59-17147f467281n%40googlegr
> oups.com.

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

> To view this discussion on the web visithttps://groups.google.com/d/msgid/mathjax-users/797CDC84-F5E2-4838-A559-960BF9BA531A%40gmail.com
> .
>
>

Davide Cervone

unread,

Feb 20, 2022, 10:24:11 AM2/20/22

to mathja...@googlegroups.com

Absolutely. I had meant to mention that, and forgot. Thanks for reminding me.

Davide

> To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/alpine.LRH.2.21.2202200821030.19148%40li375-150.members.linode.com.

Francois Chaplais

unread,

Feb 21, 2022, 5:14:51 AM2/21/22

to MathJax Users

First thing, I do not know much about the innards of Mathjax, this is why I am seeking advice here.

Second thing, manually implementing eqnarray alignment is not a priority to me. If there is a problem with accessibility, I will not do it.

What I want to do is something like the following:

when a user clicks on an \href item, instead of being taken to where the original reference is (and thus losing context),

I want the content of the referenced object to be displayed as close as possible to the reference itself, that is,

where the attention of the reader is currently. This would be typically a dedicated div after the paragraph.

To do so, I need to have some control on how the DOM is generated.

However, if I can get sufficient info on how Mathjax generates its DOM elements, I will be glad to use it.

Best regards,

François

David Farmer

unread,

Feb 21, 2022, 7:04:56 AM2/21/22

to MathJax Users

Dear François,

The feature you are describing is offered by knowls, as implemented
in PreTeXt.

See the displayed formula in the paragraph and the following paragraph
at the link below.
That page is just to demonstrate the feature, so don't pay attention
to the actual content.

https://pretextbook.org/examples/sample-article/html/section-7.html#p-299

There are two things needed to make it work: the JavaScript which fetches
and displays the information, and a MathJax extension to enable knowls
in a formula. You could copy what PreTeXt does and implement it yourself,
or if you are writing a book you might want to consider writing it in
PreTeXt. French is one of the languages supported by PreTeXt:

https://juliengiol.github.io/mea/mea.html

Regards,

David

On Mon, 21 Feb 2022, Francois Chaplais wrote:

>
> First thing, I do not know much about the innards of Mathjax, this is why I am seeking advice

> here.Second thing, manually implementing eqnarray alignment is not a priority to me. If there is

> >> To view this discussion on the webvisithttps://groups.google.com/d/msgid/mathjax-users/7e6e2165-f127-4ace-8e59-17147f467281n%40goo
> glegr
> >> oups.com.
> >> --

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

> >> To view this discussion on the webvisithttps://groups.google.com/d/msgid/mathjax-users/797CDC84-F5E2-4838-A559-960BF9BA531A%40gmai
> l.com
> >> .
> >>
> >
> > --

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

> > To view this discussion on the web visithttps://groups.google.com/d/msgid/mathjax-users/alpine.LRH.2.21.2202200821030.19148%40li375-150.
> members.linode.com.

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

> To view this discussion on the web visithttps://groups.google.com/d/msgid/mathjax-users/15efbcea-de08-477e-9142-f6372ee283acn%40googlegr
> oups.com.
>
>

Francois Chaplais

unread,

Feb 21, 2022, 7:38:28 AM2/21/22

to MathJax Users

Thank you very much to all of you.

I will look into this.

All the best

François

Reply all

Reply to author

Forward