Designing for non-rectangular browser windows | Hacker News Reader

Designing for non-rectangular browser windows

shkspr.mobi

75 pointsedent23 comments

If you were to try this with real text that you wanted to read instead of lorem ipsum, you’d figure out pretty quickly why nobody wants text to rewrap like that as you scroll. Your eyes would have to rescan the text every time it moved to figure out where you’re supposed to continue reading, instead of just following it in a continuous line.

What if we squished the size of the text instead?

Raserise the text, map each pixel to a particle suspended in a fluid simulation, and let nature take its course. There's a reason they call it text reflow!

Yes. It reminds me of the bad old days of magazine layout in the 1990s and early 2000s, when graphic designers, armed with the latest desktop publishing software, roundly defeated the conservative forces of authors and readers.

Here’s a 1997 example at the Internet Archive:

https://archive.org/details/Mondo.2000.Issue.17.1997/page/n2...

Oh god this is terrible.

Whatever you might think of that 1997 example, it’s not the same issue, since it’s just a static page. As the page scrolls vertically by 1 cm, the word you’re focused on predictably moves vertically by 1 cm. I assume your quibble is that you might have to follow an odd shape to find the next word at a line break—but at least you know where the current word is.

Whereas in this post’s animations, as the page scrolls vertically, the word you’re focused on also jumps to an essentially random horizontal position (as a discontinuous function of the scroll-dependent widths of all the previous lines). You can’t scroll without losing the place of your current word.

> it’s not the same issue

Thank you for the clarification. I had hoped that would be understood from my “It reminds me of…,” but I guess it wasn’t.

From the author

> What would it be like to read text on such a device?

> Hell. it would be hell.

Among other similar statements. What’s the value in restating half the point of the article but presenting it as some big brained contrarian take

The author seems to be suggesting that the reason it’s “hell” and “horrible” is that we’re not “used to” it and it’s “rare”, concluding “it doesn’t have to be that way” and “we can go so far beyond that”. If that wasn’t your takeaway, then great—I wish there were more designers like you.

Probably the best usability wise would be text that flowed around the window constraints as in here, but paginated instead of reflowing.

TeX can do something like this, namely typeset paragraphs according to an arbitrary \parshape (a fixed one: it's designed for print after all). There was a question on the TeX StackExchange a while ago about making a "poster" with paragraph shapes chosen according to a certain cut-out image; some people were saying it's not possible, so I ended up doing it: https://tex.stackexchange.com/questions/401604/

(The inspiration for that question was apparently Spineless Classics, who have many good ones: https://spinelessclassics.com/collections/all?sort_by=best-s... )

Is Dunder Mifflin Sabre finally releasing the Pyramid?

https://medium.com/dunder-mifflin-paper/unleashing-the-power...

It’s ergonomic because of the triangular shape!

Pre-emptive comment: Yes, of course, the logical solution is to scroll text traditionally within a rectangular sub-region. But it's fun to think about alternatives, even if they're impractical.

The usability on the user's has been addressed by other people quite well.

There is then the issue of developers. Who gets the job of detecting which gimmicky shape a screen is? Web browser developers or website developers? Maybe my viewpoint is from being used to rectangular screens. I'm also not a web developer but mobile. I already hate having to implement portrait and landscape layouts. Please don't add a star shaped phone.

I vote for the star shaped phone. And against. Really, both at the same time. This would be terrifyingly awesome.

Let's take it to the next level.

Any UI designers out there want to tackle the mind-bending task of presenting information on a display that's a Mobius strip, Sierpinski gasket, or Cantor set?

With CSS's new 3D transforms, I'm pretty sure I could wrap text onto a Klein bottle…

Displaying text on a cylinder would be interesting. You could just have one long line bending slightly downward, endlessly circling around.

You're just _trying_ to start a fight by posting this to HN lol

This is peak /r/badUIbattles material.

I thought this was going to be about the notch in smartphones.

Haha. Nice exercise!

Reply on news.ycombinator.com