In a complex DITA environment with hundreds of DITA keys and CSS rules, oXygen gets really slow when using form control elements in the Author view. But these form control elements are very important for a good usability. You can boost the rendering performance by replacing the button icons with an icon font. This howto explains, how to create two oxy_button elements that move list items up and down and how to replace the icons with a custom made icon font.

It is highly recommended to set up another framework for your environment and leave the DITA framework untouched. Otherwise you’ll get problems when updating oXygen. In this howto, I’m going to edit some default files, but you should create the rules in a separate framework.

Get some icons

Save these two icons to ~/Oxygen XML Editor 17/frameworks/dita/css/core. The icons are taken from the Silk icon set, which is released under the Creative Commons Attribution 3.0 License.

arrow_up arrow_down

Create the CSS

Open the ~/Oxygen XML Editor 17/frameworks/dita/css/core/-topic-body-lists.css and append this rule to attach two icons after each class ~= "topic/li" to move it up or down:

*[class~="topic/ul"] > *[class~="topic/li"]:after {
    content:
        oxy_button(
            action, oxy_action(
            name, 'Move up',
            description, 'Move up',
            icon, url('arrow_up.png'),
            operation, 'ro.sync.ecss.extensions.commons.operations.MoveElementOperation',
            arg-targetLocation, 'preceding-sibling::*[1]',
            arg-insertPosition, 'Before'
        ),
        transparent, true,
        actionContext, element,
        showIcon, true,
        fontInherit, true
        )
        oxy_button(
            action, oxy_action(
            name, 'Move down',
            description, 'Move down',
            icon, url('arrow_down.png'),
            operation, 'ro.sync.ecss.extensions.commons.operations.MoveElementOperation',
            arg-targetLocation, 'following-sibling::*[1]',
            arg-insertPosition, 'After'
        ),
        transparent, true,
        actionContext, element,
        showIcon, true,
        fontInherit, true
        );
}

Testing the CSS rule

Create a sample DITA topic with two list items and try to move the <li> elements up and down.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE topic PUBLIC "-//OASIS//DTD DITA Topic//EN" "topic.dtd">
<topic id="myTopic">
  <title>My Topic</title>
  <body>
    <ul>
      <li>First list item</li>
      <li>Second list item</li>
    </ul>
  </body>
</topic>

Now we are going to replace the icons.

Create your icon font

  1. Move to Fontello.
  2. Filter the icons by typing ‘arrow’.
  3. Select the Font Awesome icons up-big and down-big.
  4. Click the Download webfont button.

My helpful screenshot

Extract the font

  1. Create the directory fontello in your framework.
  2. Extract the archive and copy all the files to the directory.
Oxygen XML Editor 17
└── frameworks
    └── dita
        └── css
            └── core
                └── fontello
                    ├── css
                    ├── font
                    ├── config.json
                    ├── demo.html
                    ├── LICENSE.txt
                    └── README.txt

Grab the font-face

Open the fontello.css and examine the @font-face block:

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?41249015');
  src: url('../font/fontello.eot?41249015#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?41249015') format('woff'),
       url('../font/fontello.ttf?41249015') format('truetype'),
       url('../font/fontello.svg?41249015#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

Copy the block from your fontello.css to a stylesheet. If you want to appear the icons in the Basic style, copy them to the ~/Oxygen XML Editor 17/frameworks/dita/css/edit/style-basic.css stylesheet.

Do not copy the block from this post, it contains an individual ID so it won’t work for you.

Oxygen needs the truetype version of the font, so remove the other URLs and change the URL so that it points to your fontello.ttf. It should not look similar to this snippet:

@font-face {
  font-family: 'fontello';
  src: url('../core/fontello/font/fontello.ttf?41249015') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Change the CSS rule

Set showIcon to false and replace the names of the buttons with the entities of your icons. Look them up in the fontello.css.

fontello.css

.icon-up-big:before { content: '\e800'; } /* '' */
.icon-down-big:before { content: '\e801'; } /* '' */

Add some CSS rules to make sure, the icons are correctly displayed:

font-family: "fontello" !important;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 1em !important;

Your CSS should now look like that:

*[class~="topic/ul"] > *[class~="topic/li"]:after {
    content:
        oxy_button(
            action, oxy_action(
            name, '\e800',
            description, 'Move up',
            operation, 'ro.sync.ecss.extensions.commons.operations.MoveElementOperation',
            arg-targetLocation, 'preceding-sibling::*[1]',
            arg-insertPosition, 'Before'
        ),
        transparent, true,
        actionContext, element,
        showIcon, false, /* Hide icon */
        fontInherit, true
        )
        oxy_button(
            action, oxy_action(
            name, '\e801',
            description, 'Move down',
            operation, 'ro.sync.ecss.extensions.commons.operations.MoveElementOperation',
            arg-targetLocation, 'following-sibling::*[1]',
            arg-insertPosition, 'After'
        ),
        transparent, true,
        actionContext, element,
        showIcon, false, /* Hide icon */
        fontInherit, true
        );
        font-family: "fontello" !important;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 1em !important;
}

Now oXygen should render the icons. If not, restart oXygen and open the topic in author view and select the Basic style.



blog comments powered by Disqus

Published

21 October 2015

Tags