Highlighted

Responsive HTML 5 Generated from FM 2019 has formatting issues

New Here ,
Jun 25, 2019

Copy link to clipboard

Copied

When an image e.g. icon image, appears in a paragraph or bullet, the indentation gets messed up. The source file is fine if I generate a PDF to check the results are fine but with the Responsive HTML 5, the indentation gets messed up.

Examples of html 5:

I have tried changing the line spacing but that has not helped. I have tried decreasing the icon image so that it's dimension match the text but that has not worked either.

TOPICS
Structured

Views

177

Likes

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

Responsive HTML 5 Generated from FM 2019 has formatting issues

New Here ,
Jun 25, 2019

Copy link to clipboard

Copied

When an image e.g. icon image, appears in a paragraph or bullet, the indentation gets messed up. The source file is fine if I generate a PDF to check the results are fine but with the Responsive HTML 5, the indentation gets messed up.

Examples of html 5:

I have tried changing the line spacing but that has not helped. I have tried decreasing the icon image so that it's dimension match the text but that has not worked either.

TOPICS
Structured

Views

178

Likes

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
Jun 25, 2019 0
Adobe Community Professional ,
Jun 25, 2019

Copy link to clipboard

Copied

Hi,

Is it really the image that causes the incorrect indentation?

What happens, when you delete the image and convert again? Does this fix the indentation?

Or could it be that just the first item of a list (numbered or with bullets) has this incorrect indentation.

Is there anything different in the paragraph setup of the first list item?

Best regards

Winfried

Likes

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
Reply
Loading...
Jun 25, 2019 0
New Here ,
Jun 25, 2019

Copy link to clipboard

Copied

I tested by deleting the icon image and the indentation is perfect without it

Likes

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
Reply
Loading...
Jun 25, 2019 0
New Here ,
Jun 25, 2019

Copy link to clipboard

Copied

I looked up the code of my html files and have found a tag that is added each time an image is added anywhere. When i remove this piece of code, the indentation issue is fixed. But this will not work for me as my help consists of thousands of topics.

Piece of undesired code:      style = "display:inline"

Likes

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
Reply
Loading...
Jun 25, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

Hi,

You can install a text editor like Notepad++ (free) and delete this code in all HTML files with a single command. Very fast and very easy.

I do not know, why this code has this side effect. I checked a few CSS explanations, but this did not help. I am not a CSS expert.

I also have a documentation with inline graphics which I had converted to HTML5.

When I checked this now, I see that this works in most cases (no style = "display:inline). Only rarely the indentation is messed up (with style = "display:inline).

I cannot see a rule, when this code is added.

Best regards

Winfried

Likes

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
Reply
Loading...
Jun 26, 2019 0
New Here ,
Jun 26, 2019

Copy link to clipboard

Copied

That sounds like a solution. I am not sure how I can delete this code from all files. Could you help me out with that? I have installed Notepad++.

Likes

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
Reply
Loading...
Jun 26, 2019 0
Adobe Community Professional ,
Jun 26, 2019

Copy link to clipboard

Copied

Hi,

In Notepad++ in the Search menu click Find in Files.

Enter the text to be found (style = "display:inline), the text to replaced with (empty) and the directory (the directory with all the HTML files).

Then click Replace in Files.

However, please test this first with a copy of your files! Only when this works, you might delete the backup files.

And: You can always convert your FrameMaker files to HTML5 again, if anything does not work.

Best regards

Winfried

Likes

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
Reply
Loading...
Jun 26, 2019 0
New Here ,
Jun 26, 2019

Copy link to clipboard

Copied

Ahh! I was trying to do that with Filters: *.html and it won't work i tried it without any filter and voila! it works. I am going to pitch this solution to my manager. Let's see how she likes it.

Thanks a bunch!

Likes

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
Reply
Loading...
Jun 26, 2019 0