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?

By griffey

Jason Griffey is the Director of Strategic Initiatives at NISO, where he works to identify new areas of the information ecosystem where standards expertise is useful and needed. Prior to joining NISO in 2019, Jason ran his own technology consulting company for libraries, has been both an Affiliate at metaLAB and a Fellow and Affiliate at the Berkman Klein Center for Internet & Society at Harvard University, and was an academic librarian in roles ranging from reference and instruction to Head of IT at the University of TN at Chattanooga.

Jason has written extensively on technology and libraries, including multiple books and a series of full-periodical issues on technology topics, most recently AI & Machine Learning in Libraries and Library Spaces and Smart Buildings: Technology, Metrics, and Iterative Design from 2018. His newest book, co-authored with Jeffery Pomerantz, will be published by MIT Press in 2024.

He has spoken internationally on topics such as artificial intelligence & machine learning, the future of technology and libraries, decentralization and the Blockchain, privacy, copyright, and intellectual property. A full list of his publications and presentations can be found on his CV.
He is one of eight winners of the Knight Foundation News Challenge for Libraries for the Measure the Future project (, an open hardware project designed to provide actionable use metrics for library spaces. He is also the creator and director of The LibraryBox Project (, an open source portable digital file distribution system.

Jason can be stalked obsessively online, and spends his free time with his daughter Eliza, reading, obsessing over gadgets, and preparing for the inevitable zombie uprising.

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 *