Copy link to clipboard
Copied
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?!
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 nor
...Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
When I am in the actual project the info is not formatted like that, but here is the code:
<p dir="ltr" class="FM_Body" style="margin-top: 2.000pt;">If the new PPI
Rx’s delivery option is updated, the system will document the change via
a Tx Note and the <span style="font-weight: bold;">Promise Time Prediction</span> field
on the <span style="font-weight: bold;">Tx Details</span> screen
will be updated accordingly.</p>
<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" align="left" border="0" />
</div>
<p dir="ltr" class="FM_Body" style="margin-top: 2.000pt;"> </p>
<p dir="ltr" style="margin-top: 1.000pt; font-weight: bold; font-size: 10.0pt;">Transaction
Notes Screen</p>
<p dir="ltr" class="FM_Body" style="margin-top: 1.000pt; font-weight: bold;
font-size: 10.0pt;"> </p>
<p dir="ltr" style="margin-top: 2.000pt;"><span style="font-weight: bold;">Note:</span>  If
the Rx’s delivery option changes to a mail delivery option, the Order
Details dialog will display to capture all necessary information. </p>
</body>
</html>
or
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Thanks for your help!
Copy link to clipboard
Copied
Hello, One more question related to this. I am working on a new version of my robohelp project and have reimported the same framemaker files. Some of the same screen shots are center aligned. Is there something I can do in framemaker to ensure that all of my screens will map over in robohelp to left aligned?
Thank you