Hacker News new | comments | ask | show | jobs | submit login

This looks amazing. Thank you for generalizing this and open sourcing it.

For anyone looking to use the polygon word wrap feature as in the demo on the Github page with the Eiffel Tower, take a look at its responsive behavior before you make that post. As you shrink the window down on jack.ventures, some text can be cut off, or no longer show up on a clear portion of the image like a wall.

This isn't a bug with the software so much as a flaw with the magazine "words on image clearing" style layout that doesn't translate perfectly to the web medium.




I should probably add a redraw on window resize. Right now it does that polygon stuff once on page load.

So if you resize the window and reload the page it should fit everything correctly again.


You may want to consider CSS breakpoints. They'll do that automatically without the page refresh, assuming the content layout is done using CSS already.

A rough design pattern I've seen is Desktop resolutions: use layout in terms percent. For instance: left side of text begins at 50% of image width.

Tablet and mobile resolutions: fixed layouts for each resolution supported.

If you're doing the polygon containment using javascript, I imagine implementing such behavior might get really complex.


could do with some CSS media queries. Right now I'm using a javascript calculation for font size to avoid the discrete steps in CSS breakpoints. I figured you don't see anything without javascript anyways so might as well go all the way.

My philosophy for mobile resolutions is to just deliver the desktop experience. The text will be tiny yes, but you can just pinch to zoom. Sites that lock down the zoom kind of annoy me personally so that's why I did it that way.

The second theme does have media queries for mobile sizes though, since it doesn't rely on the text being in a particular spot to be readable.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: