Style
Next, this element is completely optional, a "style" definition (you can also directly continue with stations):
<style>
<background
color="rgb(0%,0%,0%)"
image="url('media/back.gif')"
repeat="no-repeat"
/>
<font
color="rgb(100%,100%,100%)"
family="arial, sans-serif"
size="18px"
weight="bold"
links="normal"
/>
<content
left="100px"
top="40px"
width="500px"
/>
</style>
Values are given as CSS (the various formats
are allowed). If you don't know about CSS, use the formats
like in the sample.
The color value RGB means Red Green Blue,
the colors are mixed additive, meaning all to 100% is white, all to zero
is black. (You can use WebCol in the tool folder to help finding a
color scheme.)
The measurement px is the size in number of pixels.
For the background, you can use the image attribute containing the file path to an image that will be shown layered behind all content. The path has to be given as "url('filepath')" where filepath is your path. By default, the image won't repeat. To use wallpaper-like repetition effects you can assign the values repeat, repeat-x and repeat-y (repetition in all directions, horizontal repetition and vertical repetition).
The font family
value starts with the font you want to have and lists alternatives if that
font is not avaliable on the client browser. Use single quotations if the font-name
contains spaces (example: "'arial black', arial, sans-serif").
Use links="normal" if you don't want to underline choices.
size="17px" (or another value than 17) to set the font-size.
Use weight="bold" to use the bold version of the font
The content is the area in which picture, text and choices are shown.
(If the text-lines are very long, they get harder to read, so you shouldn't use
the full scale 1024 pixel width, even if that would be possible on some screen
resolutions.)
User settings
If you omit the style section (or parts of it), the default browser settings will determine how to render content. For example, links will be displayed in typical link colors, the background in the typical background color (usually white background with black text), the text will fill the whole browser window, and so on.
Even if you set a style, a user can override your settings and force the user settings by checking accessibility options.
Classes
Style classes are used to format single chunks of text/ choices in special ways. You need to understand CSS properties if you want to use this optional feature.
You can define
classes at the end of the style section.
In the following sample, we define a comic-font and a white box, and
add them together to form a general speech-balloon, of which we
use two different ones to be applied later on:
<class name="comicFont"
style="font-size: 90%; font-family: 'comic sans ms', sans-serif"
/>
<class name="whiteBox"
style="background-color: white; color: black; padding: 4px"
/>
<class name="blackBorder"
style="border: 1px solid black"
/>
<class name="speechBalloon"
inherits="whiteBox blackBorder comicFont"
style="position: absolute; width: 200px; text-align: center"
/>
<class name="balloon1"
inherits="speechBalloon"
style="left: 500px; top: 200px"
/>
<class name="balloon2"
inherits="speechBalloon"
style="left: 200px; top: 100px"
/>
You define a class with a name, a style, and optional
multiple inheritance of other classes (seperated by a space).
The content of the style-attribute is CSS.
Class styles can now be applied to every text or choice by using the class attribute:
<text>There's a dragon, saying:</text>
<text class="monsterVoice">"Hello adventurer!"</text>
<text> What a scary voice.</text>
If you name classes used in the story after what they represent rather than how they look, you will have less trouble changing design. For example, if you want to color green everything character Frank says, class name "frankSpeaks" would be better than "green".
Predefined classes
Predefined classes start with "qml" (which is reserved for future use
and should not be used for user classes).
The following class names can be used without actually adding a "class"
attribute in QML:
Class name | Applies to |
---|---|
qmlChoice | choices (the list item) |
qmlLink | choice text (the link itself inside the list item) |
qmlInlineChoice | choice text inside of the text-flow (not a bottom list item) |
qmlImage | images |
qmlEmbed | embed |
qmlEmphasis | text emphasis |
qmlStrong | text tagged as "strong" |
qmlDisplay | text tagged as "display" |
Continue with QML Stations