How to get Flare to omit the <span> around a variable

[JeromeR]

My Devs are complaining about the span tags that Flare puts around variable text while generating HTML5 output for us. For context only—don't be scared of this—the Flare output is ingested by another build process so that the HTML5 output ends up in a CMS and from there in the UI of a web application.

So, Flare wraps the variables in a set of <span>tags</span>.

In some places, these span tags "break the code" of the web application. The specific example the Devs give is this:
When an <input type="button"> element's Value attribute contains a span tag, it breaks. We have about 40 occurrences of a Cancel button, for example. The Dev team I'm working with are unhappy with my suggestion that they fix the problem at their end, perhaps with an automated script to remove the <span> tags. Instead, they want me to remove the variables (!) from the Flare content. For now, we're in a stalemate because there's a work-around: convert the <input> elements to <button> elements. But this is work for Dev, and risk, and the whole idea of Tech-Comm/Content imposing restrictions on their code makes this set of Devs bristle.

Instead, wouldn't it be great if Flare did not wrap a variable in a span?

Is there a toggle or setting to do this?

[NorthEast]

When an <input type="button"> element contains a span tag, it breaks.

Can you give an example of the HTML that causes this?

I don't understand how your input tag (of type button) can include a variable which is producing span tags.

For an input button, I thought the button text is the value property inside the tag itself; e.g.

Code: Select all

<input type="button" name="ButtonName" value="This is the button text" />

You could insert a variable like this as the value, and that doesn't create span tags in the output:

Code: Select all

<input type="button" name="ButtonName" value="[%=VariableSet.VariableName%]" />

Compared to using a button tag, for these the button text isn't a property, but is included in opening/closing tags.

Code: Select all

<button type="button" name="ButtonName">This is the button text</button>

[JeromeR]

Hi Dave,

Yes, the value attribute is the button text that users see in the web application. This is the text that contains the problematic <span> tag.

This isn't inserted directly. The Flare output gets processed in the build pipeline. A script moves the text to a proprietary content-management system that my client uses for all text that appears on its websites. If my generated output had a variable (such as "Cancel" "Close" or "Next"—common button names for which I use variables to ensure consistency) then the CMS gets a string in which the variable is wrapped in a <span> tag. Separate from this, the code that runs the web-application pulls text from the CMS. The placeholder in the button's Value attribute calls the text that contains a <span> tag. That mark-up is what breaks the Input button. We have a similar problem with values in drop-down lists.

The client's business-confidentiality policy means I cannot post the code sample you requested.

Let's not comment on the complexity. It's imposed.

I want to be able to toggle OFF the <span> tag. Madcap technical Support has since told me that there is no toggle in Flare 12, and this is now an enhancement request with MadCap.

[NorthEast]

OK, but how are you structuring the input tag - what does the HTML source look like?

If you insert the variable in the input value attribute, Flare just inserts the variable as text - it doesn't generate a span tag (which would be invalid HTML anyway).
So your source should look like this:

Code: Select all

<input type="button" name="ButtonName" value="[%=VariableSet.VariableName%]" />

And in the output it will replace the variable with text.

It will not work if you try to insert the button text as text within the input tag; i.e. don't do this:

Code: Select all

<input type="button" name="ButtonName"><MadCap:variable name="VariableSet.VariableName" /></input>

If you do this, the variable in the output will be enclosed in span tags.

[JeromeR]

Thanks Dave,

The developers are asking me to provide text without <span> tags around it. They aren't asking me to provide the <input> element or <button> element—in fact it's the opposite. they only want text from me, nothing that they wuold call "code".

-=- Jerome

[LeeD]

Couldn't you use a snippet instead of a variable?

Source Code in topic:

Code: Select all

<MadCap:snippetBlock src="Resources/Snippets/Copyright-and-Date.flsnp" />

Generated Code in topic:

Code: Select all

<p class="legal">MyCompany, Inc. Copyright 2010-2016. All rights reserved.</p>

No span tags there! Just a css class of "legal" for font stuff, etc.


Good luck,
Leon

[doc_guy]

LeeD,

That is a good idea. Remember, however, that you can't change snippet definitions at the target level, if that is important to you, whereas you can change a variable definition at the target level. The other issue with snippets instead of variables is you need to be careful with snippets that contain any formatting, because that will be processed in the snippet destination. So, for example, if you are using your product name in the snippet, if you use any formatting then that formatting will be retained, even if you post your snippet inline in a heading, vs. a paragraph, vs a caption, etc.

[JeromeR]

LDEE, I like this solution!

I'm going to think about whether I can live with the drawbacks—there are some that doc_guy didn't mention: organization and translation. Will the content authors who succeed me be confused by the use of variables and snippets masquerading as variables? It shouldn't matter from a technical perspective; it's the humans in the equation I'm thinking of. Especially translators can be put off by inconsistency.

I think my conclusion is going to be "If you're confused, tough bananas!" but I want to let your suggestion percolate before I adopt this suggestion with wild abandon.

[Louise Bennett]

A little bit removed from the original posting thread, but I am wondering how to resolve a problem I am having with snippet formatting.

I have a snippet that contains 4 product names, each one with a condition attached so that the correct product name appears in the relevant output. When I build my output however, if the snippet (product name) is included in a heading, it is not picking up the style of the heading. The product name is appearing smaller than it should in the output. It appears just fine everywhere else though, such as paragraphs, list items, etc.

Do I need to do something at the snippet level to ensure it adopts the style of the text element I am using it in?

Thanks, Louise.