DSSSL - Document Style Semantics And Specification Language             
ISO/IEC 10179:1996

 

DSSSL formatting objects mapping to HTML+CSS. The html output format mode.

By Didier PH Martin, March 24, 1999

* Home Page
introduction Introduction 
* How to link a SGML/XML document to a HTML+CSS DSSSL transformation stylesheet 
* Supported DSSSL objects 
* The Scroll object 
* The paragraph object 
* The Sequence Object 
* The Link Object 
* A sample script 

Introduction

DSSSL is the ISO standard language allowing the rendition of SGML or XML documents. The SGML/XML kit adds to current browsers (IE and, in a future release, Mozilla) DSSSL processing for SGML and XML documents.

This document describes the SGML/XML kit html rendition format. This rendition format do a translation from DSSSL formatting objects to HTML+CSS. Thus, a subset of DSSSL objects are mapped to HTML+CSS. For instance, a DSSSL paragraph object is mapped to a <DIV><SPAN>...</SPAN></DIV> construct. For Jade veterans, this transformation process is invoked by the -t html command line instruction.

Since version 4.x, a certain level of support for CSS is provided by major browsers. Thus, more sophisticated rendition is now feasible with these modern browsers. The Talva kit (based on Jade dsssl engine) maps DSSSL formatting objects to HTML+CSS formatting objects. This feature, allows SGML and XML documents to be rendered with the native browser's rendition language, but at the same time, allows to define the document's format with DSSSL formatting objects.

With this mode, when the original SGML/XML document is processed with a dsssl script, a HTML and a CSS document are produced. both documents have the same name except that the former is ended with a html file extension and the latter with a css file extension.

The dsssl engine creates one or several HTML formatting objects for each dsssl formatting object. The HTML objects  properties like font style, color, font weight are all implemented as CSS properties. 

When SGML/XML kit download a document form the web, it first check for the stylesheet processing instruction, download this style sheet script, process the document with the script and then render it in the browser with its native objects.

How to link a SGML/XML document to a HTML+CSS DSSSL transformation stylesheet

For XML documents, a processing instruction can be included at the beginning of the document like in the following example. 
<?xml-stylesheet href="myscript.dsl" type="text/dsssl" media="screen,html"?> 
 if the media property is not present in the processing instruction, it is automatically set by default to media="screen".

A SGML document including a stylesheet processing instruction is governed by the same rules as for XML documents except that the style sheet keyword is different (you can also use the same style sheet keyword for both) 
<?stylesheet href="myscript.dsl" type="text/dsssl" media="screen,html"> 
 Note: The output format is specified in the media attribute. To tell to the SGML/XML Kit that that the DSSSL objects are to be transformed into HTML+CSS objects, include in the media attribute the "html" output format value. Thus if this attribute is set to "screen, html" then the engines knows that the output format is targeted to the screen and that DSSSL objects are mapped to the HTML format.

Supported DSSSL objects

Not all DSSSL formatting objects are supported in the actual version. Only these DSSSL objects are currently supported:
  • Scroll
  • paragraph
  • sequence
  • link
These objects are DSSSL atomic objects and are mapped directly to HTML+CSS. However, other kind of DSSSL objects are also supported. These objects are more like containers or generic objects independent of particular mapping,  Among them:
  • display-group
  • sosofo-append
  • literal
Usual DSSSL operators like:
  • process-children
  • process-matching-children
  • etc...
all still work with the html rendition mode. External libraries work as well.

The Scroll object

The Scroll object is usually associated to the document's root object. A scroll flow object is used as the top-level flow flow object for online display that does not divide output into pages. The size of the flow object in the direction perpendicular to the filling-direction is determined by the browser. For the moment, the actual implementation do not support any Scroll flow object properties 

The dsssl engine produces a rendition objects composed of HTML+CSS objects. Two documents are produced:

  • A HTML document 
  • A Cascading Style Sheet document
The scroll formatting object is associated to the following HTML objects:
  • HTML 
  • BODY
Thus, the make scroll rule creates a HTML document declaration like below:
  
HTML formatting objects: 
<HTML> 
<BODY> 
    .... Formatting object produced by children rules.... 
</BODY> 
</HTML> 
DSSSL rule: 
(make scroll 
    (process-children) 
) 
CSS class definition: 
DIV { 
margin-top: 0pt; 
margin-bottom: 0pt; 
margin-left: 0pt; 
margin-right: 0pt 
}
 

A default margin setting for DIV objects is created in the CSS file. All other DIV objects will inherit this object's properties. 

The paragraph object

The paragraph formatting object is translated into DIV and SPAN objects. Each HTML object is associated to a CSS class with the same name as the original SGML/XML document element. In the example below, a class named name is created for the XML element name . 
  
XML element: 
<name>Belgian Waffles</name> 
DSSSL rule: 
(element name 
    (make paragraph 
     font-family-name: "Verdana" 
       font-size: 12pt; 
     font-weight: 'bold 
       quadding: 'center 
     space-before: 23pt 
       (process-children) 
     )
)
HTML formatting objects: 
<DIV CLASS=name> 
  <SPAN CLASS=name>Belgian Waffles</SPAN> 
