Thursday, May 14, 2015

Visual rendering CSS improvements in Oxygen 17.0

Share to Facebook Share to Twitter Email This Share on Google Plus Share on Tumblr
We had a lot of development time for Oxygen 17.0 and a lot of powerful extensions were added for the CSS-based visual author rendering. I will try to go through each of the improvements and give you a small example of how this would benefit you:
  1. CSS Inspector. Whenever you use CSS to style how XML or HTML looks like, as the CSS content increases in complexity at some point you tend to get lost. For example you will not know where the foreground color for a certain XML element is defined. Most Web Browsers have an inspector tool which allows you to inspect styles for a certain XML element. The CSS Inspector is a similar tool available in Oxygen 17 which can be used to debug your CSS selectors and see how they apply on specific elements. To show it, you can right click in the Author visual editing mode and choose Inspect Styles.

  2. Support for rendering using LESS. Less is more. LESS is a dynamic stylesheet language which extends CSS and adds mechanisms for supporting variables, nesting, mixins, operators, and functions. Besides support for editing and validating LESS content, Oxygen 17 can also directly render in the Author editing mode content using an associated LESS stylesheet.

    For example instead of repeating the same hard coded color in various places in your CSS like:
    link1 {
      color: #5B83AD;
    }
    /*..............*/
    link2 {
      color: #5B83AD;
    }
    you can define a variable for the color and refer to that variable instead:
    @special-blue: #5B83AD;
    
    link1 {
      color: @special-blue;
    }
    /*.............*/
    link2 {
      color: @special-blue;
    }
  3. Apply multiple CSS layers in the Author editing mode. Each framework customization can now include besides a main CSS additional CSS layers which can be toggled On or Off to enhance the display in various ways. So for example when editing DITA you can toggle on and off inline actions and inline hints:

  4. Responsive layout. The content can be rendered in certain ways depending on the available screen space. For example your CSS can add margins to the edited content if the screen width allows it:
    @media oxygen AND (min-width:25cm) {
        /* The white page.*/
        :root{      
          /* White page */
          border: 1px solid #c6c6c6;
          background-color:white;
          
          /* Centered*/
          margin-left: auto;
          margin-right: auto;
          margin-top: 0.25in;
          margin-bottom: 0.25in;
          
          /* Letter */
          width: 21.59cm; 
        }
        /* Padding inside the page. */
        :root {
              padding:1em;
        }    
    }
  5. New form control which can display HTML content. With a very simple CSS selector like:
    note:before{
         display:block;                    
         content : oxy_htmlContent(href, "hints.html", id, 
              oxy_concat("hints" , "-" , oxy_local-name(null)), width,100%);
    }
    you can show small HTML-styled annotations for each element by using specific content from a larger HTML document which can contain all available annotation:
  6. Directly define inline actions in the CSS content. With a combination of the new support for defining actions inline in the CSS and the predefined operation which can run Javascript code you can add buttons which perform complex actions directly from the CSS. As an example I can use the CSS snippet:
    comment:after{
        content:
        oxy_button(
       action,
        oxy_action(
              name, 'Remove Comment', 
              description, 'Remove the current Comment', 
              operation, 'ro.sync.ecss.extensions.commons.operations.JSOperation', 
              arg-script, "function doOperation(){authorAccess.getDocumentController().deleteNode(
                        authorAccess.getDocumentController().getNodeAtOffset(authorAccess.getEditorAccess().getCaretOffset()));}"),
              showText, true);
    }
    to add a button after the comment element which deletes it:
  7. Support for more CSS properties:
    • position

      You can now place elements out-of-sequence in the rendered content. For example if I have a list of parcels:
      <parcels>
      ….…....
          <parcel id="PID81199">
              <shipLocation>Greenwich</shipLocation>
              <comment>Should be shipped before the 9'th</comment>
              <shipDate>2015-12-12</shipDate>
              <details>This parcel belongs to Syncrosoft and should be handled with care.</details>
          </parcel>
      ….….…..
      </parcels>
      I can use CSS positioning to place the comment for each parcel on the right part of the display area:
      *{
          display:block;
      }
      *:before{
          color:gray;
      }
      parcel{
          position:relative;
      }
      shipLocation:before{
          content:"Ship to: ";
          width:100px;
      }
      shipDate:before{
          content:"Ship date: ";
          width:100px;
      }
      details:before{
          content:"Details: ";
          width:100px;
      }
      parcel > *{
       padding-left:1em;   
       width:60%;
      }
      parcel:before{
          content: "Parcel '" attr(id) "' :";
          display:block;
          color:gray;
      }
      comment{
          background-color:yellow;
          position:absolute;
          left: 70%;
          top: 1em;
          width:25%;
      }
      comment:before{
          content:"Comment: \A";
      }
      and display it like a hovering annotation over each parcel:
    • letter-spacing

      With small CSS snippets like:
      title{
          letter-spacing:0.2em;
          font-size:1em;
      }
      you can make your titles stand out:
    • ::before(n) and ::after(n) Pseudo Elements

      Your CSS layers can contribute multiple layers of static content without overwriting each other. For example if your main CSS specifies static content before an element:
      title:before{
        content: "Title: " !important;
      }
      your CSS layer can add a button before the title without removing its already set static content:
      title:before(2){
          content: oxy_button(actionID, 'paragraph', showIcon, true);
      }
      and obtain a result like:
    • font-family fallback fonts

      If you have documents containing mixed content (English + Asian for example) you can now specify an enumeration of fallback fonts which will be used for rendering text content inside paragraphs:
      p {
          font-family:Arial, Serif;
      }
      to render each range of characters with the font which supports it:

3 comments:

  1. Anonymous8:47 PM

    I like the font-family fallback.
    But the English characters in the screenshot do not appear to be Arial. They look like Serif.

    ReplyDelete
    Replies
    1. Good catch, I repeated the experiment and updated the post with the proper screenshot.

      Regards,
      Radu

      Delete
  2. Patrik8:27 AM

    Thanks a lot for all the nice new features - and for the handy overview here!

    Patrik

    ReplyDelete