Highlighted

Real Estate on Left Hand Side

Community Beginner ,
Jun 27, 2019

Copy link to clipboard

Copied

The Facts:

RoboHelp 2019

Output to Responsive HTML 5

Import Word Doc

Azure_Blue Skin

My RoboHelp projects (Import from Word) output is not flush to the left margin.

A coworker has produced RoboHelp projects (Responsive HTML 5) that were imported from FrameMaker and the output is flush to the left margin.

Is this configurable or a limitation?

RH 2019 Left Margin.PNG

Views

382

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

Real Estate on Left Hand Side

Community Beginner ,
Jun 27, 2019

Copy link to clipboard

Copied

The Facts:

RoboHelp 2019

Output to Responsive HTML 5

Import Word Doc

Azure_Blue Skin

My RoboHelp projects (Import from Word) output is not flush to the left margin.

A coworker has produced RoboHelp projects (Responsive HTML 5) that were imported from FrameMaker and the output is flush to the left margin.

Is this configurable or a limitation?

RH 2019 Left Margin.PNG

Views

383

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

Copy link to clipboard

Copied

You are both importing different documents so I think we can discount what is coming in from Fm.

Does the Word document have margins applied to the styles?

Have you looked at the CSS of the topic(s) created? It looks like a margin has been applied to the body tag.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Community Beginner ,
Jun 28, 2019

Copy link to clipboard

Copied

No margins applied to styles in Word.

Here's a screen cap of a typical topic in the project. No margins here, either. Unless I'm not looking in the right place.

RH 2019 Left Margin2.PNG

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...
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

Open the CSS and look at it in Source view. Is there a margin applied to the body tag?


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Community Beginner ,
Jun 28, 2019

Copy link to clipboard

Copied

Forgive me, but are you referring to the CSS in Word or RoboHelp?

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...
Adobe Community Professional ,
Jun 28, 2019

Copy link to clipboard

Copied

There is no CSS in Word.

css.png

Click the image for a larger version.

Double click whichever CSS is applied to the topic. Look in Topic Properties if not known.

Click the shaded icon top right to see the CSS in source view.

Look for margin left.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Community Beginner ,
Jun 28, 2019

Copy link to clipboard

Copied

Peter,

I may have figured it out. The first screen cap I sent you was taken from my desktop PC monitor.

I tested the help on an iPhone in both landscape and portrait mode. Below is the output.

LANDSCAPE MODE:

RH Output on iPhone_landscape.png

PORTRAIT MODE:

RH Output on iPhone_portrait.png

So maybe the Responsive HTML accounts for the lack of real estate on an iPhone. I believe I had a similar experience when I tested on an Android tablet.

Do you think my theory is correct?

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...
Adobe Community Professional ,
Jun 29, 2019

Copy link to clipboard

Copied

The first screen shot shows text indented much more. The title bar is much further left than the text and I would say that is not correct.

In the recent two, the text is in line with the menu in both modes. That is pretty much what I would expect. It looks like a different skin too.

Difficult to say. Different browsers will have some differences in appearance but not that much. Bottom line is if it works in the skin you are going to use, there's nothing to worry about. However, I would still be looking in the CSS.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Community Beginner ,
Jul 01, 2019

Copy link to clipboard

Copied

Thanks for your responses. It appears that each topic uses two CSS.

I've looked at each CSS file and I cannot see any left margin indentation or manipulation.

Can't figure out how to attach the CSS files for your to take a look at.

CSS Topic Properties.PNG

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...
Community Beginner ,
Jul 01, 2019

Copy link to clipboard

Copied

More discovery. So I first removed the default CSS from the topic and compiled. No change in left margin.

However, after I removed the MongoDB CSS from the topic and compiled, the left margin is much better/reduced.

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...
Adobe Community Professional ,
Jul 01, 2019

Copy link to clipboard

Copied

Take a look at the RoboHelp Reimagined sample project where importing is explained. The second CSS is created to cover styles needed by RoboHelp to keep the appearance of the document. Deleting it has fixed the issue you are reporting but it may have impacted other content.

Clearly that CSS had the margin in it but what else? Open it is a text editor or RoboHelp and use the Source View. Although you have deleted it from the topic, it is still in the project.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Community Beginner ,
Jul 01, 2019

Copy link to clipboard

Copied

Here's the second CSS file. This is the only area where the margin is not set to 0.

CSS Source.PNG

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...
Adobe Community Professional ,
Jul 01, 2019

Copy link to clipboard

Copied

That shows a margin of 1cm, top, bottom, left and right and a maximum with of 20cm. I doubt you want any of those. However, there are two other styles that the document needs as some paragraphs (those with the class Title) are now not specified.

You need to locate those and apply another style or add this CSS back in but delete the body tag that you have highlighted. The body tag in your main CSS will then apply and that is what you want.


See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Community Beginner ,
Jul 01, 2019

Copy link to clipboard

Copied

I removed the lines that have margin of 1cm, top, bottom, left and right

and a maximum with of 20cm from the css file and re-added the file to the

Assets folder.

This appears to work!

I'll have to add to my notes to remember to remove those lines to the css

file every time I import a Word document. Thanks!

On Mon, Jul 1, 2019 at 11:45 AM Peter Grainge <forums_noreply@adobe.com>

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...
Adobe Community Professional ,
Jul 01, 2019

Copy link to clipboard

Copied

Putting it in the assets folder does nothing. It must be linked to the topic.

It might not happen with your next import. It depends on what's in the Word

document.

Do read up on it as it will make import work much easier to understand.

Peter Grainge

www.grainge.org

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Community Beginner ,
Jul 01, 2019

Copy link to clipboard

Copied

Would like to learn more. Where can I access the RoboHelp Reimagined sample project?

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...
Adobe Community Professional ,
Jul 01, 2019

Copy link to clipboard

Copied

It should show on the Start screen when you open RoboHelp. If not in File

Explorer look in Documents > My RoboHelp Projects.

Peter Grainge

www.grainge.org

@petergrainge

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

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...
Amebr LATEST
Adobe Community Professional ,
Jul 01, 2019

Copy link to clipboard

Copied

The margin entry is actually written in a shorthand version. The first value says what to do for the top and bottom margins, while the second entry says what to do for the left and right margins.

So margin: 1cm auto; means

1. Add a 1cm margin to the top and bottom

2. Evenly distribute any remaining space to the left and right margins. (essentially centering the content.)

(It could also be written as margin: 1cm auto 1cm auto; the written order is top margin, right margin, bottom margin, left margin.)

In this case, the body width is set to a max of 20cm, so the remaining width of the window is assigned as left and right margins (I couldn't say how much as that depends on the width of your browser and screen resolution and a few other things).

So you could try a few things, but if you don't know HTML and CSS I would suggest trying to get help from someone at your company with expertise.

Note I haven't tried any of these with a RH skin. This is just explaining some general CSS techniques. Changing one CSS property can have unwanted flow on effects depending on how the HTML and CSS is set up.

  • You could remove the max-width, however that will mean the text will be super wide on a desktop monitor which will make it harder to read. I'm not sure what effect it would have on tablet or phone sizes.
  • You could specify a left margin, so that the extra space is assigned to the right margin. e.g. margin: 1cm auto 1cm 1cm; .  This may look really strange so you'd need to test it out.

There may be other options. These are just two off the top of my head.

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...