[emmanueloga_]

GUI algorithms like these are not well documented anywhere (except, of course, all over the web and in source code! :-) ...

Would be nice to have a site, maybe a wiki, dedicated to this kind of thing.

Other interesting problems in this area:

* Layout algorithms

* Automatic assignment of keys for navigation (for nav w/o using a mouse)

* Popup menu prediction [1]

* Text breaking / paragraph layout [2]

* Etc, etc, etc ...

1: https://bjk5.com/post/44698559168/breaking-down-amazons-mega...

2: https://xxyxyz.org/line-breaking/

[vjeux]

Back in 2012 I made a series of blog posts about all the unique image algorithms I could find:

- Facebook (that I designed): https://blog.vjeux.com/2012/image/image-layout-algorithm-fac...

- Google Plus: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

- Google Plus, finding best breaks, which also explains fancy text layout algorithm: https://blog.vjeux.com/2014/image/google-plus-layout-find-be...

- Lightbox: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

- Lightbox Android: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

- 500px: https://blog.vjeux.com/2012/javascript/image-layout-algorith...

I hope that’s useful!

[jamessb]

Another related blog post is "Building the Image Grid from Google Photos": https://medium.com/@danrschlosser/building-the-image-grid-fr...

[runeb]

Very interesting, thank you for this! Just a note that your demos do not seem to load images.

[rvnx]

Excellent :)

[throw10920]

Yes! Please! Every one of these problems are interesting ones that have been solved before...but the solutions are packaged up into massive systems (good luck finding the code for actually executing element layout in Chromium) and then it seems like are never discussed again on places like Reddit, HN, Stack Exchange, or even among other programmers I know IRL.

In particular, I'm incredibly interested in layout algorithms - I'm working on building a GUI toolkit, for which I need layout algorithms to lay out widgets, but can't find anything other than descriptions of how to use existing systems...

[adolph]

Agreed, maybe something expressed in human learnable non-code procedural notation.

[melony]

One of the most difficult programming challenges I have encountered is calculating and displaying automatic drag and drop alignment guidelines/rulers (like those in Figma and PowerPoint that show up when you drag two element close to each other or near certain ratios) efficiently. They are not documented anywhere despite being a very common pattern. Most drag and drop libraries and framework don't have out of the box support for it as it requires deep low level integration.

[jimmygrapes]

On a related note, the tab stop/indent marker/ruler in MS Word (and the related ruler/guidelines in Photoshop and others) are sorely missing in the generally available UI elements. For text on the web I get it, since it's all markdown and/or html, not exactly WYSIWYG-emulating-paper. Guidelines for the purposes of snap alignment are relatively easy to implement and have tons of use, but I have not seen any good ones in the wild yet.

[TacticalCoder]

That line-breaking link is really great, I enjoyed it a lot! However it barely scratches the surface: there's no good line-breaking without hyphenation. And then even once you have a great H & J algorithm (Hyphenation and Justification), you have the visual problem of "rivers" (be it text or print): a "river" behind when on one line you have the space between two words nearly matching another space between two words on the next line, then third line, etc.

I don't know if modern typesetting software like InDesign do solve this automatically or not. The web certainly don't (although with CSS and the "shy" Unicode char you at least get some control on the 'H' part of "H & J"). Back in my typesetting days QuarkXPress had nothing to help with rivers: you had to detect them visually and then "fudge" the paragraph a bit (by forcing a line-break or an hyphenation).

I always wondered: certainly if you start with a good H & J algorithm, it must be possible to try a few candidates and determine, programatically, which one has the least obvious rivers? Fascinating stuff IMHO.

P.S: I also wonder if it's because algorithms for layout out paragraphs are so bad on the web that justification is typically frowned upon on the Web? (it certainly rules king in printed books)

[raphlinus]

Android has a sophisticated algorithm for line breaking, including hyphenation. It's similar to that of InDesign (both were strongly inspired by the Knuth-Plass algorithm used by TeX), but tuned for mobile use. In particular, it's pretty shy about adding hyphens, but if a well-placed hyphen will prevent a two-line sentence from spilling to three (in which the last word is by itself), it will do so fairly aggressively. I'm quite proud of that.

Unfortunately, I don't have a good writeup of that, but some of the details are in this ATypI talk[1].

[1]: https://www.youtube.com/watch?v=L8LD0BM-Vjk

[maxwell86]

Sounds like a topic for your blog.

[OnlyMortal]

It’s been many a year since I thought of XPress.

I recall I did a Mac XPress XTension that used GUSI (sockets) to talk to a 4D server to grab artwork. I even had it multi-threading (co-operative of course) and a UI using PowerPlant. Rather a hack.