text not wrapping around floated image in WebHelp

[bonnie]

I have an image placed in a paragraph (style="float: right") and am trying to wrap the text around it. But the image appears below the paragraph in which it is placed. This happens no matter what vertical-align properties I assign to the image tag.

In the WebHelp, there is no text wrapping, just the image below all the text in the paragraph.

In the PDF output, the text of the following paragraph wraps around the image.

I've tried all the different vertical-align settings, but not one of them changes the vertical position of the image.

What am I missing here?
Thanks,
Bonnie

[LTinker68]

If you want the image to line up near the top of the paragraph, then insert the image as the first item inside the paragraph, then begin entering the text. It uses the point where the img tag was inserted in the paragraph to determine its position in the browser window. BTW, the display in the XML Editor may/will probably be off, but the topic should display fine in the Preview window and the output.

If the float right property was specified in a custom <img> class, then make sure you apply that custom class to the <img> tag in the paragraph. There should be no vertical align properties set on the <img> tag. If you want to keep a little space between the text and graphic then add a little padding-left and padding-bottom to the (custom) <img> tag.

[NorthEast]

You will need to move the image tag so it is not placed inside the text that you want to wrap around it. Insert the image at the start of the paragraph and then enter the text after the image.

This will not work - the img tag is inside the text, so the text won't flow around it and the image will appear after the text...
<p>This is the <img src=... /> paragraph text.</p>

This will work - the img tag is outside the text, so it will flow to the side of the image...
<p><img src=... />This is the paragraph text.</p>

Also note that floated elements don't display very well in the editor, so check them in the preview or output. In the Flare v3 editor, a floated element will always be left-aligned in the editor. Although Flare v4 will attempt to display the floated element in position, it doesn't work very well and there are a large number of display glitches.

[KevinDAmery]

When I do floats, I put them in a completely separate block. Like this:

<P float right><img src=... /></p>
<p>blah blah blah</p>

[bonnie]

Thanks, Kevin and Dave, for your responses.

This will work - the img tag is outside the text, so it will flow to the side of the image...
<p><img src=... />This is the paragraph text.</p>

I've attached examples of the wrap results I'm getting with the <img> tag at the beginning of the paragraph tag #7, before the text :

Code: Select all

<p class="step_2" MadCap:autonum="<b>7.</b>  "><img src="../Resources/Images/Sort_by_time.png" float="right" style="width: 237px; height: 106px;" />Click on the <b>Var</b> options drawer to get a list of the other variables you loaded into the window.  Click on <b>gvar_ch2</b> to select it.  The <b>gvar_ch2</b> images will appear in the window.</p>

The wrapping I'm getting in the WebHelp is no different than a non-floated image:

image_wrap_Webhelp.png

The results in the PDF are an improvement, when the <img> is placed at the beginning of the paragraph: the image is now wrapped by the text in the paragraph in which it is placed, rather than falling into the paragraph below, which is what was happening when I had the <img> tag at the end of the paragraph; the image still doesn't align at the top of the paragraph. I'm not sure yet, but maybe this is because I have vertical-align=baseline for the <p>, which I had to do in order to get the autonumber to align with the text bottom in the PDF.

image_wrap_PDF.png

When I do floats, I put them in a completely separate block. Like this:

<P float right><img src=... /></p>
<p>blah blah blah</p>

You're right. This works good for the PDF, but in the WebHelp, it puts the image above the paragraph that I want to wrap around it.

So...should I be expecting to get text wrapping of a float image in WebHelp?
Thanks again,
Bonnie

[bonnie]

There should be no vertical align properties set on the <img> tag.

OK. That's good to know. I was using the Object > Media Properties window which shows a menu of Vertical Alignment choices. This comes up when I right-click on the <img> tag. But you've explained why my selections weren't having any effect on the image. Is this true for all <img> tags, or just floated images?
Thanks, Lisa.
(I was following the "Positioning Objects" help page, which says you can vertical-align the image this way.)
Bonnie

[LTinker68]

The vertical align property only works on tags that contain something. Like a <p> tag can contain text and image, a <div> tag can contain paragraphs, text not in paragraphs, images, etc., a <td> tag contains text, images, paragraphs, etc. So you're positioning how the content is aligned inside that container tag. The img tag isn't a container tag, so vertical align has no affect in it.

