Issue with images and paragraphs in lists in RH 2020 when editing code

[AdvancedHelp]

Hi,
I have an interesting issue with RH 202 (v3).
When I add an image or text (that is not part of the instructions) to a numbered list, I usually go into the code and add a paragraph for it to sit in.
So:

1 Instruction
2 Instruction
Information relating to point 2, but not part of the instruction flow
**Image***
3 Instruction

The code would be (simplified):
<li>Instruction</li>
<li>Instruction
<p>Information relating to point 2, but not part of the instruction flow</p>
<p>**Image***</p>
</li>
<li>Instruction</li>

I've done this for years, as it avoids the awkward start="3" that so often ends up causing trouble.
However, now, when I go into the code and add the paragraphs, this happens:


Information relating to point 2, but not part of the instruction flow
**Image***
1 Instruction
2 Instruction
3 Instruction

It takes the image and paragraph text and dumps it out of the list.

I've used this method in every project I've ever written, and as I'm in charge of some 46,000 topics now, that's a lot of jumping images.
And it's not restricted to just the images and text I've just changed, it upsets the entire topic, pushing all images out of the lists. I haven't tried it with bulleted lists.
Thankfully I have a workaround, I can edit the code in Notepad++. But as the devs went to so much trouble to make the editor so much better, it seems like a shame, and an inconvenience.
Nicola

[Peter Grainge]

2 Instruction
Information relating to point 2, but not part of the instruction flow
**Image***
3 Instruction

Do you want "Information..." and the image to be aligned to the number? If they could be aligned to the text as below, the easier solution is after the instructions in 2, press Shift Enter. You will then get the text aligned as below. Same again when you get to the end of the information. You could apply italics or a colour to differentiate if required.

2 Instruction
   Information relating to point 2, but not part of the instruction flow
   **Image***
3 Instruction

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[Peter Grainge]

This method does not require you to restart the numbering.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[AdvancedHelp]

No, the new paragraph and image should be indented, which a paragraph does.

Yes, inserting a <br/> is fine, and looks like I'll have to use it, but the bug is still there. It also doen't help for items like messages, which need to have their own formatting, and are paragraphs.

And as I said, I've used inseting a paragraph over thousands of files. There is no way to remove them automatically. 

And, as this is standard HTML functionality, it should work. So this is clearly a bug.

I'm supposed to be rolling 2020 out over hundreds of projects, and have already converted some. I'm now worried that this bug has affected some topics without me realising, which means I have to go back over a week's amount of work to check everything is ok.

I'm not sure how using different colours / italics would help? I just want the text to indent as it should do. It's not special text, it's just additional information outside of the step.

Thanks,

Nicola

[Peter Grainge]

I think the issue is you have been putting a paragraph within a list and the strict HTML5 and CSS3 standards that now apply don't like that. Your list closing tag was after the paragraph.

<li>Instruction
<p>Information relating to point 2, but not part of the instruction flow</p>
<p>**Image***</p>
</li>

Try restart numbering again as it's easy enough and is the correct solution. It should only be an issue if you later add items with an earlier list.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[AdvancedHelp]

Ok, that makes sense. Regretfully it's hard to keep up with these types of changes, and when the code validates and shows correctly, it’s harder still to troubleshoot them!
Identifying and changing all of the instances throughout the help is going to be a long job.
Thanks, and have a lovely Christmas,
Nicola

[Amebr]

p within an li is acceptable (li can contain "flow" content; flow content includes p, h1, h2 etc).

So if the latest patch is moving the p outside your list I would log a bug.

[AdvancedHelp]

Thanks Amebr, Peter said this was because of HTML5 conventions. A Google search suggests this is both possible and not possible. (Schrödinger's cat, anyone?)

I have logged a bug, actually, I did it before Peter's reply. However, as this is a help-breaking bug (HTML5 feature????), I'm stuck with fixing it for now.

So I've come up with a different idea for </br> (which you cannot format and looks ugly) or the awful "continue numbering", which always seems to cause issues when you change instructions.

Instead, I've created a li that has "list-style-type: none;" in the CSS. It has to be in a UL tag, but it works well.

So my example is now:

<li>Instruction</li>
<li>Instruction

<ul>
<li class="list-paragraph">Information relating to point 2, but not part of the instruction flow</li>
<li class="list-paragraph">**Image***</li></ul>
</li>
<li>Instruction</li>

At least I can now format it correctly, and although I may end up looking crazy to future authors who touch this project, at least it's robust to cope with this feature. Or bug, or... whatever.

Thanks, 

Nicola

[Peter Grainge]

When I said "I think the issue is you have been putting a paragraph within a list and the strict HTML5 and CSS3 standards that now apply don't like that" I simply meant I thought that might be the issue, rather than categorically it was.

If you want to set up a single topic project where the topic exhibits the problem, I'll be happy to look for you.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[AdvancedHelp]

Ok, I might be better sending you a set of release notes, that way you can see the issue in situ. I'll remove files you won't need.

Are you ok if I send you a version that needs upgrading? That way you can see the whole thing in action. 

Thanks,

Nicola

[AdvancedHelp]

Update:

I'm working on files that I didn't write. I didn't notice that the paragraphs have been placed under <ol> (or <ul>)and not <li> as they should be. So that's why the images jump out of the lists.

If I move the <p> to under an <li>, the images appear to stay put, even when moving from Classic to 202o.

However... if I have a <p> tag that includes a class, it jumps out of the nested list even when under an <li>.

Hope that makes sense... I'm happy to supply a project that shows these characteristics. 

Thanks,

Nicola

[Peter Grainge]

What you are seeing is much clearer with the project you sent me. Instead of seeing a list item, then the associated image, then the next list item and image and so on, what happens is all the images move above the list. Thus you have all the images and then all the list item text. I have not seen that happen or be reported.

I will liaise with Adobe to see if they can throw any light on this.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[AdvancedHelp]

Great, thanks!

Nicola

[Peter Grainge]

The issue is caused by the use of P tags between list items but within a single pair of OL tags. Whilst that worked in Classic versions, it does not comply with the strict HTML5 and CSS3 standards applied in RoboHelp 2020.

You can superimpose a style on an LI tag but not alternate between LI and P within a single pair of OL tags.

What can be done by Adobe is to rewrite the HTML during the upgrade process to meet the standards in such a way that the images remain in the required location.

That will be done via an update. Meanwhile the only solution is to change things in Classic before upgrading. Place the cursor at the end of the text and press Delete. That will make the image part of the list item but look wrong. Next press Shift Enter and the image will remain part of the list item but below the text.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information