2.4 CSS Styles
Copy
The format and placement of Document Element content in a technical document is largely controlled by the CSS settings configured with the associated Document Type.
Figure 15: Cascading Stylesheet Items
There can be multiple Stylesheet Items configured and each one can extend (cascade) from others through the Parent Stylesheet selection.
When the content a Technical Document is rendered in the Editor or in the HTML published format, each Document Element in the document is converted to a <div> HTML element with a class set equal to the Document Element name. For example: <div class=”Text”>…</div>.
2.4.1 CSS Example
The example Technical Document:
Figure 16: Sample Technical Document
… will result in HTML like:
<body>
<div documentId="…">
<div class="block ArasXmlElement" blockId="…" by-reference="internal">
<div class="Chapter …">
<div class="Title … ArasTextElement">
<span class="emph … ArasStringElement">Example</span>
</div>
<div class="Text … ArasTextElement">
<span class="emph … ArasStringElement">Sample Text Element</span>
</div>
<ul class="List … ArasListElement" type="bullet">
<li class="List-Item … ArasListItemElement bulletListItem">
<div class="Text … ArasTextElement">
<span class="emph … ArasStringElement">List Item 1</span>
</div>
</li>
<li>…</li>
</ul>
<table class="Table … ArasTableElement" ColWidth="50|50">
<colgroup><col width="50%" /><col width="50%" /></colgroup>
<tr class="Row … ArasTableRowElement">
<td class="Entry … ArasTableCellElement" valign="top" align="left">
<div class="Text … ArasTextElement">
<span class="emph … ArasStringElement">Row 1, Col 1 Text</span>
</div>
</td>
<td>…</td>
</tr>
<tr>...</tr>
</tr>
</table>
<div class="Graphic-Block …">
<img class="Graphic … ArasImageElement" src=”…” ... />
</div>
</div>
</div>
</div>
</body>Figure 17: Sample Generated HTML
The Example above contains instances of common Document Elements (i.e., Text, Table, List, Image). The XML content (not shown) is like the HTML. The top-most HTML element is a <div> that represents the entire document and contains an attribute for the Technical Document Item Id. The second level is a single <div> used to represent the content of the document. It is assigned a class of ‘block’.
The Document Elements placed into the Document start at the third level of <div>s. Notice that class value contains the name of the Document Element as assigned in the Document schema. It also contains class names assigned based on the XML Elements that are extended in the Document Type schema. Also notice that Formatted Text Document Elements (‘Text’ in this example) have embedded <emph> tags around the text content. These are used to assign the formatted style (Bold, Italic, Underline, etc.) assigned in the Technical Document Editor.
2.4.2 Defining a Cascading Stylesheet
CSS content is defined using the CSS Editor, accessed from the Style Items added to the Document Type:
Figure 18: Opening a Stylesheet Item
Figure 19: Stylesheet User Interface
The CSS Form Editor is configured to display CSS content with syntax highlighting to match the elements of the content. Note that CSS selectors using the class name is the preferred method to identify the generated HTML elements.
The editor form element can be extended/resized by dragging the handle at the lower right corner.
2.4.3 CSS Formatting Examples
This section contains examples for setting CSS attributes for various types of Document Elements. It is meant to provide a guide for customizing the layout and style of the reader’s content.
2.4.3.1 Identifying a class of Document Element
HTML Elements can be identified in a CSS Selector by the standard element name (e.g., div, p, li, etc.), using an element’s ID, or by a class name. The class name selector is the approach used for Technical Documents. The class selector uses a dot ‘.’ followed by the name of the class. As described in this document, the name of the Document Element is stored within the class attribute so it can be used as a mechanism to target the application of CSS parameters.
The following selector is used to declare properties for the entire HTML body:
body {
text-align: left;
font-family: “Tahoma”, Geneva, sans-serif
}
The following selector is used to declare properties for the Document Element with name ‘Text’:
.Text {
color: #505050;
}
In the first example, the HTML Element name is used. The second example uses the class style selector is used (not the preceding ‘.’) to select all Document Elements with the name ‘Text’.
The following selector is used to declare properties for the Document Element with name ‘Text’ that are within a Table:
.Table .Text {
color: #FF0000;
}
In this example above the first part of the Selector identifies the elements with a class of ‘Table’, followed by a space, followed by the Selector for elements of class ‘Text’. In this case, any Text Document that is a descendant of a Table Document Element will use the Property Declaration.
.Row:nth-child(1) {
background-color: #ccc;
text-align: left;
font-weight: bold;
}
In this example above, any content that is a descendant of the first instance of a Row Document Element will use the Property Declaration. Such a format is used to modify the style for text in the first row of a table.
In this last example, alternating rows in a table will have different background colors:
.Row:nth-child(even) {
background-color: #ddd;
}
.Row:nth-child(odd) {
background-color: #eee;
}
2.4.3.2 Centering Images
Centering images within the Editor, HTML output, and PDF output can be configured with CSS like:
.Graphic img {
display: block;
margin-left: auto;
margin-right: auto;
}
img.Graphic {
display: block;
margin-left: auto;
margin-right: auto;
}This example defines a Graphic Document Element, named ‘Graphic’. All image content uses the img HTML Element for displaying the image. However, the Technical Document Editor uses a format like:
<div class=”Graphic>
<img …/>
</div>
The HTML output format used for HTML and PDF however uses a format like:
<img class=”Graphic”…/>
Therefore, both declaration formats are required to center an image in the Editor and in visual output formats. In the top declaration, the img element are targeted as children of other elements with a class = ‘Graphic’. The bottom declaration targets img elements with a class of ‘Graphic’.
2.4.3.3 Using Counters
Technical Documents rely on CSS Counters for automatic numbering used for Chapter, Section, Figures, and Lists. CSS Counters use Properties that are implicitly defined in the CSS content to manage counter values. Accessor functions within the CSS language can then be used to increment and reference Counter Property Values. The following example show the process of declaring, incrementing, and accessing Counter Property values:
Figure 20: Chapter Numbering Example
body {
counter-reset: sectionNum; /* Counter used for Chapter / Section numbering */
}
.Chapter {
counter-increment: sectionNum;
}
.Chapter > .Title::before {
content: counter(sectionNum) ' ';
}
In this example a Counter Property – ‘sectionNum’ is declared (using ‘counter-reset’) within the body declaration. It is incremented (using ‘counter-increment) within the Chapter class declaration and used (via the counter() function) with the ‘before’ pseudo-element for the ‘Title’ Document Element that is an immediate child of a ‘Chapter’ Document Element.
Counter Properties must be declared before they are incremented or used/accessed. In this case, the CSS declaration for body ensures that the Counter is declared before any ‘Chapter’ elements are encountered.[1] Each time the HTML process encounters elements with a class = ‘Chapter’ it will increment the value of the counter (counters start at ‘0’ for numerical counters). Once an element with a class name of ‘Text’ is encountered, that is a direct child of a ‘Chapter’ element, it will precede the content for the ‘Text’ Document element with the value of the Counter followed by a single space.
2.4.3.4 Adding Attributes to customize Document Element Style
In this example, an Attribute (named ‘size’) is added to an Image Document Element (named ‘Graphic) in the Document Type schema:
<xs:element name="Graphic">
<xs:complexType>
<xs:complexContent>
<xs:extension base="aras:imageType">
<xs:attribute name="size" type="ImageSizeAttType"/>
</xs:extension>
</xs:complexContent>
</xs:complexType>
</xs:element>
<xs:simpleType name="ImageSizeAttType">
<xs:restriction base="xs:string">
<xs:enumeration value="small"/>
<xs:enumeration value="medium"/>
<xs:enumeration value="large"/>
</xs:restriction>
</xs:simpleType>The values for the ‘size’ Attribute are restricted to the values: ‘small’, ‘medium’, and ‘large’, as defined by the ‘ImageSizeAttType’ Simple Type defined in the XMl Schema. The values can be set for the size Attribute for any ‘Graphic’ Document Element using the Attributes Dialog in the Technical Document Editor:
Figure 21: Image Size Attribute Example
CSS selectors can then be defined to isolate ‘Graphic’ elements with size Attributes with specific values as follows:
img[size='small’].Graphic, .Graphic[size='small’] img
{
max-width: 200px;
}
img[size='medium’].Graphic, .Graphic[size='medium’] img
{
max-width: 400px;
}
img[size='large’].Graphic, .Graphic[size='large’] img
{
max-width: 600px;
}
In this example the CSS Attribute Selector is defined for each of the Attribute values to set the maximum image width for each. In this manner, when the author selects certain values, the size of the image is updated accordingly. There is no default value specified for the ‘size’ Attribute so empty values will default to the default size of the image.