How do I connect captions to images using responsive HTML5?

[roryj86911642]

I am working in RoboHelp 2019 and I want to know how to connect a caption to an image (Figure). The problem is when my output is responsive HTML5, as I move the browser window, the text moves and the captions move away from the image.

[Peter Grainge]

New UI 2019 or Classic?

How are you creating the captions?

---

See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

[roryj86911642]

[roryj86911642]

Peter, my boss wanted the captions. I am working with UI 2019 and I called support last night and they suggested that I put the figure and the caption in a one column two row table however the table is not static and the caption and the table don't allow text around them and move with the movement of the window (below).

[Peter Grainge · Accepted solution]

I would have simply created a line above or below the caption using either your ordinary paragraph style or one created for the purpose.

Avoid using a table.

---

See www.grainge.org for free RoboHelp and Authoring information.

@petergrainge

[roryj86911642]

Peter, thank you for your response. My boss and I have been thinking linearly and I have decided not to use captions for figures, but rather use keywords embedded into the topics to find a particular image or topic. Your solution was acceptable had I decided to stick with captions for figures.

Rory 

[vivek_k]

Hi roryj86911642​,

If you are ready to do some manual work in the source view then there is a better way to achieve this. We will provide this feature in next couple of updates from the UI itself. You will have to wrap the img in a figure tag and put the caption tag. following is the example. In the Author view it will render fine.

<figure>

  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">

  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>

</figure>