Page MenuHomePhabricator

Long math output unreadable on small screens due to scrolling off the side of screen
Open, MediumPublic

Description

Generally speaking, it's a lot better to be able to see a full expression than to have it all on the same line, so we probably want to add some sort of wrapping support to the rendered latex output.

Event Timeline

Yes, definitely. This would also solve part of T194768. With JS and Mathjax you can get this functionality easily, however in Wikipedia it seems to be a huge problem because most people get to see the math as images rather than text. We are trying to come up with a solution and would need some input from developers, see T195861.

Generally speaking, it's a lot better to be able to see a full expression than to have it all on the same line

That does not match my experience.

From a technical point of view, line-breaking equational content is a difficult problem and traditional approaches focus on print layout, often causing problems on the web (e.g., tolerating partial overflow). At MathJax we did quite a bit of research into alternative ideas and implemented a collapsing/expanding feature (which you can test on any MathJax enabled site). But that's a hard UX change and this space has not been explored much.

From a content point of view, breaking large pieces equational content can very quickly cause confusion as the content suddenly spreads across multiple (vertical/other-direction) viewports. Some of the examples at https://en.wikipedia.org/wiki/User:Salix_alba/maths2018 might be useful to think about.

For example, large expressions often have table(-like) structures which cannot be line-broken at all; similarly, manual linebreaks cause confusion when adding automatic ones.

It's not that it can't be done (even server-side) but it is usually better handled on the authoring level, i.e., if equational content requires linebreaks, then perhaps it would benefit from improving it.

I sort of agree with @Pkra. There is this myth that all content should be scalable to a mobile viewport. But that is just insane when you deal with things like huge tables, graphs and indeed formulas. Especially data tables are impossible to make responsive without taking an per table approach, which will never be done for more than the 10% of most popular stuff (and specifically for tables I haven't seen a responsive technique which doesn't destroy the semantics of the table structure in the process and can deal with row/colspans etc, which creates an accessibility concern). And then you still need fallbacks for all the other cases that no one bothered with.

Instead things should be made zoomable, scrollable etc. Just like an image gallery, a map etc. Dedicated interaction UI per type of content (aka per extension / per skin). In this case, i'd love for it to detect that it is overflowing, to indicate to the user that it is overflowing, to make it clickable to turn it modal, and then to have a scrollable and zoomable surface to inspect the element. I've proposed this a couple of times now, but it seems to be too minor a problem to get it prioritised.

BTW. The minerva skin makes the math images scrollable when overflowing. (but it doesn't have indicators for when content is overflowing, making it hard to predict what elements you should scroll. This is one of my biggest annoyances with minerva actually)

@alexhollender - any thoughts on the suggestions here? In particular, I think adding an indicator as @TheDJ suggested could be a good way to do this

Instead things should be made zoomable, scrollable etc. [...]

They are scrollable right now, I think. (Though mobile browser UIs tend to hide scrollbars.)

In this case, i'd love for it to detect that it is overflowing, to indicate to the user that it is overflowing, to make it clickable to turn it modal, and then to have a scrollable and zoomable surface to inspect the element.

👍 It's not easy to do this well, e.g., accessibly.

I think one has to differentiate: Of course there are large formulas which cannot be broken and need some scrolling mechanism. Most formulas however have a structure like <math>A=B+C+D</math> which you can break almost everywhere if necessary. Wikipedia authors currently have a choice between

  • Adding permanent linebreaks or splitting the expression up in smaller chunks which means making it less readable by wasting space on large screens and/or introducing unnecessary artificial names for parts of the sum
  • Not adding any linebreaks, making the expression unreadable on small screens or introducing unnecessary scrolling or zooming.
  • Adding linebreaks like
First sentence
:<math>A</math><math>\;=B</math><math>\;+C</math>{{nowrap|<math>\;+D</math>.}}
Next sentence.

to force a correct linebreaking behaviour and an equal looking punctuation mark.

I don't really like the last "solution" which unfortunately gets more and more popular among Wikipedia editors. Why should the LaTeX way, where you can modify the line breaking penalties with dedicated macros if necessary be unsuitable for Wikipedia?

So basically we just need a cleaner way for editors to define potential breakpoints - which LaTeX normally provides anyway?

Most formulas however have a structure like <math>A=B+C+D</math> which you can break almost everywhere if necessary.

The example nicely shows that one could but should not break everywhere (e.g., most people don't like a line to start with = or +).

In any case, it's feasible to automatically generate rendering into several blocks that then relow individually (generally speaking using MathJax, not with the Math Extension as is).

Having done research in this area, I'd just caution that this kind of reflow can be worse than consistently moving a longer inline expressions to the next line is.

It sounds like there are some common symbols/whatever that probably would make for safe assumed breakpoints, though - maybe look into if this is truly the case, for some general default handling for which those blocks should be?

ovasileva triaged this task as Medium priority.Aug 9 2018, 7:13 PM

See also my comments at https://phabricator.wikimedia.org/T166428#4805581.

Again, this is non-trivial and some equations cannot be broken up (e.g., a long expression within a single fraction).

Would it be possible to add some facility for wiki authors explicitly describe two versions of the formula for different sized displays?

My experience is that usually the best results are achieved for math formulas in a narrow display with deliberate formatting (where to break, how alignment should work, etc.) rather than any kind of automatic line breaks.

Much of the time some kind of automatic line breaking tool could provide a more-or-less acceptable output, but it would be great if authors could, for cases where that breaks down, just write out an entirely separate fallback expression for the formula optimized for a narrow view.

Would it be possible to add some facility for wiki authors explicitly describe two versions of the formula for different sized displays?

My experience is that usually the best results are achieved for math formulas in a narrow display with deliberate formatting (where to break, how alignment should work, etc.) rather than any kind of automatic line breaks.

Much of the time some kind of automatic line breaking tool could provide a more-or-less acceptable output, but it would be great if authors could, for cases where that breaks down, just write out an entirely separate fallback expression for the formula optimized for a narrow view.

We can find a solution for that. Optimally a LaTeX command for conditional line breaks. However, I am uncertain if authors would use that.
@jacobulus are you an author of math formula? What effort would be acceptable for you?