Options System

Options control appearance and behavior. They cascade from global to specific scope.

Option Syntax

Options use [key=value] syntax:

[color=red]||B313

Multiple options are separated by semicolons:

[color=red;stroke-width=0.8]||B313

Multiple options

Input:

[color=red;stroke-width=0.8]||B313

Boolean options use a bare key (no =value). The option is enabled when present and disabled when absent:

[grid]||B313

Boolean option

Input:

[grid]||B313

Scope Levels

Options can be applied at four levels, from broadest to most specific:

Scope	Syntax	Separator	Priority
Global	[opts]||	||	Lowest
Word	[opts]|	|	↓
Character	[opts]	(none)	↓
Part	[opts]>	>	Highest

Global Scope

Applies to the entire composition:

[color=blue]||B313/B1103//B431

Global: all blue

Input:

[color=blue]||B313/B1103//B431

Word Scope

Applies to a specific word:

B313//[color=red]|B431//B1103

Word scope: middle word red

Input:

B313//[color=red]|B431//B1103

Character Scope

Applies to a specific character within a word:

B313/[color=red]B1103

Character scope: second char red

Input:

B313/[color=red]B1103

Part Scope

Applies to a specific part within a character:

B431;[color=red]>B81

Part scope: indicator red

Input:

B431;[color=red]>B81

Cascading Rules

More specific options override broader ones:

1. Part options override everything
2. Character options override word and global
3. Word options override global
4. Global options are the default

Cascading Example

[color=red]||[color=blue]|[color=green][color=orange]>H;H:10,0/H//H

Four hearts with cascading colors

Input:

[color=red]||[color=blue]|[color=green][color=orange]>H;H:10,0/H//H

Breaking it down:

1. Orange heart (left) - Part option [color=orange]>H wins
2. Green heart - Character option [color=green] applies to H:10,0
3. Blue heart - Word option [color=blue]| applies to /H
4. Red heart (right) - Global option [color=red]|| applies to //H

Combining Scopes

You can set defaults globally and override for specific elements:

Gray default, red emphasis

Input:

[color=gray;stroke-width=0.5]||B313//[color=red;stroke-width=0.8]|B431//B1103

This pattern is useful for:

• Highlighting specific words
• Creating visual hierarchy
• Emphasizing important elements

Multi-Level Example

Multiple scope levels

Input:

[color=#666]||[color=#333]|B313;[color=#000]>B81/B1103//B431

In this example:

• Global default: #666 (medium gray)
• First word: #333 (darker gray) via word option
• Indicator: #000 (black) via part option
• Second character in first word: inherits word option (#333)
• Second word: inherits global option (#666)

Which Options Support Scoping?

Built-in visual options can be applied at any scope:

Option	Global	Word	Character	Part
color	✓	✓	✓	✓
stroke-width	✓	✓	✓	✓

SVG pass-through attributes (like fill, opacity, stroke-dasharray, etc.) also work at any scope.

Some options only make sense at global scope:

Option	Notes
word-space	Global only
char-space	Global only
grid	Global only
background	Global only
background-top	Global only
background-mid	Global only
background-bottom	Global only
svg-height	Global only
margin	Global only
crop	Global only

Practical Patterns

Emphasis

Emphasize one word

Input:

[color=gray]||B313/B1103//[color=#dc2626]|B431//B4

Indicator Styling

Styled indicator

Input:

B431;[color=blue;stroke-width=0.3]>B81

Word-by-Word Colors

Different color per word

Input:

[color=#dc2626]|B313//[color=#16a34a]|B1103//[color=#2563eb]|B431

Default with Exceptions

Dark blue default, red exception

Input:

[color=#1e3a5f]||B313/[color=#dc2626]B1103//B431//B4

Setting Options from JavaScript

For setting options programmatically (app-wide defaults and enforced overrides), see Programmatic Options.