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?
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.
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.
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.
Copy link to clipboard
Copied
Forgive me, but are you referring to the CSS in Word or RoboHelp?
Copy link to clipboard
Copied
There is no CSS in Word.
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.
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:
PORTRAIT MODE:
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?
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.
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.
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.
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.
Copy link to clipboard
Copied
Here's the second CSS file. This is the only area where the margin is not set to 0.
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.
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>
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
Copy link to clipboard
Copied
Would like to learn more. Where can I access the RoboHelp Reimagined sample project?
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
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.
There may be other options. These are just two off the top of my head.