Misalignment In Room Lists

[treed]

We've spoken about this in the matrix room a bit, but I figured I'd file a formal issue so we can coordinate on figuring out exactly what's going on.

Here are some screenshots:

A few items of note:

In every case but one, the misalignment starts after the topic. The one case where it doesn't (the Nix Emacs room), the logo appears to be two characters wide, and to not have an empty space to its left like the others do.

There seems to be a correlation with ellipsized topics. As I look closer, it does appear that the ellipsis is wider than other characters.

I ran describe-char on one of them, and got this result:

             position: 874 of 7054 (12%), column: 76
            character: e (displayed as e) (codepoint 101, #o145, #x65)
              charset: ascii (ASCII (ISO646 IRV))
code point in charset: 0x65
               script: latin
               syntax: w 	which means: word
             category: .:Base, L:Strong L2R, a:ASCII, l:Latin, r:Roman
             to input: type "C-x 8 RET 65" or "C-x 8 RET LATIN SMALL LETTER E"
          buffer code: #x65
            file code: #x65 (encoded by coding system utf-8-unix)
              display: by this font (glyph code):
    ftcrhb:-UKWN-Iosevka-normal-normal-normal-*-16-*-*-*-d-0-iso10646-1 (#x48)

Character code properties: customize what to show
  name: LATIN SMALL LETTER E
  general-category: Ll (Letter, Lowercase)
  decomposition: (101) ('e')

There are text properties here:
  display              "…"
  help-echo            "Topic: The official matrix for Doom Emacs (reserved for future use -- do not use)"
  tabulated-list-column-name "Topic"
  tabulated-list-entry [Show]
  tabulated-list-id    [Show]

Iosevka is (supposed to be) a fixedwidth font; there are variable-width variants, one of which I use for my variable-width font, but that one is called Iosevka Etoile, so that would show up differently.

It's also interesting to me that it believes that it's an e, but displays as an ellipsis.

[treed]

Found this bug report about Iosevka's ellipsis; I'm gonna try a different variant and see how much that fixes.

https://github.com/be5invis/Iosevka/issues/1121

[treed]

Okay, that helped a lot but things are still a little bit off in a few cases:

In the first one, I think it's just the first line that's a bit off.

The taxy view has a fair bit more off, and my only guesses there are the room icons and possibly emoji.

[alphapapa]

Thanks, Ted. There are two separate issues here: the tabulated-list-mode-based ement-room-list buffer works differently than the taxy-magit-section-based ement-taxy-room-list buffer, and the issues in the latter are different than ones in the former.

The ellipsis-size issue was unexpected; glad you figured that out.

The issue in the taxy-based view is, I think, due to calculating the width of the room avatar images and trying to compensate for them. See https://github.com/alphapapa/taxy.el/blob/62624c32d7f58bfa4acc89becc7cc8427d546aab/taxy-magit-section.el#L374

[alphapapa]

FFR, this may be a bug in taxy-magit-section rather than Ement.el. Anyway, I probably won't work on this anytime soon.

[Stebalien]

So, I've found that inserting any column before the room avatars fixes alignment. My current configuration is:

  (setq ement-room-list-columns
        (list (propertize "B" 'help-echo "Buffer exists for room")
              (propertize "🐱" 'display " ")
              "Name"
              (propertize "Unread" 'help-echo
                          "Unread events (Notifications:Highlights)")
              "Latest" "Members"
              (propertize "Notifications" 'help-echo "Notification state")
              "Session"))

And everything is nicely aligned:

[alphapapa]

@Stebalien Well, I hate to burst your bubble, but if you look very closely, the line showing the org-mode room is one or two pixels further to the left than the others (e.g. look at the "Latest" or "Session" column). I think it's because the org-mode room's avatar is not quite square, or something like that.

What your screenshot does show, though, is that having a column before the avatar column seems to change the indentation so that rooms are indented below their parent group's heading. I think that's technically a separate issue (and also probably a matter to be fixed in taxy-magit-section), but perhaps related.

Thanks for sharing the screenshot. I hope to improve this in the future.

[alphapapa]

I think I've found a good solution for this:

1. Add a new column that shows the avatar and the name together, and make that column the first one by default in ement-room-list-columns:

(ement-room-list-define-column "🐱 Name" (:align 'left)
  (concat (ement-room-list-column-format-🐱 item depth) " "
          (ement-room-list-column-format-name item depth)))

2. In taxy-magit-section, in taxy-magit-section-format-items, replace the string-width* function with, as mentioned in the FIXME there, the definition of org-string-width, which does a better job of accounting for the width of strings that may contain images but not "be" images.

Together, these changes produce what seems to be a correctly aligned and indented list:

The only remaining issue is that in the header, "Name" is not aligned with the actual room names, but I think that's not solvable if each room's name may be indented differently.

So I'll make a new release of taxy-magit-section with that change, then make the change in ement and make it depend on the new version of taxy-magit-section.

[alphapapa]

I'll probably also reduce the indentation from 1 to 2, so it will be a bit more compact for the side window:

[Stebalien]

Ah... I wasn't looking at the pixels, I was looking at the general alignment. But yeah, the pixel width is definitely different and would require some very fancy display specs to fix (IMO, it's not even worth it).

[alphapapa]

IMO, it's not even worth it

I almost agree, but do you know how many bug reports I'll get if I don't fix it? :)