Customizing the output of w2x

Customizing the XHTML+CSS files generated by w2x

Using a XED script to modify the styles embedded in the XHTML+CSS file

By default, w2x adds a number of CSS rules to the /html/head/style element of the generated XHTML+CSS file. Example: excerpts from w2x_install_dir/doc/manual/manual.html:

<style type="text/css">
body {
    counter-reset: n-1-0 0 n-1-1 0 n-1-2 0 n-17-0 0 n-20-0 0;
    font-family: Calibri;
    font-size: 11pt;
}
...
</style>

A XED script allows to modify, not only the nodes of an XHTML document, but also its “CSS styles”. These “CSS styles” may be either style properties contained in the style attribute of an element or class names found in the class attribute of an element or the CSS rules of the document.

Therefore, when the desired customization is limited, suffice to execute a XED script in order to modify the XHTML+CSS document created by the Convert step. Example:

w2x -pu edit.before.finish-styles customize\patch_manual.xed¬
 manual.docx out\manual.html

where w2x_install_dir/doc/manual/customize/patch_manual.xed contains:

set-rule(".p-ProgramListing", "white-space", "pre");

The above line adds CSS property “white-space: pre;” to the CSS rule having “.p-ProgramListing” as its selector. This CSS rule corresponds to custom paragraph^[6] style called “ProgramListing”.

Besides XED command set-rule, the following commands allow to edit the CSS styles contained in the XHTML+CSS document created by the Convert step: add-class, add-rule, remove-class, remove-rule, set-style.

Appending custom styles to the styles embedded in the XHTML+CSS file

XED script w2x_install_dir/xed/finish-styles.xed has a optional custom-styles-url-or-file parameter which makes it easy customizing the automatically generated CSS styles.

This parameter may be used to specify the location of a CSS file. The custom CSS styles found in specified file are simply appended to the automatically generated CSS styles. Example:

Example:

w2x -pu edit.finish-styles.custom-styles-url-or-file customize\custom.css¬
  manual.docx out\manual_restyled.html

where customize\custom.css contains:

body {
    font-family: sans-serif;
}

.p-Heading1,
.p-Heading2,
.p-Heading3,
.p-Heading4,
.p-Heading5,
.p-Heading6 {
    font-family: serif;
    color: #17365D;
    padding: 1pt;
    border-bottom: 1pt solid #4F81BD;
    margin-bottom: 10pt;
    margin-left: 0pt;
    text-indent: 0pt;
}

.p-Heading1 {
    border-bottom-width: 2pt;
}

...

.c-FootnoteReference,
.c-EndnoteReference {
    font-size: smaller;
}

Using an external CSS file rather than embedded CSS styles

XED script w2x_install_dir/xed/finish-styles.xed has a optional css-uri parameter which allows to specify the CSS file where all CSS rules, whether automatically generated or custom, are to be saved.

Same example as above but using an external CSS file rather than embedded CSS styles:

w2x -p edit.finish-styles.css-uri manual_restyled_css/manual.css¬
  -pu edit.finish-styles.custom-styles-url-or-file customize\custom.css¬
  manual.docx out\manual_restyled.html

All the CSS styles, whether automatically generated or the custom ones found in customize\custom.css, end up in manual_restyled_css\manual.css. Moreover, out\manual_restyled.html contains a link to manual_restyled_css\manual.css.

<link href="manual_restyled_css/manual.css"
      rel="stylesheet" type="text/css"/>

Combining all the above methods

It is of course possible to combine all the above methods. For example, the following w2x command is used to create w2x_install_dir/doc/manual/manual_restyled.html:

w2x -pu edit.before.finish-styles customize\patch_manual_restyled.xed¬
 -p edit.finish-styles.css-uri manual_restyled_css/custom.css¬
 -pu edit.finish-styles.custom-styles-url-or-file customize\custom.css¬
 manual.docx out\manual_restyled.html

where w2x_install_dir/doc/manual/customize/patch_manual_restyled.xed contains:

for-each /html/body/p[get-class("^p-Heading\d$")] {
    set-variable("class", get-class("^n-\d+-\d+$"));
    if $class != '' {
        set-variable("selector", concat(".", $class, ":after"));
        if find-rule($selector) >= 0 {
            remove-rule($selector);

            set-variable("selector", concat(".", $class, ":before"));
            set-rule($selector, "float");
            set-rule($selector, "width");
            set-rule($selector, "content",
                     concat(get-rule($selector, "content"), ' " "'));
            set-rule($selector, "display", "inline");
        }
    }
}

The above XED script:

1. Delete CSS rules like this one:

   .n-1-0:after {
       clear: both;
       content: "";
       display: block;
   }
   

2. Modify CSS rules like this one:

   .n-1-0:before {
       content: counter(n-1-0);
       counter-increment: n-1-0;
       float: left;
       width: 21.6pt;
   }
   

   which becomes:

   .n-1-0:before {
       content: counter(n-1-0) " ";
       counter-increment: n-1-0;
       display: inline;
   }
   

This script is useful because otherwise adding a bottom border to headings gives an ugly result. While the contents of the heading is “underlined”, the CSS float containing the numbering value of the heading is not.

Besides get-class, the following XPath extension functions may be used to access the CSS styles contained in the XHTML+CSS document created by the Convert step: find-rule, font-size, get-rule, get-style, lookup-length, lookup-style, style-count.