Float text around images.

[Kat se gat]

I've trawled the forum and the help system but I can't quite see how to float some text around an image. For example, I have a screencap which is skinny and tall. That is, it's roughly 12cm tall x maybe 4cm wide. The image is left-justified meaning there's a lot of dead space to the right which is screaming out "Fill me, please, give me some text" and I want to oblige. Problem is, how?

The bit of research I did suggests I need to use a float property but that means creating or editing an existing style?

If I had, for simplicity, a paragraph and then another containing the image and another containing some more text can I tell Flare how to organise it all? I'm happy to do the research about the options available myself but I'd like to ask if someone can give me a link to something that maybe shows how to do it?

Ta.

[atomdocs]

The float property is very useful, so it is worth investing some time to get to grips with it. You could start here: http://www.w3schools.com/css/css_float.asp. Or search for e.g. "css float tutorial" [<< by this I mean a general web search]. The rules for using floats are not complicated, so you won't need to learn pages of code.

You would indeed set up an additional image style that incorporates float. Just create a new image class, give it a name to indicate whether it floats left or right, then set the float property appropriately. You can then use that style for any image that you want to float. If you already have a particular style for your images (e.g. using a border), you can just copy that class, paste it, extend the name to indicate that it floats left or right, and then set the float property.

To use the float style, apply it to your image. Then all text (and any other elements) that follow the image will start on the right of the image, level with the top, and will fill the space to the right. [Another edit: any paragraphs before/above the image are not affected by the following float.]

As you have quite a tall image, if at any point you want to stop subsequent elements from moving up to the right of the image (e.g. you have a heading for a following section that you want to move underneath the image), you'll need to set the clear property in the style for that element. You can clear left, right, or both, but you may as well clear both so that if needed, you can use the same style after any floated image, whether it is floated left or right. However, if you are not concerned about the text flow, you do not need to specifically clear every float that you use, just float the image and let the text flow on.

[Kat se gat]

Tom, ta so much, old bean, for that link and the information.

I think (drum roll rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr boom, tish) that I have managed to do it. I created an img.LeftFloat and added the float:left; option. When I added new paragraphs they did indeed float to the right of the image on the page. I also added a padding-right:40px; as well to put a little "breathing space" betwixt the image and paragraph text. So far so, so good.

I couldn't quite work out the best way to clear the float and that's where you could advise me. Here's what I tried: I added a p.ClearFloat class containing only clear:both;

I started editing the paragraphs that I wanted to float. When I wanted to stop the float I added another paragraph and set its style to p.ClearFloat. I then added some other normal style paragraphs and they immediately continued after the image, exactly what I was hoping it would do.

Is that what you would do to clear the float? At the moment mine is in an empty paragraph and there is the risk that I could delete it, seeing that it is empty and thus other paragraphs would float, not what I want to do. I'm looking for the best practice then how I would clear the float. Perhaps my p.ClearFloat is the right way to do it but I'd appreciate your thoughts on it. If my p.ClearFloat is the right way to do it, is there anything you can do in Flare to add a comment to a paragraph which shows in the IDE but not in the output? Something on the lines of "Delete this paragraph at your own peril."

[atomdocs]

Good work Peter. 40px padding - nice touch.

The float implementation is quite straightforward, as we've seen, but sometimes understanding the concept needs a bit of a look. The "float" actually affects the image, not the normal paragraphs that flow round the image - they are not floated. This is not obvious in "float left", and I appreciate why it looks like the paragraphs are floating - they are the bits that move. If you have a go at "float right", you see it more directly: the image will ping across the page and sit at the furthest available position on the right, while the following text flows down the left. That way, it is a little easier to make the connection that the image is floating, not the text.

So on to clearing the float: your p.ClearFloat is fine (at least it is what I do - that doesn't always qualify as fine), but it does the job, and in my view, is a good way to do it. You don't need to leave it empty, that is not-so-best practice. As long as your special clear float paragraph has all the properties of your normal paragraph (again, you can copy and paste the class, then add in the extra clear property), you can put your text in it. So all in all, I think you have cracked it with the styles you have

Just to restate the point from before though, if the text following your image flows all the way down the side of the image, and extends beyond the image, even in multiple paragraphs, you don't need to clear the float.

[Kat se gat]

Tom,

I added the clear:both; option to a couple of other pargraphs in my style sheet, notably, only the ones that deal with the p.Figure... class malarkeys. I can live with the setup I have now and the output PDF document looks fine so far. I got rid of my dummy paragraph so most things are back to best practice now, leastways, as far as a circus chimp like moi can implement. From this point on I will need to implement more images and hence, some more text. I'm sort of tempted to use Capture to do these bits but everytime I do, Snagit keeps snagging me as it's familiar territory.

Thanks for your help.

OT: I like your avatar, by the way. Sort of reminds me of The Nuclear Boy Scout if you've ever read about him.

[atomdocs]

Thanks Peter! I am working on an updated avatar. Watch that space. I heard about that nuclear chap. Can't knock his ambition.

Capture is a good tool, but so is Snagit. I use Snagit in my day-to-day stuff (non-Flare) because it is quick and easy and the sharing options are excellent. Snagit's annotation/callout libraries are generally better than Capture also. However, for all my Flare work I use Capture - no question. This is simply because Capture is so well integrated with Flare. Both Snagit and Capture offer non-destructive editing to some extent in their proprietary formats, but the difference is that Capture is 100% compatible with Flare, while with Snagit you can't use a .snag file with Flare, you have to roundtrip it through something like PNG and reimport/replace the image in your project. You can launch Capture with a right click in Flare and your edits are immediately visible in your project. It makes managing images in Flare so much easier, especially if you work with a lot of callouts. Capture also provides a single-sourcing option for images: you can specify separate print and screen resolutions on the same image, and the image is automatically sized appropriately for your online and print targets. And if you have any variables or conditions in your project, Capture can access these and you can use them in callouts.

Anyway, maybe you can tell, I like Capture. I already have a Snagit licence, so I use that for ordinary stuff because it is quick and geared towards sharing, but Capture is free and in my view, it is the best option for managing images in Flare.

[Kat se gat]

"I heard about that nuclear chap. Can't knock his ambition."

That's no maybe. You wouldn't have wanted to buy the garden shed he used for his experiments. I think the US authorities dismantled it and packed it into secure drums and it was buried alongside other nuclear waste, a fitting burial indeed. He apparently showed an unhealthy interest in a nuclear powered aircraft carrier he served on. Whether he was bumped from it because of his past endeavours I don't know. The last photo I saw of him was a badly scarred and pock-marked face caused by his resumption of his interest in matters nuclear. You have to design an avatar and send it to him.

Thanks for the Capture update. I recall discussing that in detail some time ago and being free, the price is right. I've got a little downtime ahead of me so I will try and retrain myself to use it and leave Snagit waiting on the touchline.