Helper for importing CSS styles

From version 2015-03-18 on the ODT plugin includes a helper plugin which can be used to import CSS files. The CSS properties can then be used by other plugins or they can be given as parameters to ODT functions. Here is some example code for importing a CSS file:

    /** @var helper_plugin_odt_cssimport $import */
    $import = plugin_load('helper', 'odt_cssimport');
    $import->importFrom(DOKU_PLUGIN.'myplugin/style.css');

This will import the CSS rules from myplugin/style.css and save it in $import. It can then be used to query the properties for a given class or classes:

    $properties = array();
 
    // Get all properties for element 'div' and the class myplugin
    $import->getPropertiesForElement($properties, 'div', 'myplugin');
 
    // The properties are stored in an assoziative array, named by their CSS property names.
    $bg_color = $properties ['background-color'];
    $color = $properties ['color'];    

These properties will be returned in their original way. This means a property could include a replacement. If you like the replacement beeing replaced by its standard DokuWiki value, you can use this code:

    // Import CSS file and DokuWiki replacement file.
    /** @var helper_plugin_odt_cssimport $import */
    $import = plugin_load('helper', 'odt_cssimport');
    $import->importFrom(DOKU_PLUGIN.'myplugin/style.css');
    $import->loadReplacements( tpl_incdir().'style.ini');
 
    // Get all properties for element 'div' and the class myplugin
    $import->getPropertiesForElement($properties, 'div', 'myplugin');
 
    // Perform replacement for every property
    foreach ($properties as $property => $value) {
        $properties [$property] = $import->getReplacement ($value);
    }

ODT and CSS are not the same. That means some things which are very usual in CSS are not supported by the ODT format. If you like to use the properties for ODT styles then you first should adjust them for the ODT format. This can be done using the function 'adjustValueForODT':

    // Adjust all properties for ODT
    foreach ($properties as $property => $value) {
        $properties [$property] = $import->adjustValueForODT ($value, 14);
    }

The function is currently doing the following adjustments:

• it is performing the replacement
• short color values are expanded to the long format (e.g. #eee becomes #eeeeee)
• CSS color names are replaced by their value (e.g. 'red' becomes '#ff0000')
• 'px' is converted to 'pt'
• 'em' is not supported by ODT. As a workaround 'em' is replaced by a calculated value. In the example above, '1em' would become '14pt', see second parameter for adjustValueForODT.

As mentioned above, the imported parameters can be passed to ODT rendering functions. Currently the following functions using CSS style do exist:

• _odtDivOpenAsFrameUseCSS / _odtDivCloseAsFrame
• _odtSpanOpenUseCSS / _odtSpanClose