Re: From CSS to DSSSL

At 3:33 PM -0400 4/17/97, Paul Prescod wrote:

> If anyone agrees to write the CSS stylesheet, I'll write the DSSSL
> stylesheet and we'll see which really is harder. I'll even let you skip
> hard things like tables, hyperlinks and forms. We'll just talk about
> formatting for a simple subset of HTML -- either of us could write the
> DTD.
[snip]
> Who's up for it?

I'm game.

See appendix a of the CSS spec for an example of a comprehensive stylesheet
for HTML 2.0. http://www.w3.org/pub/WWW/TR/REC-CSS1#appendix-a. Note that
only IE4b1 does a tolerably good job with this (among major browsers). I
have been playing with this as a base for a personal style sheet, and apart
from a few bugs in UA implementation have found it remarkably easy. In
contrast, I found Jade utterly opaque (lazy Mac user, me).

/* this is a work in progress. All rights reserved for the time being. */

BODY {
margin-left: 16%;
margin-right: 4%;
margin-top: 8%;
font-family: Verdana, Gill Sans, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px; /* yes, pixels, because points are broken across
platforms, and I'm after a particular rasterization (Verdana's) more than
an absolute size. */
line-height: 1.3em;
background: #FFFDF3;
color: black;
text-align: left;
}

H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR {
display: block;
}

B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN {
display: inline;
}

LI {
display: list-item;
}

P {
text-indent: 4%;
margin-top: 0;
margin-bottom: 0;
}

/* this pseudo-class does not exist yet. it should */
P:INITIAL {
text-indent: 0;
}

/* this is for some measure of compatibility with table-based layouts */
TABLE {
margin-top: 0;
margin-bottom: 0;
margin-right: -4%;
margin-left: -16%;
}

/*this is a workaround to eliminate indent on initial paragraphs until we
get a pseudoclass */
DIV P:first-line {
text-indent: -4%;
}

H1 {
font-size: 167%;
margin-top: 2.5em;
margin-bottom: 1.5em;
letter-spacing: 0.1em;
font-weight: bold;
text-transform: uppercase;
 }

H2 {
font-size: 133%;
margin-top: 1.5em;
margin-bottom: 1em;
font-weight: bold;
 }

H3 {
font-size: 133%;
margin-top: 1em;
margin-bottom: 0.25em;
font-weight: bold;
}

H4 {
font-size: 125%;
margin-top: 1em;
margin-bottom: 0;
font-weight: bold;
}

H5 {
font-size: 100%;
margin-top: 1em;
margin-bottom: 0;
font-weight: bold;
text-indent: 4%;
}

H6 {
font-size: 100%;
margin-top: 1em;
margin-bottom: 0;
text-indent: 4%;
font-weight: normal;
text-transform: lowercase;
}

STRONG {
font-weight: bolder;
}

CITE, EM  {
font-style: italic;
}

BLOCKQUOTE {
margin-left: 4%;
font-size: 0.7em;
line-height: 1.2em;
}

TT, VAR, ADDRESS, KBD, CODE, SAMP {
font-family: monospace;
font-size: 120%;
}

PRE {
margin-left: -16%;
font-family: monospace;
font-size: 120%;
white-space: pre;
}

BLOCKQUOTE {
margin-left: 24%;
margin-right: 16%;
}

UL, DIR {
list-style: disc
margin: 0;
}

OL {
list-style: decimal;
margin: 0;
}

MENU {
margin: 0
}

LI {
margin: 0;
}

DT {
margin: 0;
font-weight: bold;
}

DD {
margin: 0;
}

/* horizontal rules are ugly. this replaces them with whitespace, sorta. */
HR {
margin: 2.5em;
border-top: solid;
width: 1em;
height: 1em;
color: #FFFDF3;
/* display: none; */
}

A {
text-decoration: none;
}

A:link {
color: red;
}

A:visited {
color: #336666;
}

A:active {
color: red;
background: #FFFF00;
}

A:link IMG {
border: 1px solid red;
 }

A:visited IMG {
border: 1px solid #336666;
}

A:active IMG {
border: 2px solid #FFFF00;
}

__________________
Todd Fahrner
http://www.verso.com

Received on Thursday, 17 April 1997 16:39:51 UTC