CSS for JATS related-article and self-url elements

[mboudreau]

I'm working with JATS-like files that may include <self-uri> and <related-article> elements. The elements have no content, but I want to display some of their attribute values even when in Partial Tags or No Tags mode.

To do this I am modifying the jats-authoring.css and jats-authoring-labelled.css files that are included with the JATSKit framework. However, it appears that the :before pseudo-element does not work for <self-uri> or <related-article>, while the :after pseudo-element does.

For example, the unmodified JATSKit CSS files have the following for the <self-uri> element:

Code: Select all

/* jats-authoring.css: */

self-uri {

  display: block;

  color:blue;

  margin-top: 0.5em;

}



/* jats-authoring-labelled.css: */

self-uri:before {

  content: "[Link to: ";

}



self-uri:after {

  content: "]";

}

But in the Author perspective using the 'JATS - Labels' style, the :before pseudo-element content does not appear at all. Oddly, the 'link.png' graphic is displayed before each element, though I can't find a selector in either stylesheet that would do this.

[Radu]

Hi,

So I opened the CSS "OXYGEN_INSTALL_DIR\frameworks\jats\lib\author-css\jats-authoring-labelled.css" and added to it:

Code: Select all

self-uri {

  display: block;

  color:blue;

  margin-top: 0.5em;

}

self-uri:before {

  content: "[Link to: ";

}



self-uri:after {

  content: "]";

}

then opened a JATS document looking like this:

Code: Select all

<!DOCTYPE book

  PUBLIC "-//NLM//DTD BITS Book Interchange DTD with OASIS and XHTML Tables v2.0 20151225//EN"

  "BITS-book2.dtd">

<book dtd-version="2.0" xmlns:xlink="http://www.w3.org/1999/xlink"

  xmlns:mml="http://www.w3.org/1998/Math/MathML">

  

  <book-body>

    <book-part>

      <book-part-meta>

        <title-group>

          <title/>

        </title-group>

        <self-uri/>

      </book-part-meta>

    </book-part>

  </book-body>

  

</book>

and in the Styles drop down I switched to the JATS Labeled style. And both the before and after text are present on the self-uri.
If you want to debug this on your side you can place the cursor inside the self-uri, right click and choose "Inspect Styles". The CSS Inspector view should show :before and :after properties for the element + computed styles.

Regards,
Radu

[mboudreau]

Thanks, Radu. That showed me that my rules for related-article:before and self-url:before were being superseded by this from authorDefaults.css:

Code: Select all

*[xlink|href]:before {

content : url(../images/link.png) ;

-oxy-link : attr(xlink|href) !important ;

}

I don't find a file 'authorDefaults.css' anywhere on my machine; is it built into Oxygen?

I fixed this by making my rules more specific:

Code: Select all

self-uri[xlink|href]:before {

  content: "[Link to: ";

}

[Radu]

Hi,

That "authorDefaults.css" is a default CSS Oxygen contributes automatically to all other CSS layers. So you cannot remove it but you can override its selectors either by having a more specific selector or by using the !important CSS flag.

Regards,
Radu