Show CSS formatting for data-* attributes in Flare & Contrib

[JeromeR]

We use data- attributes in a Flare HTML5 project. (This is another way of saying we use custom attributes that are formatted in the HTML5-standard manner. If you're unsure what this means, here's a summary of custom attributes and CSS by Mozilla Developer Network, half-way down the page.)

The problem. I've added CSS to format the text colour by data- attribute. The formatting only appears in preview (browser) mode. This is disappointing because:

• This means there's no HTML5-compliant WYSYWYG editor in Flare.
• When using MadCap Contributor in annotation-only ("free reviewer") mode, it cannot show the colour. Even if we used a licensed version, I wouldn't want reviewers to switch back and forth between the Preview and the annotatable screens, because of the usability friction.

Here is the markup in a Flare topic. In it, note the data-otype custom attribute in the markup:

Code: Select all

<div data-lang="de" data-file="ecl-module-metadata-de" data-screenid="process-overview" data-texttype="elements" data-id="cms-device-warning" data-otype="not-supported" data-validationtype="message">Für die Beantragung des <MadCap:variable name="GTL-de.CompanyShort" /> <MadCap:variable name="GTL-de.Product2" />s empfehlen wir Ihnen die Nutzung eines Laptops oder PCs. Teile der Antragstrecke sind nicht für mobile Geräte optimiert.</div>

Here is the CSS that formats the text as red in a browser and in Preview in Flare, but not in the topic's XML Editor tab in Flare:

Code: Select all

div[data-otype]
	{color:#ff0000}

My question: Is there a way to make this formatting appear? Please don't advise me abandon custom attributes because this is not the advice I'm seeking.

{b}UPDATE{/b]. Lots of views, no responses, so i submitted this as a Support request directly to MadCap. I'll let you know what they say.