Make long song titles with the same prefix visually distinguishable #52

derat commented 2023年01月11日 14:19:50 +01:00 (Migrated from github.com)

It'd be nice to elide titles differently in the song-table component when there are a bunch that start with the same prefix:

Screenshot 2023年01月11日 08 49 10

It looks like text-overflow has a two-value form for specifying different behavior for the start and end of the text, but per https://caniuse.com/mdn-css_properties_text-overflow_two_value_syntax it's only supported in Firefox. (https://chromestatus.com/feature/5090725653905408 was just tracking overflow, not text-overflow.)

Here are some hacks:

• https://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side
• https://stackoverflow.com/questions/18532256/needs-use-right-text-overflow-when-direction-is-set-to-rtl

It sounds like the best CSS option might be using direction: rtl, but that seems like it might cause other problems. unicode-bidi: plaintext might also be needed to prevent punctuation from being treated as LTR.

The other option would be mangling the titles via JS, but that also feels gross. For example, I could imagine something like this: if a title overflows and shares its first n chars with the previous title, then replace the prefix with .... I'd probably want to scan the whole table and repeat that process whenever the table is changed. Yuck.

It'd be nice to elide titles differently in the `song-table` component when there are a bunch that start with the same prefix:  It looks like [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) has a two-value form for specifying different behavior for the start and end of the text, but per https://caniuse.com/mdn-css_properties_text-overflow_two_value_syntax it's only supported in Firefox. (https://chromestatus.com/feature/5090725653905408 was just tracking `overflow`, not `text-overflow`.) Here are some hacks: * https://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side * https://stackoverflow.com/questions/18532256/needs-use-right-text-overflow-when-direction-is-set-to-rtl It sounds like the best CSS option might be using `direction: rtl`, but that seems like it might cause other problems. `unicode-bidi: plaintext` might also be needed to prevent punctuation from being treated as LTR. The other option would be mangling the titles via JS, but that also feels gross. For example, I could imagine something like this: if a title overflows and shares its first `n` chars with the previous title, then replace the prefix with `...`. I'd probably want to scan the whole table and repeat that process whenever the table is changed. Yuck.