Text wrap around an image

The default way Lectora wraps text around an image i dont like very much. Designwise i want to wrap text closer fitting to the boundary of images. After some experimenting i succeeded in that with the help of GSAP’s SplitText plugin (  http://greensock.com/SplitText ) and a JQuery hittest plugin ( http://e-smartdev.com/#!jsPluginList/hittestJQuery ) to check whether the textlines hit the image.

Esmart hittest plugin needs the HTML5 ‘Canvas’-tag. And too bad Lectora doesnt add this tag when publishing html. Allthough it works it now uses the bounding boxes 🙁

GSAP SplitText is only available when you are a member of Club Greensock ( as i am ;-). So i cannot upload a working Lectora sample to show you all. There is when you google a bit however a opensource alternative for SplitText. That you can find here (  http://www.netgfx.com/trunk/splitText/examples/examples.html ) It should work fine too for these kind of text animations. But i do prefer GSAP 😉

The attached Lectora is the complete setup, but GSAP SplitText js has been removed, so it will not work.

Preview image

Tags:

Comments

  1. Profile photo of Math Notermans
    Math Notermans Post author

    Apparently somehow the preview lost a ‘path’ to the proper CSS. So it doesnot show the wrapping 100% correct. The image as above is how it should look 😉

  2. Profile photo of Math Notermans
    Math Notermans Post author

    Oh…cross browser issues that it is.. Showing properly in IE and Chrome, not in Firefox 😉

  3. Profile photo of Wendy Miller
    Wendy Miller

    This is really clever! Thanks so much for sharing it even if you could not provide a working download!

  4. Profile photo of Math Notermans
    Math Notermans Post author

    One statement i made aint correct. You can use the Html5 element ‘Canvas’ in Lectora. It aint simple, but i do have some working samples now. What that brings is the use of quite elaborate Javascript libraries that all have great options.

    To name a few i found and am planning to test and bring into Lectora:
    – pixel perfect collision ( as in this TextFlow sample ), so then we can do perfect Textflows around images.
    – game engines. Found quite a few nice engines, all rely nowadays on ‘Canvas’ so thats a great option then.

  5. Profile photo of Math Notermans
    Math Notermans Post author

    Just found out ( thx to Diaco ) that this can be fixed in CSS

    Adding this CSS to your Lectora document will fix this and ensure it works in Chrome and Firefox too.

    span{ display:block; }

    Anyone who jumps into Javascript development with Lectora and GSAP, make sure to regularly visit the Greensock community, cause it is a great and helpfull community to be part of.

    http://greensock.com/forums/forum/11-gsap/

  6. Profile photo of Daniel Carroll
    Daniel Carroll

    Hi Math

    I have been experimenting with GSAP Spit Text but it doesn’t recognize the Lectora fiont size, that is it renders the font very small. Do you know a solution for this?
    Your help is appreciated.
    Thanks
    Dan

  7. Profile photo of Math Notermans
    Math Notermans Post author

    Hi Daniel,

    Indeed your correct. When using SplitText, the code creates temporary text for words, lines and or characters. You then after have to format the text to your liking. I have done that in several samples…so you can get the code for it from the one or other sample of me. I am now at LUC2016 so cannot wrap up a sample for you, but if you dont succeed let me know and i make a sample of it when im back from LUC…

Your email address will not be published. Required fields are marked *