A set of rules must be defined for describing how the XML document is to be rendered into the <oXygen/> Author. This is done using Cascading Style Sheets or CSS on short. CSS is a language used to describe how an HTML or XML document should be formatted by a browser. CSS is widely used in the majority of websites.
For more information regarding CSS, please read the specification http://www.w3.org/Style/CSS/. A tutorial is available here : http://www.w3schools.com/css/css_intro.asp
The elements from an XML document are displayed in the layout as a series of boxes. Some of the boxes contain text and may flow one after the other, from left to right. These are called in-line boxes. There are also other type of boxes that flow one below the other, like paragraphs. These are called block boxes.
For example consider the way a traditional text editor arranges the text. A paragraph is a block, because it contains a vertical list of lines. The lines are also blocks. But any block that contains inline boxes is arranging its children in a horizontal flow. That is why the paragraph lines are also blocks, but the traditional "bold" and "italic" sections are represented as inline boxes.
The CSS allows us to specify that some elements are displayed as tables. In CSS a table is a complex structure and consists of rows and cells. The "table" element must have children that have "table-row" style. Similarly, the "row" elements must contain elements with "table-cell" style.
To make it easy to understand, the following section describes the way each element from the above schema is formatted using a CSS file. Please note that this is just one from an infinite number of possibilities of formatting the content.
This element is the root element of the report document. It should be rendered as a box that contains all other elements. To achieve this the display type is set to block. Additionally some margins are set for it. The CSS rule that matches this element is:
report{ display:block; margin:1em; }
The title of the report. Usually titles have a larger font. The block display should also be used - the next elements will be placed below it, and change its font to double the size of the normal text.
title { display:block; font-size:2em; }
This element contains several lines of text describing the report. The lines of text are displayed one below the other, so the description will have the same block display. To make it standout the background color is changed.
description { display:block; background-color:#EEEEFF; color:black; }
A line of text in the description. A specific aspect is not defined for it, just indicate that the display should be block.
line { display:block; }
The important
element defines important text from the description.
Because it can be mixed with text, its display property must be set to inline. To make it easier to spot, the text will be
emphasized.
important { display:inline; font-weight:bold; }
The results
element shows the list of test_names and the result for
each one. To make it easier to read, it is displayed as a table with a green border and margins.
results{ display:table; margin:2em; border:1px solid green; }
An item in the results element. The results are displayed as a table so the entry is a row in the table. Thus, the display is table-row.
entry { display:table-row; }
The name of the individual test, and its result. They are cells in the results table with display set to table-cell. Padding and a border are added to emphasize the table grid.
test_name, passed{ display:table-cell; border:1px solid green; padding:20px; } passed{ font-weight:bold; }
The full content of the CSS file test_report.css
is:
report { display:block; margin:1em; } description { display:block; background-color:#EEEEFF; color:black; } line { display:block; } important { display:inline; font-weight:bold; } title { display:block; font-size:2em; } results{ display:table; margin:2em; border:1px solid green; } entry { display:table-row; } test_name, passed{ display:table-cell; border:1px solid green; padding:20px; } passed{ font-weight:bold; }