|
DSSSL formatting objects mapping to
HTML+CSS. The html output format mode.
By
Didier PH Martin,
March 24, 1999
-
Home Page
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
IntroductionDSSSL 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 stylesheetFor 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
objectsNot
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
objectThe
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:
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 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
objectThe
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 scriptNot 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
|