How to use <figure> and <figcaption>?

[Rene Severens]

Hi,

(Using Flare 10.2.2. writing PDF output)
In HTML5 the tags <figure> and <figcaption> are available.
In the stylesteet there are classes defined to style these tags.

example usage:

<figure>
<img src="../Images/img_10.png" />
<figure>Fig 10: some figure text.</figure>
</figure>

It is even possible to define an auto numbering and this works. Even clearer and less complex than described in the forum topics for auto numbering images.

BUT... where do I select the tags to insert these in the XML editor? Or must this always be done manually inside the text editor?

Greetings,
René Severens

[gbusch]

Not sure about Flare 10 (still using Flare 9).
But in Flare 9 you need to create a stylesheet class for these tags to be able to use them in the XML editor.
Example:

Code: Select all

figure.fig {
	display:block;
}

figcaption.fig {
	display:block;
	mc-auto-number-format: "CF:Figure\00A0{chapnum}.{n+}:\00A0";
}

Anyway i was not able to create figures in a "clean" way.
If you place your image and select "figure.fig" Your image is in that figure.
But how to get the figcaption inside the figure?
So you need to place your image in a paragraph.
And the figcaption in a new paragraph below.
Mark both paragraphs and group them as a figure (press [TAB] and select the figure tag).
Select the paragraph that will be your figcaption.
Change it to "figcaption.fig".
But your image will still be in a paragraph inside the figure...

So instead i would create a snippet that contains alle things you need:

Code: Select all

<figure>
    <img src="enter/a/placeholder/image/here" />
    <figcaption>Enter a placeholder text here</figcaption>
</figure>

Let's assume your placeholder text is something that starts with "figure ...".
When editing your content you just need to type "figure" and you will get a list of snippets or variables etc. where the content also starts with "figure". Select your figure snippet. Convert it to text, change the placeholder image to the actual image and enter your figcaption text.

[Rene Severens]

Hi,

Thanks for your information.

However ... I discovered that I have fallen into my own trap.

In the stylesheets generated by Flare9 and Flare10 (not sure for Flare11 since not yet installed) there is no tag for figure and figcaption. So it becomes very logic that these cannot be selected in the xml editor.
Though according to W3C these tags do exist. That does not mean that MadCap Flare also includes them in the provided stylesheet.
So ... somewhere along the line developing the current used stylesheet classes have been added named figure and figcaption, ... but forgotten that this was done manually.
Result: It is still not possible to select a fig-tag and a figcaption-tag in the XML editor because this was never possible.

The idea to use a snippet for this will work, but is still to complex to work with.

Currently I will use a table that contains only 1 cell holding the image and set a caption below the table. Using the autonumber format on a global level (GF:Figure {n+}: " and using a crossreferenced bookmark to a place in the text results in the desired look and feel.

Seeing the W3C tags, combined with the added classes in the stylesheet, I wrongly assumed that these could be used as tags in the xml editor. (This would have been great if this would have worked because it looks like it will result in less steps needed.)

Thanks for your explanation.

Greetings, Rene Severens

[doc_guy]

Remember that the <figure> tag is new to HTML5, so you need to be careful when you use it. I don't think Flare's editor includes any elements that are unique to HTML5, since backwards compatibility is a huge issue. Honestly, I think that "HTML5" output is a bit of a misnomer. Yes, it complies with the HTML5 schema, so the tags are all valid in HTML5, but it can be used by browsers that can't show HTML5, so it is backwards compatible. It's like saying the <p> tag is HTML5. Well, yes it is in the HTML5 spec, but that doesn't make it unique to HTML5. It's also HTML4 and XHTML, etc.

Interestingly enough, in the Flare code, MadCap calls it Webhelp2 instead of HTML5.

Anyway, I'd be careful using tags that are unique to HTML5 for backwards compatibility sake. (Anything older than IE9 will have issues, for example.)