Text Layer
Text layers are the heart of most Component.Studio designs. They bring words, numbers, names, descriptions, icons, and dynamic content to your cards, labels, and designs. With sophisticated formatting options, style inheritance, inline icons, curved text capabilities, and seamless integration with your dataset variables, text layers transform static designs into dynamic, data-driven creations. Whether you need a simple title, complex formatted paragraphs, or text that curves along a circular path, text layers have you covered.
Inline Icons in Text
One of the most powerful features of text layers is the ability to embed icons and images directly within your text flow. This creates sophisticated layouts where icons sit naturally alongside words, scaling with the text and maintaining perfect alignment.
What Are Inline Icons?
Inline icons are images that appear within your text, flowing naturally with the words. Think of a heart symbol next to "Favorite," a sword icon before "Attack: 15," or a coin image alongside a price. The icons automatically size themselves relative to your text and align perfectly with the baseline.
Icons are referenced by name in your text using special syntax, and they pull from your game's gallery of images. This means you can have consistent iconography across all your cards without manually positioning each icon.
The Text Content
At its simplest, a text layer contains... text. But Component.Studio text is far more powerful than plain text.
| Property | Description |
|---|---|
| Text | The actual content to display. Can include template variables, inline markup, and icon references. |
{{variableName}} to insert dataset values, {{calculation * 5}} for computed values, and game variables for content that changes per card. This is what makes your designs truly data-driven.
Rich Text Markup
Within your text, you can use inline markup for rich formatting:
<bold>bold text</bold>- Makes text bold<icon/>- Inserts an inline icon (the icon name comes from your image gallery)
Example: Attack: {{damage}} <sword/> might render as "Attack: 15" with a sword icon at the end.
Note that you need to define tags like <bold></bold> via the styles system.
Position and Size
Text layers have standard positioning properties plus two unique properties that control how the layer's "actual" size is calculated when text doesn't fill the entire defined space.
| Property | Description |
|---|---|
| X Position | Horizontal position in pixels from the origin point |
| Y Position | Vertical position in pixels from the origin point |
| Width | Maximum width for the text in pixels. Text will wrap within this width. |
| Height | Maximum height for the text area in pixels |
| Width Boundary | Whether the layer's width is the "Defined Width" or "Width Actually Used" by the rendered text. Affects positioning of other layers and effects. |
| Height Boundary | Whether the layer's height is the "Defined Height" or "Height Actually Used" by the rendered text. Affects positioning of other layers and effects. |
| Rotation | Rotation angle in degrees (0-360) |
| Anchor | The reference point for positioning (top-left, center, etc.) |
Understanding Width and Height Boundaries
These unique properties solve a common problem: what happens when your text is shorter than the space you've given it?
Scenario: You create a 400px wide text layer, but your text "Hello" only needs 80px.
- Width Boundary = "Defined Width": The layer is considered 400px wide for positioning, effects, and layer outlines, even though text only uses 80px. Other layers positioned relative to this one will use 400px. Effects like drop shadow encompass 400px.
- Width Boundary = "Width Actually Used": The layer is considered 80px wide. Effects and positioning calculations use the actual text width. This creates tighter, more precise layouts.
When to use each:
- Use "Defined" when you want consistent, predictable layouts regardless of text length
- Use "Actually Used" when you want to have other layers to be position directly under or next to the text without a big gap.
Text Formatting
Text formatting controls how your text looks and flows. Component.Studio offers both style-based formatting (where styles define appearance) and direct overrides (where you set specific values for individual layers).
Core Formatting Properties
| Property | Range/Options | Description |
|---|---|---|
| Styles | Comma-separated style names | References to predefined styles (e.g., "title, bold"). Styles set default font, size, color, etc. |
| Font Name | Font name or -inherit- | The typeface to use. Set to "-inherit-" to use the font from styles, or specify a font name to override. |
| Font Size | 1-500px or -inherit- | Size of the text in pixels. Use "-inherit-" to get size from styles. |
| Color | Hex color or -inherit- | Text color. Use "-inherit-" to use the color from styles. |
| Font Variant | normal, small-caps, all-small-caps, etc. | Typography variants like small capitals, petite caps, or titling caps |
Spacing and Alignment
| Property | Range | Description |
|---|---|---|
| Horizontal Alignment | left, center, right, justify | How text aligns within the layer width. Justify stretches text to fill the full width. |
| Vertical Alignment | top, middle, bottom | How text positions vertically within the layer height |
| Letter Spacing | Pixels or -inherit- | Extra space between letters. Positive values spread letters apart, negative values squeeze them together. |
| Word Spacing | Pixels or -inherit- | Extra space between words |
| Line Spacing | -50 to 200px | Extra vertical space between lines when text wraps. Positive increases spacing, negative tightens it. |
| Paragraph Spacing | -100 to 200px | Additional space between paragraphs (text separated by line breaks) |
Spacing in Practice
- Tight Headlines: Line Spacing: -5, Letter Spacing: -2 creates condensed, impactful titles
- Airy Body Text: Line Spacing: 8, Paragraph Spacing: 20 creates readable, spacious paragraphs
- Tracked Titles: Letter Spacing: 10 creates elegant, spread-out display typography
Smart Sizing
| Property | Description |
|---|---|
| Fit To Size | When enabled, automatically reduces font size if text is too large to fit within the defined width and height. The text shrinks until it fits, maintaining readability. |
Inline Icons
| Property | Range | Description |
|---|---|---|
| Icon Scale | Percentage or -inherit- | How large inline icons appear relative to the text. 100% means icons are same height as text, 150% makes them larger, 50% makes them smaller. |
Icon Scale Examples
- 50-80%: Small icons that sit inline without overwhelming the text, like currency symbols or small decorations
- 100%: Icons that match text height, creating balanced inline graphics
- 120-150%: Emphasized icons that draw attention, like important status indicators or featured symbols
Curved Text
One of Component.Studio's most distinctive features is the ability to curve text along an elliptical path. This creates circular badges, curved labels around orbs, and sophisticated typographic effects.
| Property | Description |
|---|---|
| Enable Curve | Turns on curved text rendering. Text will follow an elliptical path based on the layer's width and height. |
| Invert Curve | Flips the curve direction. When false, text curves outward (like text around the outside of a circle). When true, text curves inward (like text inside a circle looking toward the center). |
| Start Text At | Starting position in degrees (-360 to 360). 0 = top, 90 = right, 180 = bottom, -90/270 = left. Controls where the text begins on the curved path. |
Creating Circular Badge Text
To create text that curves around a circular badge:
- Create a text layer with equal width and height (e.g., 200x200)
- Enable Curve
- Set Start Text At to -90 (starts at left, curves across the top)
- Use Center horizontal alignment to center the text on the arc
- Adjust Invert Curve to control whether text reads from outside or inside the circle
Curved Text Alignment
Horizontal alignment works on curved text:
- Left: Text starts at the Start Text At angle and curves from there
- Center: Text centers itself on the arc, with Start Text At defining the center point
- Right: Text ends at the Start Text At angle, curving backward
Visual Effects
Text layers support the complete Component.Studio effects pipeline, allowing you to add depth, emphasis, and visual polish.
| Effect | Purpose |
|---|---|
| Drop Shadow | Cast a shadow beneath the text for depth and improved readability over complex backgrounds. Control distance, angle, blur, and color. |
| Color Overlay | Tint the entire text with a semi-transparent color. Useful for quick color theming or creating duotone effects. |
| Blur | Apply gaussian blur to soften the text. Creates ghosted effects or background text. |
| Glow | Add a soft outer glow around the text. Perfect for neon effects, magical text, or making white text readable on light backgrounds. |
| Outline | Add a sharp stroke around each letter. Classic effect for readability - white text with black outline reads on any background. |
| Color Adjust | Fine-tune brightness, contrast, saturation, and other color properties of the text and any inline icons. |
| Blend Mode | Control how text composites with layers beneath it. Options include normal, multiply, screen, overlay, and many more for creative effects. |
Readability Recipe
For maximum text readability over photos or complex backgrounds:
- White text color
- Enable Outline effect
- Outline Color: #000000 (black)
- Outline Width: 2-4px
- Optional: Add subtle Drop Shadow (distance: 2, blur: 4, black)
This creates the classic "black outline on white text" look that reads clearly on any background.
Working with Text Layers
Common Use Cases
Card Titles
Create a large, bold title using a display font. Set Width Boundary to "Width Actually Used" so drop shadows hug the text rather than extending across the full layer width. Use Letter Spacing to adjust visual weight and style.
Dynamic Stat Labels
Combine text with inline icons: {{row.strength}} <sword/>. The sword icon automatically scales with the text size and stays perfectly aligned. Use Icon Scale to make the icons slightly larger (110-120%) to emphasize them.
Multi-Paragraph Descriptions
Use Line Spacing and Paragraph Spacing to create readable blocks of text. Enable Fit To Size if description lengths vary dramatically, or set a fixed size and let longer descriptions wrap naturally. Use justified alignment for a formal, book-like appearance.
Circular Badge Labels
Create text that curves around a circular badge. Use equal width/height for perfect circles, enable Curve, and adjust Start Text At to control where text begins. Combine with center alignment to balance text symmetrically around the badge.
Template Variables and Dynamic Content
Text layers are where Component.Studio's data-driven design truly shines. Template variables let you create designs that adapt to your dataset.
Basic Variables
{{row.name}}- Inserts the "name" field from your current dataset row{{row.attack + row.defense}}- Performs calculations with dataset values{{row.description}}- Pulls text content from your data
Conditional Text
Use template logic for conditional display:
{%- if rare -%} RARE {%- endif -%}- Shows "RARE" only when the rare field is true{%- if attack > 5 -%} Strong {%- else -%} Weak {%- endif -%}- Different text based on conditions
Performance and Best Practices
- Use styles for consistency: Define common text treatments as styles rather than setting properties individually on every layer
- Choose boundary modes wisely: "Defined Width/Height" for consistent layouts, "Actually Used" for tight effects
- Limit Fit To Size usage: It's powerful but can cause visual inconsistency across cards with varying text lengths
- Test with real data: Template variables might produce different lengths, fonts might have different metrics - always test with actual dataset values
- Consider wrapping: Wide layers with left alignment work well for wrapping text; narrow layers create more line breaks
- Layer order matters for effects: Drop shadows and glows render relative to background layers, so layer stacking affects visual results
Font Management
Component.Studio uses fonts that you've uploaded to your game. Web fonts and system fonts are available.
Troubleshooting
My text isn't showing up
- Check that the Text property isn't empty
- Verify the layer's render property is true
- Ensure color isn't set to the same color as your background
- Check that opacity isn't set to 0
- If using template variables, ensure they're resolving to actual values (not empty strings)
My font looks wrong or is using a fallback font
- Verify font name matches exactly (case-sensitive)
- Check that the font file is uploaded to your game
- Try using "-inherit-" and setting the font in a style instead
- Some font files may have family names that differ from filenames - check font properties
Fit To Size isn't working as expected
- Fit To Size only shrinks text, never enlarges it
- It requires both width and height constraints to work
- Very long text may shrink to unreadable sizes - consider editing your source data
- Inline icons can affect fitting calculations - try without icons first
My inline icons aren't appearing
- Check that icon syntax is correct:
<iconName/> - Verify the icon name matches an image in your gallery exactly
- Ensure Icon Scale isn't set to 0
- Check that the gallery image referenced isn't missing or deleted
Curved text looks distorted or wrong
- Very short or very long text can look odd on curves - adjust Start Text At or text length
- Extreme ellipses (very different width vs height) can create stretched text - try more balanced proportions
- Try toggling Invert Curve - sometimes the opposite direction looks better
- Adjust horizontal alignment - center often works best for curved text
- Make sure width and height are large enough - curved text needs space to flow naturally
My spacing looks inconsistent
- Check whether spacing values are set directly or using "-inherit-" from styles
- Different fonts have different metrics - line spacing that works for one font may not work for another
- Paragraph spacing only appears between paragraphs (separated by line breaks), not between wrapped lines
- Letter spacing affects justification - very tight or loose letter spacing can make justified text look uneven
Text is being cut off
- Check that Width and Height are large enough for your text
- If Hide Overflow is enabled, text outside the bounds won't render - disable it or increase layer size
- With curved text, ensure the ellipse is large enough for the text to curve around
- Effects like Outline and Glow extend beyond text bounds - increase layer size to accommodate them
Text layers are the voice of your designs, turning data into messages, numbers into stories, and templates into unique cards. Master styles for consistency, embrace template variables for power, experiment with curved text for flair, and use inline icons for visual richness. With text layers, every card speaks clearly and beautifully!