Using CSS
Introduction
This topic covers what is needed to use CSS with XML content and with HTML content. Although the two are similar, there are some extra steps required for HTML, which are described below. In addition, some tips for editing and creating stylesheets in ALD are provided.
Using CSS with XML
Using CSS with XML is quite straight forward. The XML must be well-formed for a DOM or a DOM stream .xd to be created. The stylesheet can then be associated using either the tcss3/fStream.cssStylesheet method or using the xml-stylesheet processing instruction. If you are developing a CSS for XML it is easiest to create a CSS tag (.cs) in the development document and associate that.
Using CSS with HTML
Using HTML is slightly different from using XML, but the requirement for the HTML to be well-formed remains — a DOM is necessary for CSS to work.
Layout Developer does not enforce default formatting for HTML elements so it is necessary to use the ‘html_base.css’ as a basis. This stylesheet sets up the display types for each of the HTML elements and some very basic text formatting rules. ‘html_base.css’ is provided in the instal folder.
There are two ways to work:
• First is to create an empty tag for ‘html’ and associate the _css.HTMLStart function with it. This will not only load ‘html_base.css’ but will also add any linked CSS files or declared <style> CSS content to that being applied.
var htmlTag = content.getStream("html");
htmlTag.cssStart = _css.HTMLStart;
• The second way is to use tcss3/fStream.cssStylesheet to apply the ‘html_base.css’ stylesheet and then use the xml-stylesheet PI or the cssStart method to load in other CSS declarations.
Editing Stylesheets
Internal CSS stylesheets can be edited as any other tag. Using the debugger does provide some basic syntax highlighting for CSS keywords and values. External CSS stylesheets can be edited in any tool, but they must be saved before updating the link in ALD and reformatting the document in order to see the results. For this reason, it is suggested that using internal stylesheets is done for development even if using external stylesheets is the aim for production work.
When developing CSS stylesheets, note the priority order if using the different association methods — tcss3/fStream.cssStylesheet then xml-stylesheet PI and then cssStart definitions. Also note selector precedence — ALD follows the W3C specification — as well as the interaction between shorthands and the individual properties.
Tag Selection
The context control streams provide a means to specify the manner in which ALD associates code with mark-up in content. This ability is specified on the fStream object using the fStream.disableTagSelection property. CSS is enabled by default, as is tag matching and context matching, but to disable using CSS set:
var myStream = content.getStream("MainText");
myStream.disableTagSelection = fStream.DISABLE_CSS3;