I recently found this interesting article from Ben Frain about CSS Shapes specification. You can read it here:
CSS Shapes are used to add really cool text wrapping effects to your website, as you can see in this page. In his article Ben points out how frustrating the use of CSS Shapes can be. As I was developing the text wrapping feature in Sparkle 2.5, I experienced it on my skin.
The main problem is lack of support in some browsers (Firefox until version 62, Internet Explorer and Microsoft Edge). The other problem is intrinsic with the CSS Shapes specification: while HTML and CSS markup is simple for trivial cases, for example text flowing around a circle shape, things become quickly hard when you want to achieve more complex layouts, like text flowing around an image contour as on this page.
Text wrapping is one of the many reasons why visual design tools like Sparkle can drastically simplify the web design process and is the perfect example I always use when I fight my battle with website hand-coding talibans 🙂
Like for the rest of Sparkle, we developed image wrapping with simplicity in mind, allowing any Sparkle object to act as a wrapping element. Images, in particular, can be configured to wrap using the transparency with just one click. Sparkle breaks up the page in different regions, ensuring the text will reflow, and produces the necessary HTML code with zero effort for user.
We also implement the fallback code for browsers that do not support the relevant CSS properties yet (“shape-outside” specifically) so cross-browser compatibility is guaranteed and effortless.
I don’t blame who designed CSS Shapes specification for its complexity, browsers are extremely sophisticated tools and the effect of every feature must be seen holistically. However writing code is becoming more and more difficult because web design requirements are growing in all directions and CSS is often non-intuitive. Creating great web design is a hard task and powerful design tools are becoming more and more essential. Sparkle is growing rapidly and new features are added each release, all of our efforts are focused on making it easier to use and more powerful.
Exactly one year ago, a customer wrote us two lines: “Hey guys, Sparkle is really nice, but how do you think you can be a real iWeb replacement without a text wrapping feature? Come on…”. We were aware text wrapping would have been a super-cool feature, but we also knew it would be very difficult to implement. But he gave us a tough challenge and I wanted to win. After 3-4 months of hard work, we did it!
Moral: we always listen to our customers, even when things are very hard!
Text wrapping is controlled from the “Arrange” inspector, where you find the options to enable it. Select the element you want to wrap around, go to the “Arrange” inspector and select the desired effect:
The margin adds extra space to the wrap boundaries so that text isn’t stuck to the wrapped element;
Isn’t it super-easy?
There are many other aspect of Sparkle that drastically simplify your web design process and that you get for free:
Sparkle is designed with simplicity in mind. If you are an old iWeb or Adobe Muse user you will have an immediate feeling with it. Don’t be afraid, download the free version of Sparkle from our site and just try it! We also have a youtube channel where you’ll find lots of tutorials from Duncan’s Live Stream Show.
We strongly believe in our vision about the future of web design and the importance of visual tools that speed-up and simplify design processes: Sparkle is the result, we are so very proud of it and we have great feedbacks from our customers. Certainly it is not perfect yet, but we have a long-term vision about its development. We’re working hard on many improvements and new features, moving forward into the future.
Sparkle is striving to become the best visual tool to create websites.
We will soon be adding more articles with example websites and more thoughts on visual web development.
If you have any questions or feedback please get in touch.