• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Image Alignment and Text Wrapping Error in Web Output

New Here ,
Mar 13, 2019 Mar 13, 2019

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?!

error.png

TOPICS
Classic

Views

5.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Employee , Mar 13, 2019 Mar 13, 2019

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

...

Votes

Translate

Translate
Adobe Employee ,
Mar 13, 2019 Mar 13, 2019

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 13, 2019 Mar 13, 2019

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>&#160;field

on the <span style="font-weight: bold;">Tx Details</span>&#160;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;">&#160;</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;">&#160;</p>

<p dir="ltr" style="margin-top: 2.000pt;"><span style="font-weight: bold;">Note:</span>&#160;&#160;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

error2.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 13, 2019 Mar 13, 2019

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 18, 2019 Mar 18, 2019

Copy link to clipboard

Copied

Thanks for your help!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 29, 2019 Mar 29, 2019

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp