5 ms·

On a side note, check out how they have laid out the curved screenshot. It is apparently a stack of images. That helps setting the text to follow the couture o

by shash7 9y ago

On a side note, check out how they have laid out the curved screenshot. It is apparently a stack of images. That helps setting the text to follow the couture of the curve.

Klathmon 9y ago
There's actually a CSS property just for this called `shape-outside` [0]. It lets you define a shape of an image (or other element) that makes it so when it is floated, other elements can wrap up against it correctly. [1] is an example I just quickly made to show how the linked page could have been done in straight CSS. It works a bit nicer too as the text smoothly wraps instead of stepping like the linked article does (although there is no reason why both methods can't be combined to provide a smooth stepping where possible, and fallback to the approximation they used when it's not supported) It's browser support is pretty awful right now (only chrome, safari with the `-webkit` prefix, and basic support in firefox behind a flag), but if it makes it to standardization, it's a pretty neat tool to be able to reach for in these cases. If there were an easier way to see if the website itself was open source, I'd try and give it as a quick patch, but it doesn't look like the website itself is open source anywhere that I can find. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi... [1] https://jsfiddle.net/c1ffdpgq/2/ https://jsfiddle.net/c1ffdpgq/2/
- TremendousJudge 9y ago
  Your example doesn't work in Firefox (text doesn't wrap properly), but it does in Chrome
  - r0br0dz 9y ago
    It does work on latest Firefox for Android. Text curves well.
  - Klathmon 9y ago
    On desktop firefox you need to enable a flag in the browser for it to start working (at least that's what MDN says, I didn't try it)
yathern 9y ago
That's a clever solution! There's an experimental way to do this in CSS - but it's not well supported yet: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi... And likely this can be done with SVG as well.
netule 9y ago
That brings me back. I remember Dreamweaver or Frontpage used to do this automatically in the late 90's, I was blown away and used it everywhere. That, and image maps.

by shash7 9y ago

On a side note, check out how they have laid out the curved screenshot. It is apparently a stack of images. That helps setting the text to follow the couture of the curve.

Klathmon 9y ago

There's actually a CSS property just for this called `shape-outside` [0]. It lets you define a shape of an image (or other element) that makes it so when it is floated, other elements can wrap up against it correctly. [1] is an example I just quickly made to show how the linked page could have been done in straight CSS. It works a bit nicer too as the text smoothly wraps instead of stepping like the linked article does (although there is no reason why both methods can't be combined to provide a smooth stepping where possible, and fallback to the approximation they used when it's not supported) It's browser support is pretty awful right now (only chrome, safari with the `-webkit` prefix, and basic support in firefox behind a flag), but if it makes it to standardization, it's a pretty neat tool to be able to reach for in these cases. If there were an easier way to see if the website itself was open source, I'd try and give it as a quick patch, but it doesn't look like the website itself is open source anywhere that I can find. [0] https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi... [1] https://jsfiddle.net/c1ffdpgq/2/ https://jsfiddle.net/c1ffdpgq/2/

TremendousJudge 9y ago
Your example doesn't work in Firefox (text doesn't wrap properly), but it does in Chrome
- r0br0dz 9y ago
  It does work on latest Firefox for Android. Text curves well.
- Klathmon 9y ago
  On desktop firefox you need to enable a flag in the browser for it to start working (at least that's what MDN says, I didn't try it)

yathern 9y ago

That's a clever solution! There's an experimental way to do this in CSS - but it's not well supported yet: https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsi... And likely this can be done with SVG as well.

netule 9y ago

That brings me back. I remember Dreamweaver or Frontpage used to do this automatically in the late 90's, I was blown away and used it everywhere. That, and image maps.