Text flow?

What’s the best way to get HTML text to flow or wrap around a graphic image?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Click inside your HTML text, so you see a flashing I-beam text cursor. Use the arrow keys to move that cursor to the beginning of any given paragraph of text. From the Insert menu, choose Graphic Item. You will see a 100px square graphic box inline within your text. Click once on it, and import your photo. Drag the corner of the box to resize it, use the usual commands to scale your photo to fit, drag it around by the central drag handle to crop, etc. When the photo looks right, choose Align : Left or Align: Right from the Inspector to make the text flow around it. Use the Margin: Custom attribute to set some space around the photo so the text doesn’t crash into it.

Walter

On Dec 12, 2011, at 12:33 PM, Kelly Crossley wrote:

What’s the best way to get HTML text to flow or wrap around a graphic image?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Best - a very subjective term.

In its simplest form you can insert a graphic item in a run of text and then in the Inspector under the Graphic Item tab you can choose its position from various options - using the Align picker - including left, Right, Top, Text Top, Super, Middle, Baseline etc.

Give your graphic some margin to keep the text from butting up right next to it.

Another method for fancier layout is the Text Flow action Text Flow - but it isn’t free.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks guys.

I think I’m going to need Text Flow as I’m trying to wrap a diamond shaped object. I don’t mind spending the $15 as long as the code the action writes is W3C compliant. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Something else you may also want to look at http://www.csstextwrap.com/, useful for non-rectangular wrapping.

Todd

Portfolio: http://www.xiiro.com
Twitter: @ImXiiro
Skype: toddbrilliant


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just purchased Text Flow but I can’t seem to get it to work with an image. The text and the path work just fine, but when I add the photo everything gets screwed up.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I think I figured out the problem.

Apparently Text Flow doesn’t like rotated images. Once I rotated my photo outside of Freeway Pro everything worked as designed. :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi,
check the path you use - is it parented to the image? If so, that may be the problem. It would be interesting to know what you did to arrive at the problem you mentioned.

Todd - my Action does the same job as the site you linked to - but obviously you can define the path that repels the text in Freeway’s interface. In fact the second option gives pretty much the same result as my Action.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Paul, thanks for your post. So, if I’m reading this right, Text Flow will work with rotated images. I just need to ensure that the path is the parent image. Is that correct?

Also, where should the HTML text box be? On top of the path/graphic?

Thanks,
Kelly


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I jotted down some notes about parenting and the Relative Page Layout Action which makes the Text Flow Action for more relevant. Ideally, the path should not be parented to anything, or if you are using the RPL Action, parented to the HTML item containing the text.

http://www.actionsworld.com/Actions/TextFlow/relativepage.php

It doesn’t really matter if the image is over the text or vice versa. However, bear in mind that if the image is over the text, it will block any clicks to links.

You could also make the image a background image for the text box and use it that way too. I think Freeway 5.5 has opened given this Action a lot more freedom that it previously had.

I am intrigued at the idea of using a script to repel the text, rather than a whole nest of

spacers. I may investigate that as an option in the Action if I have the time.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options