We had an issue at work today: how do we insert line breaks into long words without introducing any extra characters? The problem at hand was that we had a few long filenames that wouldn't fit into table cells. Browsers break longs words along hyphens, but our filenames contained underscores as well which were good candidates for line breaks in our case. We didn't want to display a filename that differed to the name of the downloaded file in order to prevent user confusion.
We tried a few solutions, including inserting empty <span> elements into the file names, but this only worked in certain browsers. The solution was found in good old Unicode: it has a Zero Width Space character which was exactly what we needed (or so it seemed) - relevant documentation here. In HTML, this character is obtained by using &#x200B;. We would insert one of these after every underscore and voila, long filenames would break where necessary.
As I've hinted above, this solution didn't turn out to our satisfaction - the link's underline would hide the underscores and make the file names look, well, wierd. So in the end we used the very simple solution of substituting underscore with empty spaces. Even though the displayed file name wasn't equal to the actual name of the downloaded file, it sure looked to most users.
Because we engineers want to play with newly discovered toys, I threw together a small Javascript block of code that inserted a zero width space after every letter of text on arbitrary webpages - reading narrow randomly broken columns of text became a headache inducing exercise :)
No comments:
Post a Comment