Specifically, a snippet that I convert to text upon adding it to a document.
<figure>
<img src="" />
<figcaption<MadCap:conditionalText MadCap:conditions="Default.PrintOnly"> MadCap:autonum="Figure 1.1: "</MadCap:conditionalText>> </figcaption>
</figure>
Can I do this in a snippet?
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Can I do this in a snippet?
I don't think I can. I get a message about invalid XML when I try to save.
Would this work?
<figure>
<img src="" />
<MadCap:conditionalText MadCap:conditions="Default.PrintOnly"> MadCap:autonum="Figure 1.1: "</MadCap:conditionalText><figcaption> </figcaption>
</figure>
Would this work?
<figure>
<img src="" />
<MadCap:conditionalText MadCap:conditions="Default.PrintOnly"> MadCap:autonum="Figure 1.1: "</MadCap:conditionalText><figcaption> </figcaption>
</figure>
-
- Senior Propellus Maximus
- Posts: 3667
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Can I do this in a snippet?
I think that Flare doesn't recognize <figure>.
But you could have snippet that is a div within which are a paragraph block containing the image followed by a paragraph block that offers the figure title with an autonumber, conditioned for print only. So, like this:
The div.Figure class can be set to avoid a page break inside.
The p.Figure class can do things like center the image, if that's what you'd like.
The p.FigureTitle class will set the autonumber. (Sorry, my example doesn't show that above.) BTW, you can set the PrintOnly condition directly in the pFigureTitle class so that you don't have to apply the condition to each and every figure title in your content.
The snippet that I have for this exact use case includes a placeholder image that can then easily be swapped out for the real deal.
But you could have snippet that is a div within which are a paragraph block containing the image followed by a paragraph block that offers the figure title with an autonumber, conditioned for print only. So, like this:
Code: Select all
<div class="Figure">
<p class="Figure">
<img src="your-image-here-png" />
</p>
<p class="FigureTitle" MadCap:conditions="YourConditions.PrintOnly">Your figure title here</p>
</div>
The p.Figure class can do things like center the image, if that's what you'd like.
The p.FigureTitle class will set the autonumber. (Sorry, my example doesn't show that above.) BTW, you can set the PrintOnly condition directly in the pFigureTitle class so that you don't have to apply the condition to each and every figure title in your content.
The snippet that I have for this exact use case includes a placeholder image that can then easily be swapped out for the real deal.
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Can I do this in a snippet?
Yabbut....Nita Beck wrote:I think that Flare doesn't recognize <figure>.
But you could have snippet that is a div within which are a paragraph block containing the image followed by a paragraph block that offers the figure title with an autonumber, conditioned for print only. So, like this:
The div.Figure class can be set to avoid a page break inside.Code: Select all
<div class="Figure"> <p class="Figure"> <img src="your-image-here-png" /> </p> <p class="FigureTitle" MadCap:conditions="YourConditions.PrintOnly">Your figure title here</p> </div>
The p.Figure class can do things like center the image, if that's what you'd like.
The p.FigureTitle class will set the autonumber. (Sorry, my example doesn't show that above.) BTW, you can set the PrintOnly condition directly in the pFigureTitle class so that you don't have to apply the condition to each and every figure title in your content.
The snippet that I have for this exact use case includes a placeholder image that can then easily be swapped out for the real deal.
Flare doesn't not recognize figure (and figcaption) elements. In fact, when I add a figcaption element to a figure element, Flare adds autonumbering automatically, even if I specifically delete it from the code. In my original snippet, I didn't have any condition code, and when I convert it to text after I add it, it works out fine (at least, if I'm in an "unoccupied" block-level element).
But I prefer semantic elements. Div soup (and span salad) make code a mess, and I try to avoid it whenever I can.
I may come back to this if I can't figure out anything else.
But I wonder if I could do something in the CSS with a figcaption.MadCap.autonum selector, maybe with display: none; in the @media print section........
-
- Senior Propellus Maximus
- Posts: 3667
- Joined: Thu Feb 02, 2006 9:57 am
- Location: Pittsford, NY
Re: Can I do this in a snippet?
Flare's not gonna understand your semantic elements. (I just had a convo about this yesterday with someone I consider uber-Flare-knowledgeable, so feel like I have it on good authority.) But you can do stuff with CSS to emulate those elements.
Nita
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
Re: Can I do this in a snippet?
Just to be clear, figure and figcaption are valid HTML tags, and they can be used in Flare.
You just can't insert these figure tags using the Flare interface, so would enter them in the text editor.
Your first example doesn't work because:
- The figcaption tag isn't closed <figcaption<.
- To add conditions to a tag, you'd include these as properties of that tag, rather than by inserting a <MadCap:conditionalText tag inside the tag.
- MadCap's Autonumber properties need to be set in the CSS, not HTML. Flare will generate them in HTML at build time.
So, to make your code valid it would look like this:
And the autonumber format is set in the CSS:
Alternatively, you can remove the conditions from the figcaption tag altogether, and just use the autonumber for the print media:
You just can't insert these figure tags using the Flare interface, so would enter them in the text editor.
It's not going to understand elements that you just make up yourself, e.g. a h7 tag, but figure and figcaption are valid HTML(5) tags.Nita Beck wrote:Flare's not gonna understand your semantic elements. (I just had a convo about this yesterday with someone I consider uber-Flare-knowledgeable, so feel like I have it on good authority.) But you can do stuff with CSS to emulate those elements.
Your first example doesn't work because:
- The figcaption tag isn't closed <figcaption<.
- To add conditions to a tag, you'd include these as properties of that tag, rather than by inserting a <MadCap:conditionalText tag inside the tag.
- MadCap's Autonumber properties need to be set in the CSS, not HTML. Flare will generate them in HTML at build time.
Code: Select all
<figcaption<MadCap:conditionalText MadCap:conditions="Default.PrintOnly"> MadCap:autonum="Figure 1.1: "</MadCap:conditionalText>> </figcaption>
Code: Select all
<figure>
<img src="" />
<figcaption MadCap:conditions="Default.PrintOnly"></figcaption>
</figure>
Code: Select all
figcaption
{
mc-auto-number-format: 'Figure {n}';
}
Code: Select all
@media print
{
figcaption
{
mc-auto-number-format: 'Figure {n}';
}
}
-
- Sr. Propeller Head
- Posts: 225
- Joined: Wed May 30, 2018 2:40 pm
Re: Can I do this in a snippet?
Nice. Thanks. That should work nicely.