Introducing Sparkle 2.5

by Duncan Wilcox — February 27, 2018

Sparkle 2.5 comes a little later than we had hoped. As with great food, you can prepare it faster, but it tastes better when you take the time. Sparkle 2.5 has some great new features, let’s dive into the news.

We started wanting to add text wrapped around images, simple enough. But we got ambitious, and added full support for wrapping around arbitrary shapes, such as the roundness of a coffee cup or the neck of a giraffe. This in turn surfaced some issues with text layout precision which we weren’t quite happy with, so we went on to solve the huge problem of precise typography on the web.

With the exception of minor text rendering differences due to how antialiasing works on different platforms, Sparkle is the world’s first WYSIWYG website builder that produces precise and accurate text layout. In order to get this to work properly, we had to build the layout engine four different times, two are within the Sparkle canvas, for the display phase and for the text editing phase, two are for the generated output, for browser that support the standard CSS shape specification, and a workaround for browsers that don’t. There were significant engineering challenges in getting text to flow around images as you move them in the canvas, but the result is jaw-droppingly stunning, and opening this sort of creative control is just awesome.

You should enable the “Hide excess text” option in the site settings, to turn on the new high precision layout, and review any discrepancy. This is checked by default in all new projects.

We added image color filters, to make your image pop in the page. Because the filters are based on web technologies, and drawn directly in the browser, using the same image multiple times but with different filters doesn’t create an entirely new image, making the website quicker.

You can now set a label and a link on individual gallery images. Labels let you annotate images quickly, links come in handy for when the gallery is used as a “summary” of the following content or pages.

On the SEO front, Sparkle now has Google Tag Manager support and a full blown editor to create local business information. This feeds the details that Google shows when you trigger local search mode, as in this “Pizza in New York” query.

There also are some cool under the hood improvements that you’ll appreciate.

First, the improved efficiency of Sparkle’s memory use. As our customer sites grow, we have come across multi gigabyte files. Before Sparkle 2.5 the file was entirely loaded into memory, which clearly isn’t always necessary and can be a problem with Macs with smaller amounts of memory.

For example, this is a memory usage chart of Sparkle 2.2.3 loading a 1.6GB website file:

In Sparkle 2.5, once the file has been transformed to the new 2.5 file format, this is what the memory use looks like (superimposed on the 2.3.3 chart for comparison):

That’s all good, but what if you just got a 128GB iMac Pro? You have the RAM and want Sparkle to use it! Well, I lied, in that chart I only plotted the memory that Sparkle absolutely needs to use, in reality Sparkle will keep around data it might need in the future in a special “purgeable” mode, so the system can reclaim it if needed, though clearly if it can stay in memory it will be quicker to access. This makes Sparkle memory efficient and friendly to system resources at the same time!

We worked hard on improving graphic performance for large images. This is particularly visible when using the new image filter effects on very large images. The video shows a massive 22 megapixel 5694x4032 image with filters applied in real time.

Finally, we are still supporting macOS 10.9 Mavericks, but it is increasingly apparent that the effort to keep compatibility and performance on par with later versions of macOS is harder to justify, so we strongly encourage you to upgrade to 10.12 Sierra or 10.13 High Sierra.

Please check out our revamped documentation, which covers all 2.5 features and now includes a downloadable PDF.

A lot of work over the past 7 months went into making 2.5 great, we hope you love it. We’re already hard at work on the next major Sparkle version, stay tuned!

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.

Please check out the documentation for an idea on how Sparkle can help create websites visually, or download the free trial.

If you have any questions or feedback please get in touch.

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.