proper wrap text around an image

mnotermans5114
mnotermans5114 Community Member Posts: 916
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?

Comments

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    I like how iAuthor wraps:
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    @ 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.

     
  • timk
    timk Community Member Posts: 1,207 ♦ Idol ♦
    You can add image and text to a Custom Div with jquery:

    http://community.trivantis.com/shared-content/scrollable-div/

    Tim
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    @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 :-)
  • timk
    timk Community Member Posts: 1,207 ♦ Idol ♦
    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.

     

     
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Great tip Tim... might work wonders...
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Getting a image and a textfield into a container DIV worked as a charm thanks to Tim's top tip...

    $( '.wrapImg , .wrapContent' ).wrapAll('<div class="container" />');

    Now onto the next step... getting one of the javascript wrapping libraries to work with it...
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    I've brought our suggestion to our development teams attention.  Thanks!
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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..
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    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 ;-)