Style sheets

HTML tags, such as  may be used to directly format output text. Another approach, however, is to use HTML tags to specify purely structural information and use a style sheet to define how various elements within that structure should be treated. DM uses a subset of the Cascading Style Sheet (CSS) language, which was introduced for this purpose in HTML documents.

This section discusses the syntax of style sheets as an independent element. For information on how to include the style sheets in your DM code, see the section on client.script.

Why use style sheets?
As an example of a style sheet, one might want combat and conversational messages to appear differently--perhaps using different colors. Instead of using the  tag to color the text, you could use to mark the beginning and ending of the text and to specify what kind of message it is. The result might be text such as the following:

"[usr] spanks [targ]!" "[usr] says, '[msg]'"

CLASS attribute
The  attribute may be used with any tag, but and  are often convenient because they have no other side-effect but defining the style class. is for text within a single paragraph and  is for whole paragraphs. The way text belonging to a particular class is formatted may be controlled in a style sheet such as the following: .combat {color: red} .chat {color: green}

This says that text in the 'combat' class should be colored red and text in the 'chat' class should be colored green. These classes are not pre-defined; you can create whatever new style classes you need.

Advantage
The advantage of using style sheets instead of direct formatting tags is that you can cleanly separate structural information (such as combat and conversational messages) from formatting information (such as red and green text). By separating the two, you or the player can easily plug in different formatting schemes without changing any of the actual content.

Rules
A style sheet is composed of a list of rules, such as the two rules in the preceding example. Each rule contains one or more selectors followed by a body of attribute assignments (in braces). The selector specifies the context of the rule and the body specifies the format.

Container tag
A selector may specify a container tag (such as, , or  ) and a class. The above example could have been written with a selector of. However, by leaving out the tag, it applies to any tag with. It is also possible to only specify the tag and not the class. In that case, the selector applies to any matching tag, regardless of class.

Nesting
To specify a nested context, several simple selectors may be listed one after the other. For example, emphasized text within a combat message could be enlarged with the following rule: .combat EM {font-size: larger}

Apply to multiple selectors
It is also possible to list several selectors separated by commas in order to make them all apply to the same body. For example, this next rule is equivalent to the two following ones: .combat EM, .chat EM {font-size: larger} .combat EM {font-size: larger} .chat EM {font-size: larger}

Attributes
The style rule body contains a list of attribute assignments, delimited by semicolons. Each assignment takes the form of an attribute name, followed by a colon, followed by the value of the attribute. The following table summarizes the recognized attributes and their possible values.

Fonts
The  attribute is a special short-hand for assigning ,,  , and   in one statement. Any properties that are not specified in the  statement are assigned to their default values.

Font family
The font family may be a specific font name or a more general category such as monospace or sans-serif. Since not all users necessarily have the same fonts installed, it is a good idea to list alternate fonts. The desired font is placed first, followed by other possible fall-backs, each separated by a comma. Usually a general family such as monospace is listed last of all. Any font names containing a space should have quotes around them.

Example
The following example sets the font for the tag. Even if you don't explicitly use  in output text, it is applied implicitly. BODY {font: 12pt 'Times New Roman', sans-serif} This sets the font to 12 point and selects  if it is available and otherwise falls back on a system-determined sans-serif font. This command also implicitly specifies not to use italics and to use a normal font weight (not bold).

Font size
Font sizes may be specified in points (1pt = 1/72 of an inch), picas (1pc = 12pt), pixels (px), inches (in), centimeters (cm), and millimeters (mm). There are also various levels corresponding to the traditional 1 to 7 HTML scale. These are xx-small, x-small, small, medium, large, x-large, and xx-large. In addition to these absolute font sizes, it is possible to use a relative size, such as 150% or equivalently 1.5em. This scales the font relative to the currently active font setting.

Hyperlink pseudo-classes
In addition to regular classes, there are special pseudo-classes for handling embedded hyperlinks. These are specified in the selector with the class starting with a colon rather than a dot. They are , , and. These only apply to the tag. The  class applies to hyperlinks in their normal state. Once a link has been clicked, it belongs instead to the  class. When the user holds the mouse over a link, it temporarily belongs to the  class. The only attribute that may change in an active or visited link is the text color.

Margins and Indents
Paragraphs can be given different margins according to your preferences. The  attribute controls the left margin, and is the right margin. You can use specific sizes like inches or points, or a relative size unit like em or ex. (A percentage is interpreted so that 100% is 1em, not the width of the window.) Using the attribute will indent the first line of a paragraph from the left margin. It is possible to create a hanging indent by using a negative value for, like so: BODY {text-indent: -0.5in; margin-left: 0.5in}

Background Colors
The background attribute is only relevant to the BODY context. It causes the entire terminal background to change color. When doing this, it is usually necessary to change the foreground colors of text or it may become unreadable. The various standard classes of output generated by DreamSeeker are in the following table.

System Colors
script file, followed by a style sheet from the designer's setting, because that is the order in which these are read by the style sheet manager.

Rules from the same style sheet are ordered by specificity. The selector is more specific than  and is more specific than. In general, the more classes referenced by a selector, the more specific it is. When that results in a tie, the selector with the greater number of tags takes precedence.

If two rules about the same attribute come from the same sheet and have the same specificity, the final one to be defined takes precedence.

Important rules
In the rare event that a rule needs to break out of the normal order of precedence, it can be flagged as important. In this case it will take precedence over all other "unimportant" rules. However, if more than one rule is important, the normal rules of precedence will be used to resolve the conflict.

The important flag is applied after the attribute assignment like this: BODY {background: white ! important; font: serif}

In the above example, only the background color is important, not the font specification.

STYLE attribute
Style commands may also be inserted directly in an html tag to control its appearance. This does not have the advantages of style sheets, which separate content from presentation, but it does allow you to use the style sheet syntax when formatting text.

The following example uses the style attribute to color some text:

usr << "That HURT!"

As you can see, the  attribute of any tag can be assigned to a text string containing a list of attribute assignments. Just the body of the style rule is given, since no selector is needed to match the current context.