DokuWiki

It's better when it's simple

Benutzer-Werkzeuge

Webseiten-Werkzeuge


de:plugin:odt:cssimporthelper

ODT Plugin Homepage

Helper zum Import von CSS Styles

Ab version 2015-03-18 enthält das ODT-Plugin einen Helper für den Import von CSS-Dateien. Die CSS-Properties können so von anderen Plugins verwendet werden oder sie können als Parameter an ODT-Funkionen übergeben werden. Es folgt ein Beispielcode für den Import einer CSS-Datei:

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

Dies importiert alle CSS rules von myplugin/style.css und speichert sie in $import. Es kann danach verwendet werden um die Eigenschaften einer Klasse oder mehrerer Klassen abzufragen:

    $properties = array();
 
    // Erfrage alle Properties für Element 'div' und der Klasse 'myplugin'
    $import->getPropertiesForElement($properties, 'div', 'myplugin');
 
    // Die Properties werden in einem assoziativen Array gespeichert,
    // benannt nach dem Namen der CSS Property.
    $bg_color = $properties ['background-color'];
    $color = $properties ['color'];    

Diese Properties werden unverändert zurückgegeben. Dies bedeutet, dass eine Property ein Replacement enthalten könnte. Wenn Sie möchten, dass das Replacement durch seinen Standard-DokuWiki-Wert ersetzt wird, verwenden Sie folgenden Code:

    // CSS-Datei und DokuWiki Replacement-Datei importieren.
    /** @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');
 
    // Erfrage alle Properties für Element 'div' und der Klasse 'myplugin'
    $import->getPropertiesForElement($properties, 'div', 'myplugin');
 
    // Führe Ersetzung für jede Property durch
    foreach ($properties as $property => $value) {
        $properties [$property] = $import->getReplacement ($value);
    }

ODT und CSS sind nicht gleich. Das bedeutet das manche Dinge die in CSS alltäglich sind vom ODT-Format nicht unterstützt werden. Wenn Sie Properties für ODT Styles verwenden möchten, dann sollten Sie diese vorher für das ODT-Format anpassen. Dies kann durch Verwendung der Funktion 'adjustValueForODT' erledigt werden:

    // Alle Properties für ODT anpassen
    foreach ($properties as $property => $value) {
        $properties [$property] = $import->adjustValueForODT ($value, 14);
    }

Die Funktion führt momentan folgende Anpassungen durch:

  • sie führt das Replacement durch
  • kurze Farbwerte werden ins lange Format erweitert (z.B. aus #eee wird #eeeeee)
  • CSS Farbnamen werden ersetzt durch ihren Wert (z.B. aus 'red' wird '#ff0000')
  • 'px' wird umgewandelt in 'pt'
  • 'em' wird von ODT nicht unterstützt. Als Workaround wird 'em' durch einen errechneten Wert ersetzt. In dem Beispiel Oben würde '1em' zu '14pt' werden, siehe zweiter Parameter für adjustValueForODT.

Wie oben erwähnt, können die importierten Parameter an ODT-Rendering-Funkionen übergeben werden. Zur Zeit existieren folgende Funktionen die CSS Styles unterstützen:

  • _odtDivOpenAsFrameUseCSS / _odtDivCloseAsFrame
  • _odtSpanOpenUseCSS / _odtSpanClose
de/plugin/odt/cssimporthelper.txt · Zuletzt geändert: 2015-07-13 22:22 von LarsDW223

Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki