Help and Manual version of the "Clearfix Hack"

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
Pshooter
Posts: 18
Joined: Tue Aug 19, 2008 3:55 am

Help and Manual version of the "Clearfix Hack"

Unread post by Pshooter »

Hi there,

Some of my pages end up looking like this:
Image

https://imgur.com/a/DMJ8NWu

It was recommended to me that I look at the "Clearfix Hack." I found a nice explainer with some code here:

https://www.w3schools.com/css/tryit.asp ... _clearfix2

My question is: Is there a place in the HTML template(s) where I could paste this code to have it work for my Help & Manual output? I need to output Webhelp and .CHM formats. I do use the Premium Pack with H&M, if that makes a difference.

For someone with moderate or better skills, this would probably be easy. My skills are at the elementary level.

Thanks!

Paul
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Help and Manual version of the "Clearfix Hack"

Unread post by Tim Green »

Hi Paul,

For this solution I'm assuming the following (all essential for it to work):
  • You're using a list and inserting your images right at the beginning of each list item and setting their alignment option to "left".
  • Only one image per paragraph, so if those images showing two icons are two images you will need to combine those to a single image for this to work.
  • You must set lists to be exported as text (the default) in Configuration > Publishing Options > HTML Help/Webhelp > HTML Export Options
  • This WON'T work in PDF, DOCX, Kindle or ePub. So if you are planning to export to any of those formats you should not use this solution. Instead, just use a table to position the images to the left of your paragraphs. This will also mean that you can't use a list (lists can't span table cells) so the numbering will also need to be manual.

Step 1: Define a paragraph style
This will be a style that you will only use for list items with images aligned to the left of them. It should have the same formatting as the normal body text paragraph that you would be using for this, just a different name. This is necessary because the paragraph is the container of the image and the clearfix needs to be applied to the paragraph. Then use this style for all the

Step 2: Assign your clearfix class name to each image
This is necessary to be able to style the image with CSS. Double-click on the image in the HM editor and in the HTML Class: field enter "clearfix". (That's the class we'll be using in this example. You can call it anything you like if you change the name in the CSS accordingly. )

Step 3: Add the clearfix CSS to the HTML page template in your skin
(If you are not using a skin you do this in your project.) Open the .hmskin file in Help+Manual, go to Configuration > HTML Page Templates > Default and enter the following code directly before the closing </head> tag:

Code: Select all

<style type="text/css">
 .clearfix {
    margin-top: 0.2rem !important;
    margin-right: 1.5rem !important;
    margin-left: -1rem !important;
 }
 .p_ParaStyleName::after {
    content: "";
    clear: both;
    display: table;
    height: 0.7rem;
}
</style>
Replace the "ParaStyleName" part in ".p_ParaStyleName" with the name of the style you have defined for your paragraph.

The position and margins of the images next to the paragraph on the left is controlled by the three margin values in the .clearfix{} definition. You should use rems and not pixels to ensure that it also works on mobile devices in responsive layouts.

The spacing between the paragraphs is controlled by the height: attribute in the paragraph style CSS. If you don't use this the paragraphs may be spaced too close together.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Pshooter
Posts: 18
Joined: Tue Aug 19, 2008 3:55 am

Re: Help and Manual version of the "Clearfix Hack"

Unread post by Pshooter »

Hi Tim,

Thanks for the great reply.

Thanks for listing your assumptions as well - very helpful for future troubleshooting!

Right now, my project does NOT use lists, and the numbering is somewhat arbitrary. This is an electronic version of a printed rulebook, so renumbering is not an option.

I can combine images, no problem.

If lists are not being used, is there a similarly elegant solution to this?

Also, is there a way to bulk-assign pictures to a class? I have over 2,300 graphics that will need assigning.

Thanks,

Paul
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Help and Manual version of the "Clearfix Hack"

Unread post by Tim Green »

Hi Paul,

This should also work if your paragraphs are not lists, since the paragraph will be the image container whether it is a list or not. You will probably need to adjust the margin settings a little, but that will be all.

The only way to bulk-apply this would be by doing a multi-file regular expression search and replace on the XML source in the XML topic files (uncompressed project, files in the \Topics folder). However, this would be tricky because you would need some clear identifier -- something common to all the file names and only those file names -- to distinguish the files that need the fix from the ones that don't. Otherwise it would get applied globally to all the images in your project, which you don't want. :?
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Pshooter
Posts: 18
Joined: Tue Aug 19, 2008 3:55 am

Re: Help and Manual version of the "Clearfix Hack"

Unread post by Pshooter »

Thanks, Tim!

I'm going to give this a try.

Paul
Post Reply