Data type: style

Data type: style

Overview

A style specifies how a field should look, things like position, size, fonts, colors, etc.

Styles are part of the style triangle:

Description Looks Data
Game Stylesheet Set
Field Style Value

Positioning

A style specifies the position of a box for the content. To specify the horizontal location two of left, width and right must be specified.

For example:

 left:  10
 width: 20

Implies that right is 30 pixels.

Similarly:

 left: 10
 right: 30

Implies the width is 20.

The same holds for the vertical location and size; top, height and bottom.

Rotation

Rotating a box can be done with the angle property. The angle gives a counter clockwise rotation in degrees of the box. The box is rotated such that the corner for which the position is specified is at the correct position after rotating.

Here are some examples:

red box:
       width:  30
       height: 25
       left:   10
       top:    20
       angle:  30
green box:
       width:  25
       height: 30
       left:   10
       top:    80
       angle:  90
blue box:
       width:  30
       height: 25
       right:  90
       bottom: 30
       angle:  30
yellow box:
       width:  20
       height: 35
       right:  60
       bottom: 60
       angle:  180

Properties

Property Type Default Description
z index number 0 Stacking of this box, fields with a higher z index are placed on top of those with a lower index.
left scriptable real number Required Distance between left edge of the box and the left of the card in pixels.
width scriptable real number Required Width of the box in pixels.
right scriptable real number Required Distance between right edge of the box and the left of the card in pixels.
top scriptable real number Required Distance between top edge of the box and the top of the card in pixels.
height scriptable real number Required Height of the box in pixels.
bottom scriptable real number Required Distance between bottom edge of the box and the top of the card in pixels.
angle scriptable number 0 Rotation of this box, in degrees counter clockwise.
visible scriptable boolean true Is this field visible at all?
mask scriptable image none A mask to apply to the box, black areas in the mask become transparent, similar to set_mask.

The rest of the properties depend on the type of field this style is for.

Type Property Type Default Description
"text" font font Required Font to render the text.
symbol font symbol font Font to render symbols in the text (optional).
always symbol boolean false Should all text be rendered with symbols?
Text that is not supported by the symbol font is still rendered as normal text.
allow formating boolean true Is custom formating (bold, italic) allowed?
alignment scriptable alignment top left Alignment of the text.
direction direction "left to right" Direction in which the text flows. If set to "vertical" it is as if a line break is inserted after each character.
padding left scriptable real number 0 Padding between the text and the border of the box, in pixels.
padding right
padding top
padding bottom
padding left min scriptable real number Minimal padding around the field.
When the text is scaled down the padding is scaled as well, but it becomes no smaller than this.
padding right min
padding top min
padding bottom min
line height soft scriptable real number 1 Multiplier for the line height of 'soft' line breaks. These are breaks caused by wrapping around lines that are too long.
A line height of 0 means all lines are in the same position, 1 is normal behaviour, 2 skips a line, etc.
line height hard scriptable real number 1 Multiplier for the line height of 'hard' line breaks. These are breaks caused by the enter key.
line height line scriptable real number 1 Multiplier for the line height of 'soft' line breaks. These are breaks caused by "<line>\n</line>" tags.
line height soft max scriptable real number disabled When there is still vertical room in the text box, increase the line heights to at most these values to spread the text more evenly.
line height hard max
line height line max
paragraph height real number flexible The height of paragraphs. If specified, each paragraph is given this much space, and aligned inside that space as specified by alignment.
A paragraph break is any line break that is not soft (i.e. caused by word wrap or a <soft> break).
mask scriptable image none A mask that indicates where in the box text can be placed.
Text is never put in black areas of the box:

The same mask image is also used to determine the size and shape of the box. To include a certain pixel in the size/shape but not allow text to be placed there, it can be made dark gray (a value less than 128).
content width real number automatic When read from a script, gives the width of the current content in this box.
content height real number automatic When read from a script, gives the height of the current content in this box.
content lines number automatic When read from a script, gives the number of lines of the current content in this box.
"choice",
"multiple choice",
"boolean"
popup style "drop down" or "in place" "drop down" Where to place the drop down box for editing the value.
"drop down" places the box below the field, similar to normal combo boxes.
"in place" places the box at the mouse coordinates.
render style choice render style "text" How should the field be rendered?
combine combine "normal" How to combine the image with the background? Can be overridden using the set_combine function.
alignment alignment "stretch" Alignment of text and images in the box.
font font Font to use for rendering text (depending on render style)
image scriptable image Image to show (depending on render style).
The script will be called with input set to the value to determine an image for.
choice images map of images An alternative way to specify what image to show.
For each choice a separate image is specified.
content width real number automatic When read from a script, gives the width of the current choice image in this box.
This is only useful when the alignment is changed, otherwise it is always equal the box size itself.
content height real number automatic When read from a script, gives the height of the current choice image in this box.
"multiple choice" direction scriptable direction "left to right" Direction the items are laid out in, only when render style is list.
spacing scriptable real number 0 Spacing between the items.
"package choice"
font font Font to use for rendering text.
"color" radius real number 0 Radius of rounded corners for the box in pixels.
left width real number Draw only this many pixels from the side, creating a box with a hole in it, or a card border.
right width
top width
bottom width
combine combine "normal" How to combine the color with the background? Only applies when a mask is used.
"image" default scriptable image none A default image to use when the card has none.
"symbol" variations list of symbol variations Available variations of the symbol, a variation describes color and border size.
min aspect ratio real number 1 Bounds for the aspect ratio, width/height symbols can take. This can be used to make non-square symbols.
max aspect ratio real number 1
"info" font font Required Font to render the text.
alignment scriptable alignment top left Alignment of the text.
padding left real number 0 Padding between the text and the border of the box, in pixels.
padding right
padding top
padding bottom
background color opaque color rgb(255,255,255) Background color for the box, can be used to make it stand out.

Example