[Bug] Tab Label text-alignment/direction and overflow behavior doesn't match native tab bar

[tcbbd]

The overflow issue

When the tab label is too long, it fades out. Simple and elegant. But what if the tab label is in arabic? It turns out we must consider the text direction of tab label.

TST handles the overflow quite well if the browser language is LTR. But if we change the browser language to RTL, we get this:

Notice that the native tab bar recognizes the text direction of tab label, and let the label fade naturally. But TST cannot do that. The fading effect changes according to text direction, but the text itself doesn't. It seems we need to set direction: ltr for overflowing LTR labels to match the native tab bar.

The general text alignment/direction issue

This is an off topic from #3869. In that post, I said that as we plan to change the position/alignment and possibly text direction of collapsed members counter, we may also want to consider the same thing for all other tab labels. After some investigation, I found that the native tab bar behaves this way:

• If the browser language is LTR
  • RTL tab labels are set to rtl text direction, so the text aligns to right
• If the browser language is RTL
  • LTR tab labels are not set to ltr text direction, so the text aligns to right
  • unless the tab label overflows, in which case it is set to ltr text direction, so that the fading looks natural.

When the browser language is LTR, TST only sets RTL tab labels to rtl text direction when they overflow. This doesn't match native tab bar. And when the browser language is RTL, we should set LTR tab group labels to ltr text direction, otherwise it looks ugly as shown in the screenshot.

---

In #3869, I got the idea that the tab label alignment can be designed to change according to sidebar side. A possible design could be like:

• When sidebar style is left side, align all tab labels to left, whether it's LTR or RTL
• When sidebar style is right side, align all tab labels to right, whether it's RTL or LTR
• If the tab label overflows, set the text direction according to its content

But clearly, this does not match native tab bar behavior. If we want to match native tab bar in some sense, it could be like this:

• When sidebar style is left side, we treat the tab labels as if the browser language is LTR
  • LTR labels align to left, RTL labels align to right
• When sidebar style is right side, we treat the tab labels as if the browser language is RTL
  • LTR and RTL labels all align to right

This section should be viewed as a suggestion for Enhancement, rather than Bug. To pick which design is up to you. If both are not desired, then we should at least ensure that the tab labels always match native tab bar, no matter on which side the sidebar resides or in which language the browser is.

[piroor]

Thanks, I forgot to override text direction for tabs with LTR labels on RTL environment. The commit 463ecbf should fix misaligned (and unreadabe) LTR labels with nonsense fade-out effect.

[tcbbd]

For the tab label alignment, if matching native behavior is the goal, then the fix 463ecbf is wrong. As I've pointed out, in RTL environment, tab labels with LTR text align to right in native tab bar. Firefox only sets text direction to ltr when LTR text is too long and overflows. Here, you make them always align to left.

Even if we want to deviate from native behavior, the current design is inconsistent. Now, in RTL environment, we have LTR text align to left, and RTL text align to right. But in LTR environment, we have LTR and RTL text both align to left. To fix this, we should make RTL text always align to right in LTR environment. I've said we should do this to match native behavior, but maybe you missed that.

[tcbbd]

To further clarify my points, I'd like to explain in detail.

First, let's have these definitions:

• LTR/RTL env: When the browser language is LTR, we say we're in an LTR environment. Similarly, we're in an RTL environment when the browser language is RTL
• Tab Label: The container of the name/title of a tab. It has two properties.
  • Content (Inherent) Direction: The text direction of the text content of tab label (i.e. the name/title). It is determined by the unicode codepoints of the text string, thus called inherent direction.
  • Style Direction: The horizontal direction determined by direction. It is set by TST and not necessarily reflect the inherent direction of tab label.
• Sidebar Position: The absolute position of sidebar. It can only be left or right.
  • We say left is the regular position for LTR env, while right is the regular position for RTL env. But we'll only use left/right in the following discussion.

---

Usually, we want to follow what native tab bar does. But firefox itself has its own quirks. The behavior of firefox native tab bar can be described as following:

• In LTR envs
  • Tab Labels/w LTR Inherent Direction: use the default LTR Style Direction
  • Tab Labels/w RTL Inherent Direction: NOT sure what's the intention of firefox team
    • In most cases, it uses RTL Style Direction. But in some cases, it becomes LTR Style Direction.
    • Open some tabs with RTL titles, such as arabic wikipedia articles. The titles align to right in the vertical tab bar.
    • Restart the browser, this time the titles align to left instead of right. But if we close a tab and reopen it, the alignment changes back to right.
    • I just found this phenomenon when I'm playing with your fix. This is due to RTL Style Direction not applied to tabs restored from last session. Those tabs lack the textoverflow="" attribute, while tabs(/w RTL titles) freshly opened have the textoverflow="" attribute.
    • It seems the textoverflow="" could just be left unintentionally, and the true intention is to make Tab Labels/w RTL Inherent Direction use LTR Style Direction (unless it overflows). But it's also possible that the intention is to make them use RTL Style Direction.
    • Currently, maybe we should just always use RTL Style Direction for those Tab Labels?
• In RTL envs
  • Tab Labels/w LTR Inherent Direction
    • If it doesn't overflow, use the default RTL Style Direction (so the text is aligned to right)
    • Otherwise, use LTR Style Direction
  • Tab Labels/w RTL Inherent Direction: use the default RTL Style Direction

So the plan A is to follow firefox behavior, except that we always set RTL Style Direction for Tab Labels/w RTL Inherent Direction in LTR envs.

---

Then, we have plan B, which feels closest to the latest commit:

• Ignore sidebar position, LTR/RTL env. We don't care about them.
• Set Style Direction according to Inherent Direction. In other words, LTR for LTR text, RTL for RTL text.

This is the simplest design one could imagine. We just respect the text itself, and nothing else.

---

Another possibility is plan C. We just respect the sidebar position, and nothing else:

• Ignore LTR/RTL env
• Tab Labels/w LTR Inherent Direction:
  • If it overflows, use LTR Style Direction
  • Otherwise, use LTR for left-side sidebar and RTL for right-side sidebar
• Tab Labels/w RTL Inherent Direction:
  • If it overflows, use RTL Style Direction
  • Otherwise, use LTR for left-side sidebar and RTL for right-side sidebar

There are other possible combinations. I think it's good to just pick plan A. But if you're happy with another design, it's okay as long as it is logically self-consistent.

[tcbbd]

Reported at https://bugzilla.mozilla.org/show_bug.cgi?id=2022087 to ask what's the expected behavior.

---

FYI, Edge and Chrome always align LTR title to left side, and RTL title to right side. This is always true whether the browser UI language is set to LTR or RTL. So maybe plan B is also worth consideration.

[piroor]

Hmm... anyway I've realized that in RTL mode tab labels are basically aligned to right so pushed the commit 476b359 to align LTR tab labels to left only when it is overflow-ed.

[tcbbd]

Yeah, I guess we may postpone this issue until it is settled on firefox side. Maybe they will just align the behavior with Chrome/Edge, since, well, "Chrome does it this way". But the label should not be "fixed".