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. 

[Winfried Reng]

Hi,

As far as I remember, FrameMaker/HTML5 uses spaces to create the gap between the number and the text. Can you check this?

You might get better results, when you change your numbering in your FrameMaker file from e.g. <n+>\t to <n+> and a single space. Then the conversion will not replace the tab with several spaces, but only one.

Best regards, Winfried

[ArmadilloC]

Using a space instead of a tab then causes the same issue in the PDF output and didn't fix the HTML unfortunately

[Winfried Reng]

You can ignore the PDF output here. You would use formats either for PDF or HTML5 and when you want to export to the other, import those format into your FrameMaker files.

The goal here is to get a fix for your HTML5 output.

[Jeff_Coatsworth]

Have you tried using the option to map to an HTML element? I would go mapping my FM lists to an ol tag in the HTML. Then you can concentrate on the styling of them in the CSS.

[ArmadilloC]

"I would go mapping my FM lists to an ol tag in the HTML." Yes, this is what I'd like to do. Are you able to provide detailed advice on how to do that? I've been creating and importing a .css to do just that but I'm having the issue detailed in my question.

[Jeff_Coatsworth]

I think you'd do that by selecting the "Map to HTML Tag" option in that screenshot you posted.

[ArmadilloC]

That dropdown only displays one option titled "Pre" and I don't think that's it.

[Jeff_Coatsworth]

I suspect that's the case when you have the Automap Paragraph Styles selected - if you're mapping to HTML elements, you don't want to automap - I think that just gives you a bunch of FM_xxxx styles. 

[FrameMaker-dk]

I believe it is because you are not using tabs. This is a screen dump from the Extra Anejo template:

... and this is from the corresponding FM file. I am using tabs after the autonumbers.

[ArmadilloC]

 I am using tabs for that style.

[ArmadilloC]

 My tab stops are 1cm left. Does that sound right?

[Winfried Reng]

Yes. 1 cm left alignment is fine.

When you export to HTML5, how is the distance between number and text achieved? With a number of spaces (that's my experience a few years back)? or with tabs?

When 1 cm left inserts always e.g. 4 spaces for the numbers 0 to 9, then you will always have this number, regardless of how many spaces you would need for numbers 10 and above.

I do not know, how to configure CSS to get a left alignment for all paragraphs with numbers from 0 to 9 and numbers 10 and above.

[milliee62922081]

Using tabs or spaces in the FM styles made no difference to the HTML output. My understanding is that the specific browser you're using determines the space between number and text in an OL. I don't know how to get the left alignment either. That's exactly the answer I'm looking for.

[Winfried Reng]

What I mean is: How are the distances between number and text in the HTML code achieved, not in the FrameMaker file.

[milliee62922081]

Yes, I understood what you were asking. My understanding is that the browser determines this. It is not a setting you can input.

[Winfried Reng]

I just did a test and converted a copy of one of my files to HTML5.

I applied an "instruction" paragraph format to about 40 paragraphs. And it looks great without customizing anything.

The CSS code for this instruction paragraphs is:

p.instruction {
margin-left:14.17pt;
margin-right:0.00pt;
margin-top:4.00pt;
margin-bottom:4.00pt;
text-align:left;
text-indent:-14.17pt;
line-height:12.00pt;
word-spacing:0.25em;
hyphens:auto;
direction:inherit;
color:#000000;
font-family:"Open Sans Light";
font-size:10.00pt;
font-weight:300;
font-style:normal;
background-color:transparent;
text-decoration:none;
letter-spacing:0.00em;
font-stretch:normal;
text-transform:none;
font-kerning:none;
counter-increment:I_1;
}

The HTML code of one of the paragraphs is e.g.:

<p class="instruction" id="12868654"><span class="numbering">14<span style="padding-right:4pt ;">&#8203</span></span>Status monitor&#x3A; with LED</p>

The indentation is not interrupted as in your screenshot.

Therefore, can you go back and start with a new sts file and see, what FrameMaker does with your list.

Then you can start customizing.

[ArmadilloC]

Thanks Winfried, I appreciate you spending the time. The thing I'm not seeing in the HTML code is this: <span class="numbering">. I think perhaps that might be where the problem is. I'm not sure how to change that. I'm using FM version 16. Perhaps the issue lies there.

[ArmadilloC]

Winfried, can I ask if you have this selected?  and which option you have selected here? . I'm starting to think this is actually a FM bug because the numbers should automatically be right aligned, but they're not.

[Winfried Reng]

Yes. Convert to Text is selected.

[Winfried Reng]

And Automap Paragraph Styles is not selected.

[ArmadilloC]

I'm still in struggletown with this. Can I ask which browser you're looking at the results in? I'm using Microsoft Edge and I don't have access to using Chrome.

[Winfried Reng]

I use Firefox, but the numbered list looks the same in Edge and Chrome.

[FrameMaker-dk]

@ArmadilloC if you are interested I shall be glad to take a look at your project off list. No guarantees given, though, but for free 🙂

Best regards

Bjørn Smalbro

[ArmadilloC]

That is extremely kind of you Bjørn! I've emailed the FM template I'm using and my current .css that I'm mapping to to your company email. When I tried to attach it here it was saying that my .FM file is not really a .FM file. I'm happy with the PDF output but the lists and I are not friends in HTML. You can see there's two versions of nested ordered lists in the template (one for bullets and one for instructions).

One other issue that I haven't tackled yet is that I'm decreasing the font size when I output to HTML and the table row height is not changing to suit. I don't know if you have any ideas about that?

I'd like to output it to the charcoal grey default Responsive HTML template. Oh, and I'm using Version 16.0.2.916. I'm not able to get the latest version unfortunately.