Ordered list issues in Responsive HTML5 output

[ArmadilloC]

I'm trying (with my very limited HTML abilities) to create a custom .css for my Responsive HTML5 output but at the moment, numbered lists are defeating me. If I select Convert to Text for my list style  then I get this in the HTML output. . If I select Convert to List then I get this in the HTML output . Essentially the same, except a bigger gap after the number in the list. My .css looks like this . If I change p.List1 to li.List1 then FM can no longer see the List1 style here . I'm hoping someone can tell me what I need to change in either my .css or the selections on the FM Publish Settings to sort this out. 

[FrameMaker-dk]

Thank you. I have recieved your mail and sent you an HTML5 version of your document

[Jeff_Coatsworth]

As an aside, since Edge now is built on the Chromium platform, both Edge and Chrome should give you nearly the same results these days.

[Matt-Tech Comm Tools]

If your HTML list is using p elements, you may not ever be happy with your results, as you are trying to use paragraphs to manage your items.

Think of it the same as if you manually typed in your list numbers in your FrameMaker list...

Instead, map your content to HTML lists, which allows you to format your LI elements inside your OL elements as you would in a normal HTML file.

You may need to customize the CSS, but getting the proper nested LI inside the OL is the first step.

[ArmadilloC]

If you're able to provide detailed instructions on how to do that, that'd be great. As far as I can tell, it's not possible.

[FrameMaker-dk]

Hi @ArmadilloC 

You need to define the unordered and ordered paragraph styles as "lists" like this:

When you publish as HTML5, FrameMaker will generate a folder structure, where the published output resides. The output folder will be named after your job, so the job folder may, for instance, be "SystemManualTemplate".

Inside that folder, we will find the HTML5 folder. And inside the HTML5 folder, we will find the actual topics.

In the topics folder we will find the css file belonging to the topic.

the css file can be opened in a text editor and willl look somewhat like this. I have marked the List css properties

You can work both ways now. You can copy out the css file into another directory and edit it. And copy it into the HTML5 topics folder and watch how the formatting changes.

OR - which is what I prefer, keep all the editing in FrameMakers HTML5 editor. Keeping an eye on the actual generated code, can be very practical, though.

[ArmadilloC]

Thank you Bjørn, that is a way easier method of seeing the changes than what I was doing with updating the .css, saving it, importing it via FM and then republishing each time. Unfortunately, my original issue remains. Unless there is a .css setting to alter the space between the number and text, I am still at a standstill. I'm going to park this for a while before it drives me around the twist. 

[Jeff_Coatsworth]

Think you're looking to use the list-style-position property - from w3schools.com:

[Winfried Reng]

When I had tested an export, my instruction paragraphs were converted to CSS with p.instruction, regular paragraphs.

The element has a left margin, and the first line has a negative indentation.

The numbering uses a counter.

It used these properties:

margin-left:14.17pt;
text-indent:-14.17pt;
counter-increment:I_1;

https://www.w3schools.com/css/default.asp

I also use w3schools to get more info.

There are different ways to get a desired layout.

[ArmadilloC]

Yes, Winfried that first line negative indent seems to be what I'm lacking. My css has very similar properties to yours otherwise. I think I might pack it in and become a lion tamer. 😄

[ArmadilloC]

I've played with that code, but it didn't fix my problem. That moves the position of the numbers relative to the margin more than anything. Plus, I'm dealing with paragraphs pretending to be ordered lists. That's the nature of FM exporting to HTML and you can't fix it.

I've also tried telling FM to ignore the autonumbers when it exports and replacing them using the code list-style-type: decimal, which looked good but I couldn't work out a way to restart the numbers in the nested lists.

[Jeff_Coatsworth]

@ArmadilloC - clearly that's not the case with @Matt-Tech Comm Tools 's comment -
"If your HTML list is using p elements, you may not ever be happy with your results, as you are trying to use paragraphs to manage your items....

Instead, map your content to HTML lists, which allows you to format your LI elements inside your OL elements as you would in a normal HTML file.

You may need to customize the CSS, but getting the proper nested LI inside the OL is the first step."

[Jeff_Coatsworth]

This blog post of his may explain more - https://techcommtools.com/fm-publishing-html5-lists/ 

[Matt-Tech Comm Tools]

Yes, you're dealing with p elements and not ol and li elements. First, set your mapping options to create actual html lists per my post that Jeff referenced above. Then work on the CSS, probably directly in a text or HTML editor, not likely in Fm.

[ArmadilloC]

Jeff and Matt, thank you so much for continuing to offer help. I'll show you my results. This pic shows the outcome from straight copying your code into my List1 and List2 styles. The issue is the 3 non-breaking spaces that I seem to get after the number. If I then play with the indents to get the text lined up on the 9. I'm still left with my initial issue on 10. It's these 3 non breaking spaces that are killing me. Other people don't seem to have them in their results.  

[Matt-Tech Comm Tools]

Sorry, I can't help with the p formatting. If you decide to use actual HTML lists (OL and LI elements), I can advise.

[ArmadilloC · Accepted solution]

In late breaking news, I've managed to get the latest version of FM and this issue is sorted now. Hooray!

[Jeff_Coatsworth]

FM2022 patch 4? Using p or HTML ol/li elements?

[milliee62922081]

Hi Jeff, this is the OP on my home account. Yes, the latest 2022 version. I ended up following the instructions in the link you posted https://techcommtools.com/fm-publishing-html5-lists/. Even doing that with the old FM version was giving fairly rubbish results though and have improved enormously with the version upgrade. As you can see in the excerpt I've posted below from your link, FM no longer provides an option to use ol/li elements. Everything maps to p elements instead. 

[Jeff_Coatsworth]

I haven't checked lately with the new versions, but the import of FM content into a RoboHelp project still (I believe) gives you this mapping ability to put them into ul/ol elements.