BTW, if you're modifying styles in the Stylesheet Editor, you can select the option to show relevant properties -- it'll only show the properties that are available for the selected tag, instead of showing all properties, some of which may not work with the selected tag.

[LTinker68]

You might need to add a clear value on the floating element. I have some small images (screenshots of the menu options) that have captions below them. I have both the screenshot and caption inside a div, and the div is set to float right. In the code, the div is written above the list containing the definitions of the menu options. You can modify the position of the graphic in the div by adding padding to the top of the div.

Here is my stylesheet code for the div:

Code: Select all

div.screenCaptionRight
{
	float: right;
	height: auto;
	width: auto;
	padding-left: 4px;
	clear: left;
}

Here's an example of how the div is used in the topic:

Code: Select all

<div class="screenCaptionRight" MadCap:targetName="01div">
     <img src="../images/swSpecViewer/mainScr_menuFile.png" title="File Menu" />
     <p class="captionFig">File Menu</p>
</div>
<ul class="noBullet" MadCap:targetName="01list">
     <li><strong>Open File</strong> ― Select this option to...</li>
     <li><strong>Close File</strong> ― Select this option to...</li>
</ul>

Note that I haven't tested this in my print output yet. You may need to adjust some of the parameters on the print version of the custom div to get it to position correctly in the print output.

[bonnie]

You might need to add a clear value on the floating element.

The captions in my graphic are now part of the graphic itself, so there is only one image in the paragraph tag.

But thank you for the DIV code example. I will be able to put that to use for some of my other graphics.

Bonnie

[NorthEast]

Here is my stylesheet code for the div:
div.screenCaptionRight
{
float: right;
height: auto;
width: auto;
padding-left: 4px;
clear: left;
}

Surely if you set the clear:left that means text will not wrap to the left of the floated image on the right? I wouldn't use that setting if you want the text to wrap on the left.

I've attached examples of the wrap results I'm getting with the <img> tag at the beginning of the paragraph tag #7, before the text :

Ah, because you have an autonumber on that paragraph class, it's inserting text before the image tag, which is why the float isn't working.

I'd suggest making a DIV class with the float:right property, then just place your images inside the DIV tag. Place the DIV tag above the paragraph (or other content) that you want to wrap to its left. (And don't set the clear:left property!)

[LTinker68]

Surely if you set the clear:left that means text will not wrap to the left of the floated image on the right? I wouldn't use that setting if you want the text to wrap on the left.

Here's why I have the clear:left property. Say my setup is like the following:

Code: Select all

File Menu
     DIV containing image (set to float right)
     List describing menu options
Edit Menu
     DIV containing image (set to float right)
     List describing menu options

If I have clear set to "right" or "both", and I bring the browser window out so that the file menu's list is smaller than its graphic, then a gap will appear between "Edit Menu" and its list, because the DIV for the edit menu has to be pushed down to give the file menu's graphic room, and since my div is positioned in the source code before the list, then it pushes the list down, too, resulting in the gap. If I have clear set to "left" (or default since the default is left), then there is no gap after "Edit Menu".

I'm a little fuzzy on how the clear property works -- never really heard a good definition for it -- but it works in my situation.

[bonnie]

Ah, because you have an autonumber on that paragraph class, it's inserting text before the image tag, which is why the float isn't working.

I'd suggest making a DIV class with the float:right property, then just place your images inside the DIV tag. Place the DIV tag above the paragraph (or other content) that you want to wrap to its left. (And don't set the clear:left property!)

Unfortunately, even the DIV tag used as described above doesn't work for text-wrapping an image in WebHelp when the paragraph to be wrapped is an autonumbered paragraph.
I used:

Code: Select all

div.float_right
{
	float: right;
	height: auto;
	width: auto;
	padding-left: 4px;
}

And I placed the DIV tag just above the paragraph that I wanted wrapped.

It DOES work for a paragraph that is NOT autonumbered in the WebHelp. But... in the PDF output the image is not floating completely right, as shown in the screenshot below. It seems to be floating in about the middle of the page and leaving a lot of white space to the right of it. (The wrapping paragraph has margin-right=0.)

div_float_right.png

So far, I''ve concluded that autonumbering precludes the text of the autonumbered paragraph from wrapping an image in WebHelp.

Bonnie

[bonnie]

So far, I''ve concluded that autonumbering precludes the text of the autonumbered paragraph from wrapping an image in WebHelp.

