New System Files to Support CSS

Three system files can be used to drive CSS formatting in ALD. These are described below. While scss.js is minimised to reduce space and for efficiency, the other two are open for developers to edit to change behavior in ALD.

The main diving force of the CSS support is the scss.js file which creates a collection of JavaScript objects and functions to handle the CSS properties. Please see the ‘Architecture’ section for more information on how this works. The scss.js file is absolutely necessary for CSS to work and must not be edited by users.

The css_config.js file is used to configure some of the behavior of the scss.js file. In this file, you will find:

• An option to use page formatting as defined using the @page rules in the stylesheet. This is provided as an option if template developers want to create their own page layouts.

• Configuration options for the types of messages to generate. Messages are generated in a number of different locations, such as entering a property function, and can provide insight into the CSS processing and the values being processed:

◦ _css._config._logType — specifies whether to generate an alert, write to a stream, write to a file or populate a variable. By default an application alert is generated.

◦ _css._config._logOutputName — specifies the stream name, file name or variable name (depending on type) that the messages are written to

◦ _css._config._logFilePath — if writing messages to a file, the location path for the file. By default, this will be the document location.

• Options to turn on/off alerts and warnings, and an option to store user data on the XML nodes for the properties which have been processed

◦ _css._config._warn turns on/off log messaging for the use of any not-implemented CSS properties and will inform the user of which element is being matched and the property and value which is being used

◦ _css._config._alert turns on/off log messaging for not-implemented features as well as any use of any property on any element — this will generate a lot of information, so it is recommended to have the debugger open if using alerts

◦ _css._config._userData turns on/off storing property values as user data on the nodes which have those properties set. This is implemented to allow users to gather that information and a sample is provided which includes a dialog box to examine the properties set when processing CSS

• The FISH bucket to use for some properties such as numbering. If your template already uses FISH, ensure this FISH bucket does not clash. By default, CSS uses FISH bucket 1

• Element attributes used by HTML table elements — the elements themselves are set up by the html_base.css file.

• The location of the html_base.css file which is required to tell ALD the basic properties for HTML elements in order for them to behave as expected.

• Initial values for all properties (whether they are supported or not). Initial values are taken from the CSS specifications but are provided here for users to allow them to customise default behavior

• Page dimensions of the named page sizes. The CSS specification states page dimensions for named page sizes such as A4 or US Letter but users can add others here or override the default dimensions if needed

• The order in which page boxes are applied. The CSS specification states the order in which different page boxes are formatted, but this option allows users to configure this.

The html_base.css file provides a basis for formatting HTML elements using CSS. At a minimum it provides the display property value for the different elements but can also specify some initial formatting properties which web browsers would apply to those elements by default. Users can customise this file if needed. The path to this file is set in the css_config.js file. If users want to point to a different version then they should edit this location or change the variable’s value within a template.