proper wrap text around an image
September 27, 2016 12:00 AM
Allthough Lectora has this option, i dont like the way it works out. Block wrapping a given text to the boundaries of an image. I want the text to follow the contours of a given image.
Several third party scripts and setups do make this possible, but have yet to find one that works perfectly in sync with Lectora's way of creating html and css.
One promising workflow is this:
https://codepen.io/dudleystorey/pen/FvJDB
It nicely creates a proper wrap around the image, and in basis could work with Lectora.
The only thing i miss now is a way to combine a image and a text into a DIV to use as container.
Any one has an idea or trick to make that work?
Discussion (10)
@Tim... yeah that approach crossed my mind. Might give that approach a go, allthough if i can manage to find a way without external html-objects i would prefer that.. Allthough that might not be possible. Biggest disadvantage of external objects i think is the lack of direct visual feedback on what will be showing...
A nice approach ( UI wise ) was this one...
http://www.webappers.com/2008/01/10/css-text-wrapper-makes-hthml-text-wrap-in-shapes/
Really like the way you can define a shape for the text-field... well wishfull thinking to have something like that in Lectora :-)
You can add image and text to a Custom Div with jquery:
http://community.trivantis.com/shared-content/scrollable-div/
Tim
@ Sergey - indeed looks good... now to have some way to get things done like that in Lectora ;-)
One of the libraries i found was this one.. http://baconforme.com/
But i dont like the way you have to setup a wrap with it..
This one looks promising too...
http://codepen.io/adobe/pen/3b079a5671f21d140f47ffce3801ddfa
But as stated before you need a DIV with the image and the text in it for it to work.
So what im experimenting with now...is... add both the image and text in Lectora, then with Javascript create a DIV with both elements in it, and do the wrapping.
undefined
I've brought our suggestion to our development teams attention. Thanks!
Getting a image and a textfield into a container DIV worked as a charm thanks to Tim's top tip...
$( '.wrapImg , .wrapContent' ).wrapAll('undefined
Now onto the next step... getting one of the javascript wrapping libraries to work with it...
Great tip Tim... might work wonders...
Another way may be to wrap() a div around all the objects with wrapAll() Then you won't need an external html object and can keep the objects in their original position on the page.
undefined
Great. Got a basic nice looking text wrap working. Its properly crossbrowser, do have to check if it works on mobile devices yet. The solution i got now, uses bezier shapes to create the path the text is allowed to extend too. Thinking of that in fact i could now create a solution where text follows a path ;-) For now its adding the points for the bezier path in the Javascript code. For the ease of the users i am gonna make a visual UI onscreen to define that path. @Jenny..when done i will add it to the forum/community ..nice start for Trivantis developers to get something like this working default in Lectora ;-)
Thx Jenny, might indeed be a big plus for a new version. Especially because none of the competitors has anything like it either. One thing to keep in mind though is crossbrowser compatability. I noticed that some of the libraries i mentioned do not work on all browsers. So i am now searching for a solution that works in most browsers and devices to combine with Lectora..
Discussions have been disabled for this post