\tag is expected to be always flushed at right when equation is overflowed

[astroHaoPeng]

Before reporting a bug

• [x] Check common issues.
• [x] Check the bug is reproducible in the demo. If not, check KaTeX is up-to-date and installed correctly.
• [x] Search for existing issues.

Describe the pool rendering: For a long equation set to overflow-x: auto, the right-end \tag{} will overlap and scroll with the equation. You can use Eqs. 7.85 and 7.86 as a test case (with a narrow window), available here.

// allow katex equations scrolling horizontally, without vertical scrollbar
.katex-display > .katex {
    height: auto;
    overflow: hidden;
    overflow-x: auto;
}

Expected behavior: The \tag will be flush right no matter the equation is scrollable or not. I'm not familiar with CSS. I tried to play around

.katex-display>.katex>.katex-html>.tag {
    position: absolute;
    right: 0;
}

A feature of position mixturing absolute and static should be perfect. sticky doesn't fit in current setting, it is a mixturing of relative and fixed as I understand.

[astroHaoPeng]

Sorry that I do not know how to remove the bug label. This is not a bug, just a small defect.

[invkrh]

I have the same \tag problem here. Any idea on this?

[kevinbarabash]

I think we can solve the issue by introducing a new wrapper around everything before the .tag inside of .katex-html. The tricky part though is keeping this new wrapper centered on the page while not allowing it to overlap the tag.

[martinpflaum]

Hello

.katex-display > .katex {
height: auto;
overflow: hidden;
overflow-x: auto;
}
.katex-display>.katex>.katex-html>.tag {
position: relative;
right: 0;
}

worked for me fine with scroll bars.

[mbourne]

I notice tags still overlap equations as of 0.15.6 and there's no "float" to the next line if the screen is narrow.

@martinpflaum 's suggestion above still has the overlapping tags issue.

I took some of @kevinbarabash 's suggestions plus one of my own earlier ones when working on the tags in the following page (where I'm using SVG images for equations - no javascript):

https://bourne2learn.com/math/mathjax/svg-math.php

I believe the tags on that page address Kevin's 3 issues mentioned in https://github.com/KaTeX/KaTeX/pull/2343#issuecomment-665675590 i.e.

1. Proper centering of equation
2. Tag on next line instead of overlapping
3. Proper vertical alignment with baseline

With a wide screen (and a silly long tag number so I could see what was going on) it makes use of a pseudo ::before tag (which has margin-right: auto) and a CSS variable:

.displayWithTag {--pseudoWidth:37px}

.displayWithTag::before {
  content:" ";
  margin: 0 auto 0 0;
/*  visibility: hidden;*/
  padding:0.5em 0;
  background: #aaa;
  width:var(--pseudoWidth);
}

The pseudoWidth value is changed on page load (or resize) to match the width of the tag, resulting in the equation being centered.

The parent P tag has the following CSS:

p.displayWithTag {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center
}

The lucky thing is the pseudo tag only takes up the available width - it ignores the width set by the variable if there is not enough room:

If the screen is slightly narrower such that the equation and the tag no longer fit, we create a new P tag with text-align: right and append the tag span to it:

The equation is centered, as the parent P is now just display: block; text-align:center}.

Narrow the screen some more, and the overflow kicks in:

If the screen is made wider again, the tag span is appended back in the parent P, which reverts to display: flex again, and the added "floating" P element is removed.

For single line math with tags, the baselines line up (on the final page):

For multiline math, I'm assuming the tag is centered vertically.

Hope it's useful

Regards Murray

[ronkok]

@mbourne That's an interesting approach, though I haven't yet looked at it thoroughly.

One small hitch is the KaTeX docs page re: browser installation. It still says that KaTeX runs in IE 11, which does not support CSS variables. I personally think that continued support of IE is pointless and I hope that others here will agree.

I'll look into your proposed approach. A few days may go by before I get there.

[edemaine]

IE was officially discontinued a few days ago so I think removing support is fine. :-)

I've been meaning to look at this approach more closely as well. As I understand it, it involves client-side JavaScript? KaTeX doesn't currently have that. Maybe it would be best as a contrib add-on... I'd still like to think about whether this approach can be adapted to not require client-side JavaScript...

[mbourne]

Any update/process on this?

[arctic-hen7]

I've been able to 'fix' (i.e. hack my way out of) this problem with the following CSS (closely inspired by @martinpflaum's suggestion):

.katex-display > .katex > .katex-html > .tag {
  position: relative !important;
  right: -5rem !important;
}

@media (min-width: 1280px) {
  .katex-display > .katex > .katex-html > .tag {
    position: absolute !important;
    right: 1rem !important;
  }
}

On small screens (i.e. anything less than 1280px in this example), this will position the tag relatively to the equation, shifting it over by 5rem to give it some space. However, on larger screens, this leads to the tags being all out of sync, which looks frankly awful, so the second part of this just makes them absolutely positioned again in such cases (the right positioning there is just personal preference for me). It's not perfect, especially not on tablet screens, but it's better than the overlap.

Would it be appropriate to submit a PR for this, at least until someone comes up with something better? The default behavior at the moment is hardly ideal...

[TravorLZH]

Although @arctic-hen7's media query can resolve this overlapping when the screen is narrow enough, it becomes strange when an article contains very long equations and very short equations. If we write down the following in the CSS file

.katex-display {
    overflow: auto hidden;
}

.katex-display > .katex > .katex-html > .tag {
    position: absolute;
    padding-left: 0.5rem;
}

.tag-overflowed {
    display: inline-block;
    position: relative !important;
}

and append the following JavaScript (which requires jQuery)

$(window).on("load resize",function(){
  $(".katex-display").each(function(i,elem){
    var ts=$(elem).find(".tag");
    var eqns=$(elem).find(".base");
    if(ts.length*eqns.length==0)
      return;
    var t=ts[0];
    if(eqns[eqns.length-1].getBoundingClientRect().right>t.getBoundingClientRect().left){
      t.classList.add("tag-overflowed");
    }else if(eqns[0].getBoundingClientRect().left-elem.getBoundingClientRect().left>=t.offsetWidth/2){
      t.classList.remove("tag-overflowed");
    }
  });
});

Then the tags of long equations will automatically be converted to relative position. On the other hand, if the window is widened, tags of an equation that seems to be long previously will return to absolute position. You may try it out here.