Style Properties
Styles in Component.Studio control the appearance of text. Each style has numerous properties that can be customized. This page explains all available properties in detail.
About Inheritance: Most properties support the special value
-inherit- which means "use the value from the parent style (if any) or the default value." When a property is set to -inherit-, it won't override values from styles listed in the "Inherit From" field.
Font Properties
Control the basic appearance and typography of your text.
| Property | Description | Example | Default |
|---|---|---|---|
| Font Name | The name of a font family. The font must be in your font palette to take effect. | New Tegomin | sans-serif |
| Font Size Based On | Whether font size is measured in pixels (absolute) or percentage (relative to parent style). | pixels percentage |
pixels |
| Font Size | The size of the font. Units depend on "Font Size Based On" setting (pixels or percentage). | 33 120 |
42 |
| Font Scale Width | Horizontally stretches or compresses the font. Percentage where 100 is normal, 50 is half width, 200 is double width. | 50 150 |
100 |
| Font Scale Height | Vertically stretches or compresses the font. Percentage where 100 is normal, 50 is half height, 200 is double height. | 150 80 |
100 |
| Font Variant | Applies font variant styling. small-caps displays lowercase letters as smaller uppercase letters. |
normal small-caps |
normal |
| Text Transform | Transforms the text case. uppercase for ALL CAPS, lowercase for all lowercase, capitalize for Each Word Capitalized. |
uppercase capitalize |
none |
| Color | The color of the text. Accepts hex color codes. | #000080 #FF5500 |
#000000 |
| Highlight Color | Background color behind the text, similar to a highlighter. Use transparent for no highlight. |
#FFFF00 transparent |
transparent |
Spacing Properties
Control spacing between letters, words, and lines.
| Property | Description | Example | Default |
|---|---|---|---|
| Letter Spacing | Spacing between individual characters in pixels. Positive values spread letters apart, negative values bring them closer. | 5 -2 |
normal |
| Word Spacing | Spacing between words in pixels. Positive values increase space, negative values decrease space. | 10 -5 |
normal |
Text Decoration
Add underlines, overlines, and strike-through effects to text.
| Property | Description | Example | Default |
|---|---|---|---|
| Text Decoration Line | Type of line decoration. Options: none, underline, overline, line-through, underline overline. |
underline line-through |
none |
| Text Decoration Color | Color of the decoration line. Must also set Text Decoration Line to a value other than none. |
#FF0000 #00FF00 |
#000000 |
| Text Decoration Thickness | Thickness of the decoration line in pixels. | 2 5 |
1 |
| Underline Offset | Vertical position adjustment for underlines in pixels. Positive moves down, negative moves up. | 3 -2 |
0 |
| Overline Offset | Vertical position adjustment for overlines in pixels. Positive moves down, negative moves up. | -3 2 |
0 |
Text Effects
Add visual effects like shadows, glows, and outlines to make text stand out.
| Property | Description | Example | Default |
|---|---|---|---|
| Text Effect Preset | Preset effect to apply. Options: none, shadow, glow, outline, outline-shadow. Controls which effect properties are active. |
shadow outline |
none |
Shadow Effect Properties
These properties only take effect when Text Effect Preset is set to shadow or outline-shadow.
| Property | Description | Example | Default |
|---|---|---|---|
| Text Shadow Color | Color of the drop shadow. | #000000 #FF0000 |
#000000 |
| Text Shadow Angle | Direction the shadow is cast, in degrees. 0° is right, 90° is down, 180° is left, 270° is up. | 45 135 |
45 |
| Text Shadow Distance | How far the shadow is offset from the text, in pixels. | 5 10 |
5 |
| Text Shadow Blur | Blur radius of the shadow in pixels. Higher values create softer, more spread shadows. | 3 10 |
3 |
| Text Shadow Opacity | Transparency of the shadow, from 0 (invisible) to 100 (fully opaque). | 50 100 |
80 |
Outline Effect Properties
These properties only take effect when Text Effect Preset is set to outline or outline-shadow.
| Property | Description | Example | Default |
|---|---|---|---|
| Text Outline Color | Color of the stroke/outline around the text. | #FFFFFF #000000 |
#000000 |
| Text Outline Thickness | Width of the outline stroke in pixels. | 2 5 |
2 |
Glow Effect Properties
These properties only take effect when Text Effect Preset is set to glow.
| Property | Description | Example | Default |
|---|---|---|---|
| Text Glow Color | Color of the glow effect around the text. | #FFFFFF #00FFFF |
#FFFFFF |
| Text Glow Size | Radius of the glow effect in pixels. | 10 20 |
10 |
Layout & Alignment
Control how text aligns and behaves within its container.
| Property | Description | Example | Default |
|---|---|---|---|
| Vertical Align | How styled text aligns with adjacent text. Options: baseline (align to text baseline), top, middle, bottom. |
baseline middle |
baseline |
| White Space | How whitespace and line breaks are handled. normal collapses spaces, pre keeps all spaces and newlines, pre-line keeps newlines but collapses spaces. |
normal pre |
normal |
Advanced Layout Properties
Fine-tune rendering and spacing for better text appearance.
| Property | Description | Example | Default |
|---|---|---|---|
| Padding | Extra space around text in pixels. Useful when fonts don't report their dimensions accurately, especially decorative fonts with large flourishes. | 10 20 |
0 |
| Top Trim | Adjusts line height by trimming space from the top in pixels. Positive values reduce line height, negative values increase it. Useful for fine-tuning vertical text spacing. | 5 -10 |
0 |
| Icon Scale | Scale of inline icons as a percentage. 100 is normal size, 50 is half size, 200 is double size. | 80 150 |
100 |
Style Inheritance
Create sophisticated styling by building upon existing styles.
| Property | Description | Example | Default |
|---|---|---|---|
| Inherit From | Comma-separated list of other style names to inherit properties from. Styles are applied left-to-right, with later styles overriding earlier ones. Only non--inherit- properties from parent styles are applied. Example: If you have styles named "red" and "big", you can create a new style with Inherit From: red, big to combine both styles. Properties set in the current style override inherited values. See style inheritance documentation for more details. |
red, big header, bold |
(empty) |
Using Styles in Templates
All style properties support template variables. You can use template expressions to make styles dynamic:
- Font Size:
{{ game.vars.baseFontSize }} - Color:
{{ dataset.vars.textColor }} - Text Shadow Distance:
{{ row.depth * 2 }}
This allows you to create styles that adapt based on game variables, dataset data, or row values.
Tips & Best Practices
- Use inheritance wisely: Create base styles with common properties, then inherit and override specific properties in child styles.
- Name styles clearly: Use descriptive names like "header-red-large" instead of "style1".
- Mind your shadows: High shadow blur with high opacity on large text can impact performance.
- Use padding for problematic fonts: Some decorative fonts extend beyond their reported bounds. Add padding to prevent clipping.