Conditional Linking of Stylesheets

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Conditional Linking of Stylesheets

Postby OS_Loc on Thu Oct 24, 2019 1:40 am

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
OS_Loc
Jr. Propeller Head
 
Posts: 4
Joined: Tue Feb 19, 2019 1:53 am

Re: Conditional Linking of Stylesheets

Postby Dave Lee on Thu Oct 24, 2019 11:40 pm

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
Dave Lee
Master Propellus Maximus
 
Posts: 5745
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Conditional Linking of Stylesheets

Postby OS_Loc on Fri Nov 01, 2019 8:55 am

Thank you! That's much easier and more elegant then trying to do something with a script.
And it worked :)
OS_Loc
Jr. Propeller Head
 
Posts: 4
Joined: Tue Feb 19, 2019 1:53 am

Re: Conditional Linking of Stylesheets

Postby MGerber on Thu Nov 28, 2019 6:32 am

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
MGerber
Jr. Propeller Head
 
Posts: 8
Joined: Mon Mar 27, 2017 6:23 am
Location: Northern Germany


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 5 guests

cron