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 paragraph6 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:
Delete CSS rules like this one:
.n-1-0:after {
clear: both;
content: "";
display: block;
}
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.
Why use XPath extension function get-class and not matches(@class,pattern)?
The answer is: because all class attributes have been removed by XED script w2x_install_dir/xed/init-styles.xed.
This script “interns” the CSS rules found in the html/head/style element of the XHTML+CSS document, the CSS styles directly set on some elements and the CSS classes set on some elements.
This operation is needed to allow an efficient implementation of the following XPath extension functions: find-rule, font-size, get-class, get-rule, get-style, lookup-length, lookup-style, style-count, and of the following editing commands: add-class, add-rule, remove-class, remove-rule, set-rule, set-style.
More information about “interned” CSS styles in command parse-styles (command invoked by w2x_install_dir/xed/init-styles.xed) and inverse command unparsed-styles (command invoked by w2x_install_dir/xed/finish-styles.xed).
6 It’s a paragraph style because the CSS style name has a “p-“ prefix.