Directory Layout opinions needed

Ok, Internet. I have two options, both of which have their upside/downsides, and I need your feedback. I’m working on the new directory layout for LibraryBox, and need to break long names, especially those without spaces in them, because it does crazy things with the layout. Here’s an example of what the layout looks like without the hard-break behavior:

Photo Aug 27, 2 59 58 PM
Without Hard Break CSS


And here’s the same directory listing, WITH the hard-break CSS behavior in place:


Photo Aug 27, 3 00 20 PM
With hard break CSS

Better, right? Except then you get weird things like this:


Photo Aug 27, 2 59 50 PM
Text with spaces, no hard break CSS



Photo Aug 27, 2 59 18 PM
Text with spaces, with hard break CSS


Text that DOES have spaces, and would normally break across them, instead breaks at the arbitrary point where it hits the wall of the container.

So what’s your vote: With or Without the hard break CSS? The text in question will be all over the place, as it’s whatever filenames people use for the files they put on a LibraryBox…could literally be any text in the world. So I can’t predict…and it’s in CSS, so I don’t really have a way to detect spaces and do an if/then with it. Anyone have any ideas?

5 replies on “Directory Layout opinions needed”

I’d actually encourage you to revisit the first screen with no breaks. The problem seems to be more with the gray frame around the file listing causing legibility issues. If you only had top and bottom borders than the lack of wrapping wouldn’t cause legibility issues. You could allow the container that has the listing scroll so the user can scroll left and right to view the full filename,

Are you able to do more parsing of the filenames than just CSS? I would suggest trying to break on the last word with an ellipsis prior to that. And if you’re clever you can make it sorta a sliding door such that the last part of the filename (on the right) slides over the left part for responsiveness

So “really long file name.txt” becomes “really…filename.txt”. And you could add a hover state that would show the entire filename.

But that’s also complicated.

Perhaps you could do a responsive table like this:

Jackson: that’s a great suggestion. Tested it, and turns out that browser rendering is still pretty wonky with the horizontal scroll even without the padding on the container. BUT it does solve some of the look/feel issues, and I like it better overall for aesthetic reasons. So I’m going that way, but not entirely for that reason.

Thanks! 🙂

This is a hard problem, here’s my .02:

make your text element start after your icon, so it doesn’t wrap to left of the icon on the second row.

I would let long filenames be clipped at the edge of the container and set up an on_hover() that shows you the full name of the file. _Most_ files are going to be unique and identifiable before you get chopped off.

Can I see a mixture of spaces and underscores with hard and no-hard breaks?

Leave a Reply

Your email address will not be published. Required fields are marked *