An XML model of CSS3 as an XL ATEX-TEXML-HTML5 stylesheet language

HTML5 [1] and CSS3 [2] are popular languages for Web development. However, HTML with CSS is prone to errors and difficult to port, so we propose an XML version of CSS that can be used as a standard for creating stylesheets and templates across different platforms and pagination systems. XLTEX [3] and TEXML [4] are some examples of XML that are close in spirit to TEX that can benefit from such an approach. Modern TEX systems like X E TEX and LuaTEX use simplified fontspec macros to create stylesheets and templates. We use XSLT to create mappings from this XML-stylesheet language to fontspec-based TEX templates and also to CSS3. We also provide user-friendly interfaces for the creation of such an XML stylesheet. 1 Comparison of OpenOffice and CSS stylesheets Nowadays, most modern applications have implemented an XML package format including an XML implementation of stylesheets: InDesign has its own IDML [5] (InDesign Markup Language) XML package format and Microsoft Word has its own OOXML [6] format, which is another ISO standard format. As they say ironically, the nice thing about standards is that there are plenty of them to choose from. However, instead of creating one more non-standard format, we will be looking to see how we can operate closely within current standards. Below is a sample code derived from OpenOffice document format: + - The equivalent CSS style is listed below: heading1{ font-family: Adobe Caslon Pro Bold; font-size:14pt; font-style: normal; font-variant: normal; font-weight: bold; line-height: 16pt; text-align: left; color: black; background-color: none; text-decoration: none; text-transform: normal; } heading2{ font-family: Arial; font-size:14pt; font-style: italic; font-variant: normal; font-weight: bold; line-height: 16pt; text-align: left; color: black; background-color: none; text-decoration: none; text-transform: normal; } When comparing the above two style coding standards, the Cascading Style Sheet (CSS) is a simple and straightforward formulation without complex namespaces, additional attributes and other details which are not mandatory to form a style. An XML model of CSS3 as an XLTEX-TEXML-HTML5 stylesheet language 282 TUGboat, Volume 32 (2011), No. 3 1.1 Advantages of CSS style patterns • CSS is simple to author. • CSS makes it possible for the entire style and layout to be abstracted out of the HTML, so the HTML has only the content. • Different stylesheets can be used for different media without the user having to explicitly choose one; e.g., printers, desktop monitors and other smaller portable devices. • Implementing CSS is straightforward for the HTML engines. 1.2 Disadvantages of CSS style patterns While new additions to CSS3 provide a stronger, more robust feature-set for layout, CSS is still at heart a styling language (for fonts, colours, borders and other decoration), and not a layout language (for blocks with positions, sizes, margins, and so on). These limitations mean that creating fluid layouts generally requires hand-coding of CSS. 2 Introducing the Cascading Style Sheet Markup Language (CSSML) SASS [7] is a meta-language on top of CSS that is used to describe the style of a document clearly and structurally, with more power than flat CSS. SASS provides a simpler, more elegant syntax for CSS and also implements various features that are useful for creating manageable stylesheets. SASS is an extension of CSS3 and provides several useful features which can handle nested rules, common variables, etc. However, it is not an XML model and cannot be validated using a DTD/schema. We will introduce here the Cascading Style Sheet Markup Language (CSSML), an XML version of CSS that can be used as a standard for creating stylesheets and templates across different platforms and pagination systems. It is also an extension of CSS3 to handle nested rules as in SASS, and can be validated using DTD/schema. We also hope CSSML will eventually evolve to circumvent all the current limitations in CSS and XSL-FO, especially the rules of placement of figures and tables in multi-column layout of text. However, we want to keep the CSSML as a clean data model by not introducing a scripting language on top of it as is the case with SASS. 3 Definition of CSSML In general, our Cascading Style Sheet Markup Language (CSSML) specifies style format details in a well-structured XML format. The style names used in CSSML are similar to CSS; the only difference is that the style names are defined as XML tag elements. Here is an example to explain the difference between CSS and CSSML style coding: CSS: font-family: Adobe Caslon Pro Bold; CSSML: Adobe Caslon Pro Bold The main advantage of the CSSML tag pattern is that we can validate the CSSML document using XML Schema or XML DTD which is not possible in CSS. We can write our own XML DTD/schema to validate the CSSML document as follows: • Elements and attributes that must/may be included, and are permitted in the structure. • The structure as specified by a regular expression syntax. • How character data is to be interpreted, e.g. as a number, a date, etc. However, creating the CSSML document is not as simple as creating CSS. CSSML needs XML tagging for all the data, and the user needs to wrap all the details with appropriate XML elements. To avoid such difficulties, we have provided a user interface to create CSSML automatically with appropriate XML elements.