adjusting filenames for icons

Last night, after a bit of discussion in the KFM bug tracker, I spent an hour or two coming up with an algorithm to shrink the centre of a filename so that the text did not cause its icon to stretch (demo).

before:

after:

I think the result is very clear, and the red ‘[…]‘ pretty obviously means that something is spliced out.

How it works

The icon is set to overflow-x:hidden and has a specified width. We get the value of that width, then reset the width to “auto”.

If its new rendered width is now less than the original, then the filename was fine – replace the width and go onto the next icon.

Otherwise, get the extension and the … part-of-the-filename-which-is-not-the-extension … hmm … pre-extension?

Go through a do...while loop which gradually removes the last character of the pre-extension, replaces the icon’s text with pre-extension+'[…]’+extension, and tests to see if that changes the width to within the allowed parameters.

Once the do...while loop has run its course, the icon’s width is then reset, and its title is changed to the original filename (see the tooltip in the above).

Tada!

For more coolness, please check out the KFM site.

Comments are closed.

%d bloggers like this: