search

gerby-project / gerby-website

Tag-based webview of LaTeX documents
MIT License
28 stars 22 forks source link

Placement of the equation numbering #111

Closed aisejohan closed 5 years ago

aisejohan commented 6 years ago

It is not at the same height as the content of the equation. A good example is 0EM1.

pbelmans commented 6 years ago

I'm not sure that it works 100% with really wide equations, but then again, those get too much scrolling space anyway.

aisejohan commented 6 years ago

Beautiful! Dank je wel.

aisejohan commented 5 years ago

This issue is back. See for example 0D82 or 0EM1. I am not sure whether this is due to gerby-website or due to something in plastex. Can you guys help @chngr @pbelmans ?

aisejohan commented 5 years ago

A particularly bad example is tag 00V1 because you can see how on the next line the text is indented for no reason... I tried changing the css in tag.css to bring it in line with the way thinks work in kerodon-website but that didn't work.

chngr commented 5 years ago

So the issue is that MathJax rendering happens after the browser decides to place things via the CSS stylesheet. As a result, the placement is correct when the page is first loaded, when MathJax has not finished working yet, but when the mathematics is rendered and displayed, math that is long in LaTeX but not long when compiled now takes much less room than before, and when the text is reflowed, for some reason, the span element corresponding to the equation label is does not move with it.

To see what I mean, in any of the examples, you can try inspecting the equation labels after the mathematics is rendered and then toggling the padding-top property. That will snap the equation label into the expected place.

One possible fix would be to add a hook to the MathJax processor that adjusts the padding-top property for #equation-label only after it is done rendering mathematics.

aisejohan commented 5 years ago

OK, I edited the file tag.css and now it looks better online. The diff of what is online now versus current git is attached here tag.css.txt

aisejohan commented 5 years ago

Of course, it doesn't work completely. For some minor problems see for example 05IX where the equation number should be placed in the middle and 05MI where the same problem occurs.

pbelmans commented 5 years ago

I think the following might be a good solution:

div.html div.equation {
  display: flex;
  align-items: center;
}

div.html div.equation span.equation-label {
  float: left;
  margin-right: 1rem;
}

I'll check some more cases now.

pbelmans commented 5 years ago

With

p + div.equation {
  margin-top: -1rem;
}

added in the mix it seems to be fine. Shall I commit this, so that you can test this live?

aisejohan commented 5 years ago

Yes, please! Don't forget to push to github! Thanks very much to both of you!

aisejohan commented 5 years ago

Unfortunately this doesn't quite work as now the actual content of the equation is no longer centered horizontally.... Sigh!

pbelmans commented 5 years ago

Ah yes, good point! I left align my equations usually, so I didn't notice :).

It seems to be fine now, and it seems to work interact correctly with overflow etc. (but I didn't check every possible equation in the Stacks project).

aisejohan commented 5 years ago

OK, wonderful! An example where it now look great is this page. Thanks very much!

aisejohan commented 5 years ago

OK, I have made a change in gerby website in order to deal with some fallout from these changes to the vertical spacing around equations. See 0d311dc07988482794b3219e70ac5c6aeabf8e6d