I contacted MadCap Tech Support about this issue and have learned the following.

Place the image above the paragraph that you want to wrap, but don't put it in a <DIV> tag or a <p> tag. Assign the img tag a float: right property.

This works for non-numbered paragraphs and for ordered lists. It also works for autonumbered paragraphs that have mc-auto-number-position: inside-head. But it doesn't work for autonumbered paragraphs that have mc-auto-number-position: outside-head.

Bonnie

[BobMerrill]

Hi there,

I've battled this issue for some time. In Flare 4, it is substantially improved.

A word on the clear property - what it does is clear text-wrapping in response to any previously defined floated entities. The valid values are left, right, or both.

The effect of a clear is to force text from that point on in the page (until the next float is declared) to appear below any floated block.

For example:

Code: Select all

<h1>My heading wont wrap</h1>
<p class="floatright"><img src="myimage.jpg /><br />My caption is below the image. To center the caption, set the text-align property to "center" in the floatright class.</p>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>

<h1>My heading will wrap</h1>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>

<p style="clear:right;">This text won't wrap, and will appear below the caption of the image.</p>

This definitely works in WebHelp, and seems to work in PDF output as well. It did NOT work in Word output prior to Flare 4, and I had to use two slightly different tables, one for print and one for WebHelp, each containing an image and caption, then use a Word script to set the attributes for the tables so they wrapped properly. Those days are thankfully behind me.

I don't recommend using clear:left in a right-floating block unless you swear you will never use floating blocks to the left of your content. Here's a case where you might want to use both:

Code: Select all

<div id="contentcontainer">

<div id="leftnav">
This block would be floated left, and would be the full height of the window.
</div>
All your content goes here. If you clear left anywhere in here, the content will appear below the left nav box, and flush left.
</div>

Floating can get pretty wacky, but is wicked powerful for a lot of things, and is far preferable to tables. I recommend a Sitepoint book called "HTML Utopia: Designing Without Tables Using CSS". It also contains an excellent CSS reference; my copy is well-worn.

Good luck.

Bob

[bonnie]

Hi Bob,

I tested your recommendation for centering captions under images floated right (code below), and it works very nicely. ( All except for autonumberd paragraphs with mc-auto-number-position: outside-head.)

The problem I'm having is that in the XML Editor, the image and caption in the floatright paragraph are all off to the left of the screen, so I can't see them and can't do any editing of that paragraph in the Editor itself, but have to edit it in the Internal Text Editor instead. Is that what happens for you, too?

Code: Select all

<h1>My heading wont wrap</h1>
<p class="floatright"><img src="myimage.jpg /><br />My caption is below the image. To center the caption, set the text-align property to "center" in the floatright class.</p>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>

<h1>My heading will wrap</h1>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>
<p>text I want to wrap around the image.</p>

Also, thanks for the book recommendation. I am looking forward to getting it.

Bonnie

[BobMerrill]

Yes, I've reported that as a bug and sent a test project to demonstrate it. I've decided to live with it.

By the way, I realized that my example violated the recommendations of MadCap Customer Support recommendations that you not put the image in a paragraph. In my opinion, this is the easiest way to put a caption under an image - you have to have some sort of block element to contain everything you want floated. DIVs are my choice in the web world, but Flare doesn't let you work with them very easily. A <p> tag was the absolute easiest block element I could think of, and it seems to work well.

Also, I have a floatright class that is generic - it can be applied to any element, so if you want to apply it to an image directly, or a div, list, heading, table, form, or any other block element, you can do it. I mostly use it with <p> blocks, but have been known to use it for other things. To my knowledge, you can't create a generic class in the Flare style sheet editor, but I could be wrong. My CSS declaration looks like this:

Code: Select all

.floatright
{
	float: right;
	margin: 10pt;
}

I also have a floatleft declaration, but I don't use it as much.

Bob

[ladyrae]

So, am I reading this chain correctly - there is currently no way to wrap text around an image if it is mc-auto-number text with outside-head position?

Most of the text in my help system is mc-auto-number text with outside-head position - and I'd like to place screenshots on the right side of the window, with my numbered instructions wrapping around to the left of these images. I've tried this, and it looks fine in Flare, but in the webhelp output the text is falling below the image. This is the same problem Bonnie described, and it sounds like none of the solutions offered work for this problem exactly, with the outside-head postion?

