Subclasses in anchor tags through the UI

[jp_from_fiserv]

For my HREFs, I have a class ABC, and a subclass 123. In HTML I reference them with

Code: Select all

<a href="foo.htm" class="ABC 123">blah</a>

. The hyperlink UI doesn't allow spaces in the Style Class field, though, which means I have to manually edit every HREF. As I'm trying to attach a distinct style to each type of HREF, this... isn't productive.

Is there a way around this limitation?

Flare 2019.R2

[Chicago_HPT]

Unfortunately, Flare still doesn't allow us to apply multiple style classes via the GUI. However there are some things you can do to make it a little easier.

Do you use either of the classes for other HTML tags? If not, then one way is to format the links with one of the two classes (whichever one isn't used elsewhere) and then, when you've added all your links (or when you've added all links to a single topic or to all the topics in a folder or to some other number of topics) do a search and replace in the source code to add the other class. For example, search for class="ABC" and replace it with class="ABC 123".

If the classes are used in other tags, then you can do a couple of things.

• Make one of style classes unique to anchor tags (e.g. rename the class or duplicate it with a new name) and then do the search/replace to replace them all.
• Do the search/replace but don't automatically Replace All. Instead, replace each appropriate found instance and skip others.
• Do a Regex (Regular Expression) search (available under Options in the search panel). I'm not a Regex expert but one possible example that worked in a test document for me might be:

  Code: Select all

  Find:
  (<a href=")(.*?)(" class=")ABC"
  
  Replace with:
  $1$2$3ABC 123"
  
  Don't forget the quotation marks!

  How does it work? The Find strings in parentheses are grouped and each group is assigned a number, in order of occurance. Then, in the replacement string, the numbered groups are "replaced" with themselves $1=group 1, etc. Which leaves them unchanged while ABC 123" replaces the ungrouped find string, ABC". We use three groups because the href can be different from link to link. the (.*?) group is using wildcards to find the href value. The question mark limits the wildcard search to a single instance, that is, it limits the search to what is in the quotation marks after the href.
  
  You don't need to understand it completely for it to work, though.

Sorry, that's the best I've got off the top of my head.

I hope it helps,
-jeff

[jp_from_fiserv]

Thanks, Jeff!

I'm getting around it for now by assigning an ::after pseudoclass to the A tag, and then subclasses with the individuated details. This isn't ideal, but we don't use the A::after elsewhere (SO FAR) in our template, so I guess it will work.

I'm trying to avoid code-level work because we're a big department with varying skills - I can give them canned regex to run, but inevitably someone will do something destructive with it .

Appreciate your thoughts! And I have no idea why multiple classes aren't supported in the UI; it's a real-world legitimate use case. I was just hoping that there was a special character or something that served as a workaround. Sigh.

[Chicago_HPT]

I feel you. Personally, I think we should be able to Ctrl+click styles in the style list to apply them, preferably in the order they're clicked. That seems like it should be easy enough to implement but I'm not a programmer, so...

Anyway, good luck!

-jeff

[NorthEast]

The only way to apply multiple classes anywhere in Flare is to use the text editor.

So if you want to keep it simple and avoid the text editor, then maybe don't use multiple classes and use single classes (it just might require more).

Also, you might not actually need multiple classes, depending on what you're actually using them for. For example, if I wanted to style links to PDF files, I don't need to use a class at all and could make use of CSS attributes - e.g.

Code: Select all

a[href*=".pdf"]:after { }

I produce a template that's used by other people, so write CSS that's easy for folks to apply in Flare, even though it's not always the most efficient CSS I would like to use myself.

In the meantime, put in a feature request to MadCap to support multiple classes in the editor.

[jp_from_fiserv]

Seems like a solid suggestion... except I can't get it or its variants to work in Flare. I've looked the attribute stuff up on W3C and tested what I want to use in their "try me" browser/Chrome, and it works fine... but not in the Flare preview window or in the output, whatever the browser. Weird.

Thanks for the suggestion and the exposure to new CSS capabilities, at any rate. I'll keep playing with it and see what I can get working.

[Chicago_HPT]

Seems like a solid suggestion... except I can't get it or its variants to work in Flare. I've looked the attribute stuff up on W3C and tested what I want to use in their "try me" browser/Chrome, and it works fine... but not in the Flare preview window or in the output, whatever the browser. Weird.

Out of curiosity, what CSS were you trying to implement? For example, Dave's suggestion only affects anchor tags that point to PDF files (i.e. href*=".pdf"). So his example style selector would apply to <a href="foo.pdf">link text</a> but it would not apply to <a href="bar.htm">other link text</a>.

[NorthEast]

Seems like a solid suggestion... except I can't get it or its variants to work in Flare. I've looked the attribute stuff up on W3C and tested what I want to use in their "try me" browser/Chrome, and it works fine... but not in the Flare preview window or in the output, whatever the browser. Weird.

Thanks for the suggestion and the exposure to new CSS capabilities, at any rate. I'll keep playing with it and see what I can get working.

Maybe give some examples of how/why you use multiple classes, and what you've played with.

The example I provided is a real one - I used it to add a PDF icon to any links to .pdf files (I use the :after to add the icon as content).

This sort of 'fancy' CSS might not work if you try and use it alongside MadCap| styles. Flare processes the MadCap| styles in the source to generate the real CSS in the output, but often only handles simple(r) CSS.
So a MadCap|xref / <MadCap:xref> in the source will become a.MCXref.xref / <a class="MCXref xref> in the output. And sometimes you need to write CSS that targets what tags/classes are generated in the actual output.