Forum Discussion
Text boxes--wrapping text around an object
Is there a way to insert an image in a text box, and have the text flow around it? (Similar to the 'float' function in HTML.)
If not, does anyone know of a workaround that replicates this? Thanks...
Although Storyline as is does not have real word-wrapping it can still be done. With the help of Javascript, CSS and HTML5 you can make it happen. This library for example makes it happen.
http://www.jwf.us/projects/jQSlickWrap/
A nice library when doing typography
http://letteringjs.com/
A pure CSS solution is possible too..
https://codepen.io/demiton/pen/GRgdbYP
Here a good approach using CSS-shapes in HTML5
https://www.html5rocks.com/en/tutorials/shapes/getting-started/
Another sample
https://codepen.io/dudleystorey/pen/FvJDB
Funny thing when searching for solutions i found one of my own older posts (2015) on how to fix this in Lectora. In Storyline this would work too...even easier since recently the newest GSAP is included default in SL.
https://community.trivantis.com/shared-content/text-wrap-around-an-image/
========================================================================
As Storyline treats all assets as inline SVG the above solutions might be hard to implement. So i searched for some SVG based solutions.
https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a
https://jsfiddle.net/IPWright83/22ahj15o/
Although not directly textflow/wrapping still nice this one..
https://csswarp.eleqtriq.com/
And this last one for sure is very promising.
https://css-irl.info/experimental-layouts/
One thing to watch is Storyline's own behaviour with texts and textareas. If you enable 'Wrap text in shape' on a Storyline Text Box internally Storyline will make <tspan> elements for each line. This offcourse hinders any approach above, but you can still make it work with some effort.
