Participating Frequently

Answered

Image Alignment and Text Wrapping Error in Web Output

5 replies
5725 views
Translate

I am having an issue in my final WebHelp Output using Robohelp 2019 but the classic version.

I converted a large 3000 page framemaker book and some images in the robohelp output are not aligned left. I mistakenly chose to align them left using robohelp but now I have the text wrapping around the image. I do not want the text to wrap, and I need the images aligned to the left. Can someone tell me how to fix this in my current robohelp project and when importing and converting for a new project to insure the proper alignment? Also, I did the same thing with some tables which were not aligning to the left, I have some tables with text wrapping around them.

I have attached a screen shot. In this screen shot I even have a footer wrapping?!

This topic is closed to new replies. Start a new post to keep the conversation going.

S

Stefan GentzCorrect answer

Legend

You have added an align="left" to the image. This is causing this effect. In XHMTL 1.0 it makes an image "floating" to the left (text wraps around).

In the code change this:

<img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" align="left" border="0" />

to this:

<img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />

Then it should be back to normal.

If you want to left-align the image, it needs to look like this:

<div style="text-align: left;">
     <img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />
</div>

If you want to center the image, it needs to look like this:

<div style="text-align: center;">
<img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />
</div>

If you want to right-align the image, it needs to look like this:

<div style="text-align: right;">
     <img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />
</div>

In a nutshell: Don't apply the alignment to the image, but to the div tag.

Hope that helps.

S

Stefan Gentz

Legend

Can you paste the HTML source code from the paragraph before the image, the image, and the paragraph after the image + the corresponding CSS code?

Without that, it's difficult to say. Probably there is some formatting involved that makes the image and the paragraph following floating.

Generally said, something like this should work just in the way you want it:

<p>Some text.</p>
<p>
     <img src="imgage.png" alt="my image" />
</p>
<p>Some text.</p>

Translate

N

natalieb7874499Author

Participating Frequently

When I am in the actual project the info is not formatted like that, but here is the code:

If the new PPI

Rx’s delivery option is updated, the system will document the change via

a Tx Note and the Promise Time Prediction field

on the Tx Details screen

will be updated accordingly.

<img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png"

width="568" height="320" align="left" border="0" />

</div>

Transaction

Notes Screen

<p dir="ltr" class="FM_Body" style="margin-top: 1.000pt; font-weight: bold;

font-size: 10.0pt;">

Note:  If

the Rx’s delivery option changes to a mail delivery option, the Order

Details dialog will display to capture all necessary information.

</body>

</html>

or

Translate

S

Stefan GentzCorrect answer

Legend

You have added an align="left" to the image. This is causing this effect. In XHMTL 1.0 it makes an image "floating" to the left (text wraps around).

In the code change this:

<img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" align="left" border="0" />

to this:

<img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />

Then it should be back to normal.

If you want to left-align the image, it needs to look like this:

<div style="text-align: left;">
     <img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />
</div>

If you want to center the image, it needs to look like this:

<div style="text-align: center;">
<img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />
</div>

If you want to right-align the image, it needs to look like this:

<div style="text-align: right;">
     <img alt="Promise_Time_Prediction_Tx_Note.png" id="image4" src="Promise_Time_Prediction_Tx_Note.png" width="568" height="320" border="0" />
</div>

In a nutshell: Don't apply the alignment to the image, but to the div tag.

Hope that helps.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.