How to display a value of a content from a CSS

[TopSolid]

Hi!
I have this class in/config/CSS_2/p-i18n-fr.css,with its attribute and value:

*[class ~= "toc/title"][empty]:lang(fr):before {
content: "Sommaire";
}
I wish to display this value ("Sommaire") in header of my TOC using oxy_path with contains in another CSS:
I have tried to do that:

@page table-of-contents:right {

@top-right {
content: oxy_xpath("(//*[contains(@class, 'toc/title')]/text())[1]") !important;
}
or
content: oxy_xpath("(//*[contains(@class, 'toc/title')][contains(@outputclass, 'content')][1])[1]//text()")
Have you got any clue on how to do that?
Is there a better way to manage localized strings in CSS?

Thanks in advance
David

[julien_lacour]

Hi David,

Using the CSS to change the TOC title is the correct solution.

For the header it's a little more complicated: the CSS is applied on the merged.html file created during the transformation (in the output folder), the :before content will be created on the next step while the oxy_xpath() function will try to gather the content in the same step, leading to an empty result.
Generally the oxy_xpath() function can be called onto the merged.html static content (text inside the elements, attributes, etc).

Anyway, for the header, please refer the How to Change the Headings depending on the Language from our user-guide.

Regards,
Julien

[TopSolid]

Thanks Julien, it works like a charm!
I did that

Code: Select all

/* -------------------- Entête de la table des matières / TOC  -------------------- */

@page table-of-contents:left {
    @top-left {
        content: oxy_xpath("if (@lang='fr-FR') then 'Sommaire' \
        	        else if (@lang='fr') then 'Sommaire' \
        	        else ''");
    }
}

@page table-of-contents:right {
    @top-right {
        content: oxy_xpath("if (@lang='fr-FR') then 'Sommaire' \
        	        else if (@lang='fr') then 'Sommaire' \
        	        else ''");    
    }
}

@page table-of-contents:first:right {
    @top-right {
        content: oxy_xpath("if (@lang='fr-FR') then 'Sommaire' \
        	        else if (@lang='fr') then 'Sommaire' \
        	        else ''");     
    }
}

Is there a full doc on how to write and correct syntax for oxy_xpath in CSS?
Any IDE Oxygen plugin to write inside oxy_xpath tags?

[julien_lacour]

Hello,

You can test your XPath query within Oxygen using the XPath Builder and the merged.html file generated during the transformation.
For more information, you can take a look at the How to Write XPath Expressions and How to Debug XPath Expressions topics from our user-guide.

Regards,
Julien

[TopSolid]

Thanks Julien, this is awesome.

I would like to concanetate 2 strings using oxy_xpath in my else case, like adding 2 contains seperated by a dash

Code: Select all

@top-left-corner {
        content: oxy_xpath("\
        if(//*[contains(@class, ' topic/data ')][@outputclass= 'header'] = \'Short\') then\
        (//*[contains(@class, ' topic/keyword ')][contains(@keyref, 'prodname')][1])[1]//text()\
        else\
        (//*[contains(@class, 'bookmap/booktitlealt')][1])[1]//text()\
        ' - '\
        (//*[contains(@class, 'front-page/front-page-title')]//*[contains(@class, 'bookmap/booktitlealt')]//text()\
        ");
    }

I have noticed that you can use the || expression like 'a' || 'b'. Not working in Xpath builder. Is it possible?

[julien_lacour]

Hello,

You can use the XSL string-join function to achieve this:

Code: Select all

@top-left-corner {
  content: oxy_xpath("\
  if (//*[contains(@class, ' topic/data ')][@outputclass= 'header'] = 'Short') then\
    (//*[contains(@class, ' topic/keyword ')][contains(@keyref, 'prodname')][1])[1]//text()\
  else\
    string-join(((//*[contains(@class, 'bookmap/booktitlealt')][1])[1]//text(), //*[contains(@class, 'front-page/front-page-title')]//*[contains(@class, 'bookmap/booktitlealt')]//text()), ' - ')");
}

You can also use the concat function for this use-case, but if you plan to add more strings in the future, string-join is more flexible.

Regards,
Julien

[TopSolid]

Hi Julien,
This is really cool, thanks!