how to wrap text around a circle?

Question

why isnt shape-outside: being recognized on here or notepad++ ? trying to do whats on this page https://www.html5rocks.com/en/tutorials/shapes/getting-started/

Answer 1

https://code.sololearn.com/WBY0pW8q9USr/?ref=app --- I also made a code about this. It didn't look right, except until I added -webkit-clip-path:circle(50%);

Answer 2

The 'shape-outside' css property is still experimental feature, and so it isn't already supported by all browsers...

Try to add -webkit- prefixed version for wider support, but refering to https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside compatibility table, you cannot expect that it will be working anywhere ^^

Anyway, for me it's working here (as well in app -- webview -- as in browser -- samsung internet, probably build on top of chrome) for 'circle()' shape value, as well as for 'border-box' one (with border-radius:50%; and width==height to get a circle), even without '-webkit-' prefix:

https://code.sololearn.com/Wui49pq6tuds/?ref=app

I'm not user of notepad++ and no more of window, so I doesn't know if and how it handle preview, but probably through IE/Edge which could not support it, unfortunatly (but as always, microsoft doesn't take much effort to follow Html specifications, so why they would want to implement a non mandatory feature :P)...

Answer 3

Browsers version have to be up to date, but also webview in android for in app web preview (as code playground in sololearn app) ;)

Answer 4

My suggestion, make sure ur version of Chrome is up to date