CSS for JATS related-article and self-url elements

Having trouble installing <oXygen/>? Got a bug to report? Post it all here.
mboudreau
Posts: 29

CSS for JATS related-article and self-url elements

Wed Feb 14, 2018 12:59 am

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
Posts: 5862

Re: CSS for JATS related-article and self-url elements

Wed Feb 14, 2018 10:08 am

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com
mboudreau
Posts: 29

Re: CSS for JATS related-article and self-url elements

Wed Feb 14, 2018 7:15 pm

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
Posts: 5862

Re: CSS for JATS related-article and self-url elements

Thu Feb 15, 2018 9:08 am

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

Return to “Common Problems”

Who is online

Users browsing this forum: No registered users and 1 guest