Long sentence list titles overflow header container

[cblanken]

Long sentence list titles overflow header container

Examples

See CK's List 907

Another Example

It's even more pronounced in this list

[cblanken]

One solution would be to allow the full height of the title, but that gets a bit unwieldy with particular long titles. It also makes the controls to the right of the title seem a bit out of place. For example.

One alternative would be to wrap the controls below the title, so the title has more horizontal space to work with. It also opens up space for more control buttons if they're ever needed. Like this.

Example 1 (long title)

Example 2 (short title)

Thoughts?

[jiru]

Thoughts?

I think we should add a "list description" kind of field to allow users to describe the list using as much text as they want, and restrict the number of characters of the list title to a reasonable value, possibly truncating it using CSS ellipsis or something. A title that is too long loose its purpose of summarizing the list purpose.

Edit: And since list titles are used for searching and finding lists, probably extend the current list search feature to include searching in list descriptions too.

[cblanken]

...possibly truncating it using CSS ellipsis or something. A title that is too long loose its purpose of summarizing the list purpose.

I agree, it'd definitely be better to have a separate field for longer description. If the title is truncated for existing lists though, it may degrade the user experience a bit, since some lists (I'm mainly looking at CK's lists here) have similar prefixes which may make it difficult to identify which list is currently open depending on where the cutoff/ellipsis happens. We could add a popup on hover to display the whole title, but I don't think that would be ideal.

Some examples of truncated titles

[jiru]

Yeah maybe the ellipsis is not the best way to go about it, especially giving that the available space varies depending on how "sort by" is translated. That being said, what if we allow two lines before truncating?

We may as well simply ask individual contributors to update their list names. I just checked the database, as for lists titled with more than 100 chars, CK owns most of them, and then there are lists 992, 170438, 169999 and 170736.

[cblanken]

That being said, what if we allow two lines before truncating?

Wrapping once and then truncating with an ellipsis actually seems to be a bit complicated. I'm just gonna leave this StackOverflow post here for future reference. https://stackoverflow.com/questions/11989546/wrap-a-text-within-only-two-lines-inside-div

Edit:
Here's what they look like with anything over two line hidden.
https://tatoeba.org/en/sentences_lists/show/6313

Many of them look basically the same with two lines since it gives you about 85 characters to work with, so most won't need to be truncated. Like this one.
https://tatoeba.org/en/sentences_lists/show/6272

[jiru]

Wrapping once and then truncating with an ellipsis actually seems to be a bit complicated.
[...]
Here's what they look like with anything over two line hidden.

I think truncating after two lines without ellipsis is still a big improvement over the messy overflow we currently have. If you want to add the CSS code for ellipsis, I suggest using the trick provided by vinesh on the StackOverflow page. Even though -webkit-box-orient is not great, it’s currently widely supported (even by Firefox), and even if it stops working in the future, it’s not a big deal that the ellipsis simply disappear.

Also we need to make sure the title wraps okay in languages that do not use space as word delimiter, such as Chinese or Japanese.

[cblanken]

Something to keep in mind. We lose a lot of space (down to about 50 characters) when the list is owned by the user due to the extra controls they have. See examples below.

List page for list not owned by logged in user

List page for list owned by logged in user

[cblanken]

I suggest using the trick provided by vinesh on the StackOverflow page. Even though -webkit-box-orient is not great, it’s currently widely supported (even by Firefox), and even if it stops working in the future, it’s not a big deal that the ellipsis simply disappear.

One setback I noticed with this solution is that any titles that don't require wrapping will offset to the top as if expecting a 2nd line instead of remaining centered.

Before

After

I don't think it's possible to get that re-centered with just CSS. It would probably require some Javascript to check the title content and somehow measure the text width before applying the wrapping/truncation styles.

[jiru]

I don't think it's possible to get that re-centered with just CSS. It would probably require some Javascript to check the title content and somehow measure the text width before applying the wrapping/truncation styles.

Then let’s just forget about the ellipsis idea for the time being.

I have one concern however.

In terms of display, truncation is better than overflow, but one might argue we are loosing information, and there is nowhere else one can read the untruncated title. As shown in #3125, when all the list buttons are displayed, the available space is like less than 30 Chinese characters, so there are cases when 2 lines are arguably not enough.

I think we could use your initial design proposal, but "Example 2" shows it’s not quite right for short titles. I wonder if there is some CSS trick to make the display automatically turn into "Example 1" whenever the list title gets too long.