Conditional Linking of Stylesheets

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
OS_Loc
Jr. Propeller Head
Posts: 6
Joined: Tue Feb 19, 2019 1:53 am

Conditional Linking of Stylesheets

Post by OS_Loc »

Hello everyone,

I am looking for a way to set up a condition (preferably in my Master Page) to tell Flare when to load a certain stylesheet.

In my project structure, I have a Master project with one main css that is used for all projects in all languages, and three smaller css that contain language-specific styling. I have assigned condition tags to these language css and they are inherited by child projects via Global Project Linking, depending on which condition was configured in the import file.
The import of the file itself works fine. BUT in my master page, I also have to have a <link> tag that will load the css during the build. And this is where I need the condition.
If I enter three <link>s in my Master Page, one for each language stylesheet, two of them will of course return a "file not found", because of the condition set in my import file.

Is there any way to tell Flare something like

if language = "German" then link Stylesheet_DE.css
if language = "English" then link Stylesheet_EN.css

I have tried using a script to append the <link> tag and deleted it from the Master Page, but the stylesheet is then not included into the output folder during the build process. It seems that Flare needs a static information on which stylesheet to use.

Any help would be much appreciated!

Thanks,
Agnieszka
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Conditional Linking of Stylesheets

Post by NorthEast »

I think an easier way to do this will be to use the CSS :lang() pseudo class.

For example, say you had a note style p.note that inserted some text, like this:

Code: Select all

p.note:before
{
   content: "English: ";
}
If you wanted to display different text for English and French, then you could use the :lang pseudo class in your CSS to specify the language:

Code: Select all

:lang(en) p.note:before
{
   content: "English: ";
}

:lang(fr) p.note:before
{
   content: "Francais: ";
}
See: https://developer.mozilla.org/en-US/docs/Web/CSS/:lang
OS_Loc
Jr. Propeller Head
Posts: 6
Joined: Tue Feb 19, 2019 1:53 am

Re: Conditional Linking of Stylesheets

Post by OS_Loc »

Thank you! That's much easier and more elegant then trying to do something with a script.
And it worked :)
MGerber
Jr. Propeller Head
Posts: 9
Joined: Mon Mar 27, 2017 6:23 am
Location: Northern Germany

Re: Conditional Linking of Stylesheets

Post by MGerber »

Hello Agnieszka, hello Dave!
Dave Lee wrote:I think an easier way to do this will be to use the CSS :lang() pseudo class.
OS_Loc wrote:Thank you! That's much easier and more elegant then trying to do something with a script.
And it worked :)
Could it be that this only works with specific target types? I'm using a PDF target and the language pseudo class in the CSS seems to be ignored. I've also tried different language codes (short, long incl. country code). Or is there any other place (besides the global project language setting) where I need to include some extra language indication?

Mark
Post Reply