Edit online

If you notice that some of the CSS properties were not applied, some typical debugging steps might include the following:
  1. The first thing you should try is to check the file structure of the merged map. This can be found in the out/pdf-css directory and it has the .merged.xml file extension. You can open this file in Oxygen XML Editor/Author to examine the XML structure. Optionally, you can pretty print it (Format and Indent) to make the structure easier to read.
  2. Then check that the CSS selector is written correctly.
  3. If you still cannot identify the problem, then inspect how the styles are applied (you can try one of the methods listed below).

Inspecting the Applied Styles Using the Chrome Browser

To inspect the applied CSS styles using Chrome:
  1. Open the .merged.xml file in Chrome.
  2. Click on the element you want to inspect.
  3. Activate the Chrome Developer Tools by using > More Tools > Developer Tools, or press CTRL+SHIFT+I.
  4. Activate the Rendering pane by using > More Tools > Rendering:

  5. In the Rendering pane, select print from the Emulate CSS media section. This will activate the CSS selectors enclosed in @media print {..}.

Note: This allows you to the debug styling of elements, table of contents, and index, but not the styles of the page margin boxes (headers, footers) or page breaks.
Tip: In the left pane of the Developer Tools interface, you can inspect elements and their styles in the Elements tab. You can click on any of the links to display the applied CSS files in the Styles tab in the right pane. Editing the styles in that pane results in a live preview of how the change will affect the output.
CAUTION:
Do not modify the built-in rules directly in the CSS files from the Oxygen XML Editor/Author installation. Instead, copy the rules to your own customization CSS.

Inspecting the Applied Styles Using Oxygen XML Editor/Author

To inspect styles:
  1. Open the file ending in .merged.xml file in Oxygen XML Editor/Author
  2. From the Styles toolbar, choose the + Print Ready entry. This will activate the CSS selectors enclosed in @media print {..}.
  3. Click on the element you want to style. Use the Inspect Styles action from the Contextual Menu. A specialized view will show the built-in CSS rules.
Note: This allows you to debug styling of elements, but not of the page margin boxes (headers, footers) or page breaks.
CAUTION:
Do not modify the built-in rules directly in the CSS files from the Oxygen XML Editor/Author installation. Instead, copy the rules to your own customization CSS.

Other techniques

These are some other techniques you may find useful:

  • Add background and borders properties to the specific CSS rule. If they do not appear in the output then there is a problem with the rule selector.
  • Try to use the !important notation to the property that is not applied, or make the selector more specific (you can add more parent selectors).
  • To figure out how the elements are mapped into PDF, you can use this fragment in the customization CSS:
    * {
       border: 1pt solid blue !important;
    }
    
    *:before(1000) {
       content:  oxy_name() !important;
       color: orange;
    }
    
    *:before(999) {
       content: "[ class= '" attr(class) "'] " !important;
       color: orange;
    }
    This will show the element name, its class attribute, and will paint a blue border around each of the elements in the output. It will not show the page margin boxes or some content elements that were hidden.