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.
A little anecdote
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!
How enable text wrapping in Sparkle
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:
Above and Below: text flows above and below the element, skipping the entire horizontal stripe where the element intersects the text;
Rectangle: text avoids the bounding box of the element (the canvas frame you see in Sparkle), even if the element has transparency;
Contour: works only with images, causes text to fill areas that aren’t fully opaque;
The margin adds extra space to the wrap boundaries so that text isn’t stuck to the wrapped element;
Isn’t it super-easy?
Sparkle’s magic doesn’t finish here
There are many other aspect of Sparkle that drastically simplify your web design process and that you get for free:
Freedom: build your pages without constraints, put elements on the canvas, add text, images and everything you need and Sparkle will generate the HTML and CSS for you
Image generation: Sparkle can automatically generate @2x e @3x images for devices with high pixel density and webp format for maximum quality and performance (webp is a new optimized image format developed for the web, currently supported by few browsers - Chrome, Opera and some Android - but hopefully will be supported by others in the near future: Sparkle is ready!)
Extensive optimizations: performance is a key metric in web design and Google’s Pagespeed is a really important indicator. Sparkle optimizes everything for you and generated websites usually achieve 100% score on Pagespeed. How? We adopted the most advanced techniques, they’re often recommended but they’re time consuming so very few sites implement them properly, if at all
Local hosting of web fonts (in woff and woff2 optimized formats)
Deferring loading of Javascript & resources
Image optimization
GDPR Compliance: see Duncan’s blog post about privacy and GDPR
Sitemap generation: SEO is important and automatic sitemap.xml generation will save you a lot of time
Is Sparkle for you? Just try it!
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.
Conclusions
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.
