Oxygen 15.2 - New Author Visual Editor CSS tweaks

Oxygen 15.2 just got released with lots of useful improvements:What's new in 15.2

And it also comes with many CSS improvements for customizing the Author Visual Editing Mode. I will go through the most interesting ones and give small examples where these new improvements may be handy in a real-world scenario.

CSS Level 3 structural pseudo-classes

All the CSS Level 3 structural pseudo-classes are now supported: :root, :last-child, :first-child, :nth-child,:nth-of-type, :not(), :empty, etc..

Here are some examples:

• You can use the nth-of-type selector to set certain background colors on odd table lines and certain colors on even table lines like this:

  row:nth-of-type(odd){
      background-color:yellow;
  }
  row:nth-of-type(even){
      background-color:blue;
  }

  
• Use the empty selector to instruct the user to insert some text in an empty element like this:

  title:empty:before{
      content:"Insert title content here:";
  }

  
• Use the last-child and first-child selectors to properly mark a sequence of items using static content like:

  item:first-child:before{
      content:"[";
  }
  item:after{
      content:",";
  }
  item:last-child:after{
      content:"]";
  }

  
• Use the not selector to match certain nodes which are not empty:

  title:not(:empty):before{
      content:"[";
  }
  title:not(:empty):after{
      content:"]";
  }

  

CSS Subject Selector

The experimental subject selector from CSS Level 4 is now supported. This selector can match an element by taking into account its children. For example you can add a red star before each paragraph which has an indexterm element inside it:

p! indexterm {
    content:  oxy_label(text, "*", color, red);
}

CSS Hover and Focus pseudo-classes.

You can style your XML documents depending on the mouse and caret position over the document by using the :hover and :focus CSS pseudo-classes. This means you can implement progressive disclosure to show form control buttons on a certain element only when the mouse hovers over it.

Examples:

If the caret is inside a paragraph you can add a button to the end of the current paragraph which when pressed creates a new paragraph after it:

p:focus:after {
    content: oxy_button(actionID, "paragraph");
}

Or you can show buttons to invoke certain actions when the mouse hovers over a certain element. For example when the mouse hovers over a table we can add a button to the end of the table to easily insert a new row:

table:hover:after{
    content: oxy_button(actionID, "insert.table.row.below");
}

Gradually append or prepend static content using CSS selectors

The content used for the :before and :after pseudo-elements can be created incrementally from the content specified by the new properties. New Oxygen-specific CSS content properties: -oxy-append-content and -oxy-prepend-content can be used for this.

Localize Static Content in CSS

Oxygen already has support to localize Author action messages, names and tooltips in various languages depending on the language current set in the application. But static texts can also be added from the CSS before or after certain XML elements. These texts can now also be localized in different languages using the same mechanism:

section:before{
    content:"${i18n(section.name)}:";
    font-size:large;
}

The key is then mapped using the translation file corresponding to the framework.

Contribute custom CSS selectors to the default CSS files used to render the document

You can contribute an additional CSS to be used when rendering a specific XML document in the Author editing mode without the need to modify the CSS documents which come with the pre-defined document type configuration. Let's say you want to add a small border around each index term element when editing DITA topics. You no longer need to change the CSS located in:OXYGEN_INSTALL_DIR/frameworks/dita/css_classed/dita.css. You can create an XML Catalog file with the content:

<catalog xmlns="urn:oasis:names:tc:entity:xmlns:xml:catalog">
    <uri name="http://www.oxygenxml.com/extensions/author/css/userCustom.css" 
uri="custom.css"/>
</catalog>

and add it to the list of XML catalogs in the Preferences->XML / XML Catalog preferences page.

Then you create your custom.css CSS stylesheet with the content:

indexterm{
    border:1px solid black;
}

Tip: Instead of creating an XML Catalog you can use the Java API to register a custom URI resolver Java implementation which would dynamically resolve the URI to a custom CSS which could be provided by a plugin implementation.