[NorthEast]

So, am I reading this chain correctly - there is currently no way to wrap text around an image if it is mc-auto-number text with outside-head position?

No, you can do it, just don't put the image inside the tag containing the autonumber.

For example, say your autonumber list was set up in p.list and you put your images inside a right-floated div div.right.
You'd structure your content like this...

<p.list>Line 1 of your list.</p>
<div.right> <image /> </div>
<p.list>Line 2 of your list.</p>
<p.list>Line 3 of your list.</p>

The div containing the image would appear to the right of the list, aligned with line 2.

If you put the div.right tag inside a p.list tag, then it wouldn't work.

[ladyrae]

That's great, if I can get this to work I'll be very relieved. Thanks, Dave!

I haven't worked with <div> tags yet (am still fairly new to flare, css and xml). I *think* I've changed it to be structured like your example, but I'm getting an error when I try to preview - 'Failed to complie document: object reference not set to an insance of an object.' This is what it looks like. (text is just a test/placeholder while i try to get this to work). The problem seems to be with the <div> tags, because if I replace those with plain <p> tags, I can preview the page.

<h6 class="olli1" MadCap:autonum="1.10 ">test text</h6>
<div.right> ><img src="../../Resources/Images/VMP_0.6.8.0_Products_nodata_generaltab.png" /> </div>
<h6 class="olli1dec" MadCap:autonum="1.10.1">test text</h6>
<h6 class="olli1dec" MadCap:autonum="1.10.2">test text</h6>

Is the fact that I've used H6 class instead of p.list affecting this? I wouldn't think that should affect it though, as it's just a class like anything else, with styles I've defined.

Thanks for any help you can give me with this!

[BobMerrill]

Unless I'm missing something, you could just as easily use <p> tags as <div> tags for the float. (My example uses <p>s, rather than <div>s.) They would just have a different class that contains a float attribute. A <p> element is a block element in the same way a <div> is.

Bob

[KevinDAmery]

Here's one thing I noticed:

Code: Select all

<div.right> ><img src="../../Resources/Images/VMP_0.6.8.0_Products_nodata_generaltab.png" /> </div>

It looks like there are two closing brackets for the start of the Div. If that's in your topic, that will prevent it from working. (If it's just a typo when posting to the forum, well, carry on....)

[ladyrae]

sorry - actually there was an extra '>' in there, but it doesn't work after I've deleted that either, same problem.

I can preview the page if I change the end tag to < /div.right>, I get no error, but the image is still not on the right with text wrapping on the left. And if I set the float to 'Right' the text doesn't wrap.

Do I need to create a <div.right> class? Maybe that is the problem... if so, how would I set that up?

[BobMerrill]

<div.right> is not a valid tag, although it might be valid XML if both the opening and closing tag are the same.

It should be <div class="right">...</div>

There should be a generic class in your CSS file that contains the float:right attribute. The rule would look like this:

.right {float: right;}

As I said before, once you have that class, it could just as easily be applied to a <p> tag. Having not used auto-numbering, I'm not sure if it only applies to paragraphs of a particular class. If so, <p class="right"><image src="myimage.png" /></p> would work. If it autonumbers all <p> tags, you would have to use a different block element, and <div> is probably the best choice.

Bob

[BobMerrill]

To elaborate on my previous post, you seem to be confusing CSS selectors with HTML class attributes.

If you think of the CSS as selecting particular parts of the code to apply styles to, it is easier to understand.

For example:

p.right selects any paragraph that has the class "right" applied.

It would select <p class="right>...</p>

.right selects any element that has class "right" applied.

It would select <p class="right">...</p> or <div class="right">...</p> or <image class="right" src="myimage.png" />

div .red selects any element inside a div that has class "red" applied.

It would select <div class="anything><h1 class="red">this would be styled</h1><p this would not be styled <span class="red">this would be styled</span></p></div>

div.content p.right selects any paragraph that has class "right" applied inside a div that has class "content" applied.

It would only select <div class="content"><p class="right>this part would be styled by the rule.</p></div>

Don't know if that helps or confuses.

Bob

[BobMerrill]

Not to put too fine a point on it, but one more clarification:

The CSS examples (p.right, div.right, etc.) are rules contained in your CSS file. The browser uses those rules to render the HTML in a particular way (as does the Flare PDF engine).

Bob