QML - Create Your Own Adventure

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