</DIV> 
CSS class definition: 
SPAN.name { 
font-family: Verdana; 
font-weight: 700; 
font-style: normal; 
font-size: 12pt; 
color: #000000; 
} 
DIV.name { 
margin-top: 23pt; 
text-align: center; 
line-height: 12pt; 
text-indent: 0pt; 
}
 

The conversion rules for the paragraph DSSSL formatting object into CSS classes is showed in the table below. 
  
Paragraph DSSSL properties Equivalent DIV CSS properties
start-indent margin-left
end-indent margin-right
space-before margin-top
space-after margin-bottom
first-line-start-indent text-indent
quadding text-align
  
Paragraph DSSSL properties Equivalent SPAN CSS properties
font-weight font-weight
font-posture font-style
font-family-name font-family
font-size font-size
color color
line-spacing line-height

 

The Sequence object

The sequence formatting object is translated into a SPAN object. The created span object is associated to a CSS class with the same name as the original SGML/XML document element. in the example below, the Price element is transformed into SPAN object and this latter is associated to the price class.
  
XML element: 
<price>$5.95</price> 
DSSSL rule: 
(element price 
    (make sequence 
        font-family-name: "Verdana" 
        font-weight: 'bold 
        font-size: 10pt; 
        font-posture: 'italic 
        color: red-color 
        line-spacing: 12pt 
        (process-children) 
    ) 
) 
HTML formatting objects: 
  <SPAN CLASS=price>$5.95</SPAN> 
CSS class definition: 
SPAN.price { 
font-family: Verdana; 
font-weight: 700; 
font-style: italic; 
font-size: 10pt; 
line-height: 12pt 
color: #ff0000; 
}
 

The conversion rules for the paragraph DSSSL formatting object into CSS classes is showed in the table below 
  
Sequence DSSSL properties Equivalent SPAN CSS properties
font-weight font-weight
font-posture font-style
font-family-name font-family
font-size font-size
color color
line-spacing line-height
first-line-start-indent text-indent
 

The link object 

The Link formatting object is translated into a Anchor "A" object. This is simply a HTML hyperlink. In the actual implementation, only the following kind of address objects are supported: 
  • idref-address
  • current-node-address

 
XML element: 
<reference href="#index">Today's menu</reference> 
DSSSL rule: 
(element reference 
    (make link 
destination: (idref-address (attribute-string "HREF" (current-node))) 
        (process-children) 
    ) 
) 
HTML formatting objects: 
  <A href= "htp://www.netfolder.com/example.html#index">Today'smenu</A> 
?

In this case, no CSS classes are associated to the HTML anchor.

A sample DSSSL script

Not all DSSSL formatting objects are implemented in the actual SGML/XML kit, but enough of them are present to create a working style sheet. The following script illustrate how to render a SGML or XML document with HTML+CSS formatting objects.

The XML document to be rendered contains some simple elements:

  • Breakfast-menu 
  • Food 
  • Name 
  • Price 
  • Description 
  • Calories 
The following script transform XML elements into HTML+CSS formatting objects ready to be displayed in the browser.
  

<!DOCTYPE style-sheet PUBLIC "-//Netfolder//DTD DSSSL library//EN" >

(define (rgb r g b)
(color (color-space "ISO/IEC 10179:1996//Color-Space Family::Device RGB") r g b))
(define white-color (rgb 1 1 1))
(define veju-color (rgb 0.9 0.9 1))
(define red-color (rgb 1 0 0))
(define green-color (rgb 0 1 0))
(define blue-color (rgb 0 0 1))
 
(root
   (make scroll 
       (process-children)
   )
)
 
(element breakfast-menu
   (make paragraph
        quadding: 'center 
        (make sequence 
             font-family-name: "Verdana"
             font-size: 12pt
             font-weight: 'bold 
            (literal "Today's menu")
        )
       (process-children)
   )
)
 
(element food
   (make display-group
      (make paragraph
          space-before: 23pt 
          start-indent: 18pt 
          end-indent: 27pt 
         (process-matching-children "name")
         (process-matching-children "description")
      )
     (make paragraph
          line-spacing: 12pt
          quadding: 'center 
          (process-matching-children "price")
          (literal " - ") 
          (process-matching-children "calories")
          (literal " calories")
      )
   )
)
 
(element name
      (make paragraph 
          font-family-name: "Verdana" 
          font-size: 12pt; 
          font-weight: 'bold 
          (process-children)
      )
)
 
(element price
     (make sequence 
         font-weight: 'bold 
         font-size: 10pt; 
         font-posture: 'italic 
         color: red-color 
         (process-children)
     )
)
 
(element description
    (make paragraph
        font-family-name: "Times New Roman,serif" 
        font-size: 12pt
        (process-children)
    )
)
 
(element calories
    (make sequence)
)

All trademarks herein are the property of their respective owners. 
Copyright ©  1999-2003 Didier PH Martin, All rights reserved. Created by Didier PH Martin, modified: April 7, 2003