I'm a developer particularly focussed on accessibility and frontend web performance. Outside of work I'm interested in science, the environment, bouldering, and bikes.
Location
Manchester, United Kingdom
Work
Lead frontend engineer at Co-op in the United Kingdom
I wanted to use shape-outside to flow text into the empty spaces of non-rectangular products, so I could make the image larger. (I had a burning desire to maximize how many onscreen pixels could be image pixels without sacrificing too much information density.) I might post how to do this, someday.
This sounds intriguing! Thank you for another very interesting (and fun to read!) post
It’s like using shape-outside: url(…), but without needing the image to load — the idea was to inline style="shape-outside:polygon(…)" along the width and height attributes to avoid layout shift.
The steps without involving code are:
Resize image to 100×100 pixels
Run a concave-hull algorithm on the image to get the points of the polygon
Convert to CSS polygon(x1% y1%, … x𝑁% y𝑁%)
Stash that wherever you store the image’s URL so you can load them all at the same time
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This sounds intriguing! Thank you for another very interesting (and fun to read!) post
It’s like using
shape-outside: url(…), but without needing the image to load — the idea was to inlinestyle="shape-outside:polygon(…)"along thewidthandheightattributes to avoid layout shift.The steps without involving code are:
polygon(x1% y1%, … x𝑁% y𝑁%)