Architecture
Introduction
In order to make the most of CSS in ALD, it is worth understanding the architecture of the code behind the feature. This is especially true when using fFormatting.applyCSS(). The CSS architecture in ALD requires two parts — the code within ALD to collect property values and then call the right functions at the right time, and the JavaScript code contained within scss.js which defines the functions being called. This topic describes the various functions and the order they’re called.
scss.js is executed when ALD is loaded. This script file calls css_config.js first, and then creates many objects under the _css global object. Using this global object makes the CSS processing available to all documents.
Parsing the Stylesheet
Stylesheets are parsed when the stream they are associated with starts formatting. The parsing process builds a collection of selectors and the properties associated with those selectors. The exception is the CSS provided by the cssStart functions on streams as these are a format-safe collection which, if another cssStart function is executed, can be replaced.
When Formatting
When formatting a document using CSS @page rules, the functions declared for those rules in scss.js are processed to create the page objects (frames, layers, layer groups, page sequences) from the declared rules. This process also creates content streams for the page boxes (apart from the main content stream). All these objects are represented by tags stored in a namespace ‘css_ns_X’ where X is the number of the stream being processed. The @ rule processing may expand in the future, but currently only @page and its children are currently supported.
Matching Selectors
When a context in the XML is encountered, ALD looks for matches and, as there may be more than one selector matching the current context, creates a collection of properties from all matching selectors. This process is based on the W3C CSS specification. Those properties are then used as described below.
Entering and Exiting Contexts
When a selector is matched when traversing the XML content, ALD will execute the displayPre() function which sets up objects to collect information. The ‘display mode’ which has been calculated for the context from the ‘display’ property is passed to this and every function to ensure the processing knows what objects to create.
Following displayPre(), the onEnter() functions for each of the properties which are applied for that context are executed, with display mode, value and formatting position. Depending on the property, these functions add properties to the objects created in displayPre().
After the property onEnter() functions have been executed, the displayStart() function is called, which takes the objects and their properties and creates formatting objects such as fStyle, fParagraph and fBlock and applies them. To track information, the _css._state object is used.
On the way out of the context, a similar process is used. The displayEnd() function is executed, followed by the onExit() property functions and then finally the displayPost() function which typically ends the formatting objects which were started in the displayStart() function.