Data type: style

--Overview--

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

Styles are part of the [[file:style triangle]]:
| Description		Looks			Data
| [[type:Game]]		[[type:Stylesheet]]	[[type:Set]]
| [[type:Field]]	'''Style'''		[[type:Value]]

--Positioning--

<img src="style-positioning.png" alt="" style="float:right;border:1px solid #ccc;"/>
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:

|<img src="style-angle-examples.png" alt=""/>
	>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@		[[type:int]]				@0@		Stacking of this box, fields with a higher @z index@ are placed on top of those with a lower index.
| @tab index@		[[type:int]]				@0@		Index for moving through the fields with the tab key, fields with a lower tab index come first. Otherwise the order is from top to bottom and then left to right.
| @left@		[[type:scriptable]] [[type:double]]	''Required''	Distance between left edge of the box and the left of the card in pixels.
| @width@		[[type:scriptable]] [[type:double]]	''Required''	Width of the box in pixels.
| @right@		[[type:scriptable]] [[type:double]]	''Required''	Distance between right edge of the box and the ''left'' of the card in pixels.
| @top@			[[type:scriptable]] [[type:double]]	''Required''	Distance between top edge of the box and the top of the card in pixels.
| @height@		[[type:scriptable]] [[type:double]]	''Required''	Height of the box in pixels.
| @bottom@		[[type:scriptable]] [[type:double]]	''Required''	Distance between bottom edge of the box and the ''top'' of the card in pixels.
| @angle@		[[type:scriptable]] [[type:int]]	@0@		Rotation of this box, in degrees counter clockwise.
| @visible@		[[type:scriptable]] [[type:boolean]]	@true@		Is this field visible at all?
| @mask@		[[type:image|scriptable image]]		''none''	A mask to apply to the box, black areas in the mask become transparent, similar to [[fun:set_mask]].

The rest of the properties depend on the type of [[type:field]] this style is for.
! Type		Property		Type			Default		Description
| @"text"@	@font@			[[type:font]]		''Required'' 	Font to render the text.
| ^^^		@symbol font@		[[type:symbol font]]	 		Font to render symbols in the text (optional).
| ^^^		@always symbol@		[[type:boolean]]	@false@		Should all text be rendered with symbols?<br/>
		 			 			 		Text that is not supported by the symbol font is still rendered as normal text.
| ^^^		@allow formating@	[[type:boolean]]	@true@		Is custom formating (bold, italic) allowed?
| ^^^		@alignment@		[[type:scriptable]] [[type:alignment]]	@top left@	Alignment of the text.
| ^^^		@direction@		[[type: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@		[[type:scriptable]] [[type:double]]		@0@		Padding between the text and the border of the box, in pixels.
| ^^^		@padding right@		^^^			^^^		^^^
| ^^^		@padding top@		^^^			^^^		^^^
| ^^^		@padding bottom@	^^^			^^^		^^^
| ^^^		@padding left min@	[[type:scriptable]] [[type:double]]		&infin;		Minimal padding around the field.<br/> 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@	[[type:scriptable]] [[type:double]]		@1@		Multiplier for the line height of 'soft' line breaks. These are breaks caused by wrapping around lines that are too long.<br/>
		 			 			 		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@	[[type:scriptable]] [[type:double]]		@1@		Multiplier for the line height of 'hard' line breaks. These are breaks caused by the enter key.
| ^^^		@line height line@	[[type:scriptable]] [[type:double]]		@1@		Multiplier for the line height of 'soft' line breaks. These are breaks caused by @"<line>\n</line>"@ tags.
| ^^^		@line height soft max@	[[type:scriptable]] [[type:double]]		''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@	[[type:double]]		''flexible''	The height of paragraphs. If specified, each paragraph is given this much space, and aligned inside that space as specified by @alignment@.<br/>
		 			 			 		A paragraph break is any line break that is not soft (i.e. caused by word wrap or a @<soft>@ break).
| ^^^		@mask@			[[type:image|scriptable image]]	''none''	A mask that indicates where in the box text can be placed.<br/>
		 			 			 		Text is never put in black areas of the box:<br/>
		 			 			 		<img src="style-text-mask.png" alt=""/><br/>
		 			 			 		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).
| ^^^		@layout@		[[type:text layout]]		''automatic''	When read from a script, gives information on the layout of text in this box.
| ^^^		@content width@		[[type:double]]		''automatic''	When read from a script, gives the width of the current content in this box. Equivalent to @layout.width@
| ^^^		@content height@	[[type:double]]		''automatic''	When read from a script, gives the height of the current content in this box. Equivalent to @layout.height@
| ^^^		@content lines@		[[type:int]]		''automatic''	When read from a script, gives the number of lines of the current content in this box. Equivalent to @length(layout.lines)@
	
!	<<<	<<<	<<<	<<<
| @"choice"@,<br/>@"multiple choice"@,<br/>@"boolean"@
		@popup style@	@"drop down"@ or @"in place"@		@"drop down"@	Where to place the drop down box for editing the value.<br/>
		 		 					 		@"drop down"@ places the box below the field, similar to normal combo boxes.<br/>
		 		 					 		@"in place"@ places the box at the mouse coordinates.
| ^^^		@render style@	[[type:choice render style]]		@"text"@	How should the field be rendered?
| ^^^		@combine@	[[type:combine]]			@"normal"@	How to combine the image with the background? Can be overridden using the [[fun:set_combine]] function.
| ^^^		@alignment@	[[type:alignment]]			@"stretch"@	Alignment of text and images in the box.
| ^^^		@font@		[[type:font]]				 		Font to use for rendering text (depending on @render style@)
| ^^^		@image@		[[type:image|scriptable image]]		 		Image to show (depending on @render style@).<br/>
		 		 					 		The script will be called with @input@ set to the value to determine an image for.
| ^^^		@choice images@	[[type:map]] of [[type:image]]s		 		An alternative way to specify what image to show.<br/>
		 		 					 		For each [[type:choice]] a separate image is specified.
| ^^^		@content width@		[[type:double]]			''automatic''	When read from a script, gives the width of the current choice image in this box. <br/>
		 			 				 		This is only useful when the alignment is changed, otherwise it is always equal the box size itself.
| ^^^		@content height@	[[type:double]]			''automatic''	When read from a script, gives the height of the current choice image in this box.
| @"multiple choice"@
		@direction@	[[type:scriptable]] [[type:direction]]	@"left to right"@	Direction the items are laid out in, only when @render style@ is @list@.
| ^^^		@spacing@	[[type:scriptable]] [[type:double]]	@0@			Spacing between the items.
	
!	<<<	<<<	<<<	<<<
| @"package choice"@
| ^^^		@font@		[[type:font]]				 		Font to use for rendering text.
	
!	<<<	<<<	<<<	<<<
| @"color"@	@radius@	[[type:scriptable]] [[type:double]]		@0@	Radius of rounded corners for the box in pixels.
| ^^^		@left width@	[[type:scriptable]] [[type:double]]		&infin;	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@	[[type:combine]]		@"normal"@	How to combine the color with the background? Only applies when a mask is used.
	
!	<<<	<<<	<<<	<<<
| @"image"@	@default@	[[type:image|scriptable image]]		''none''	A default image to use when the card has none.
	
!	<<<	<<<	<<<	<<<
| @"symbol"@	@variations@	[[type:list]] of [[type:symbol variation]]s	 	Available variations of the symbol, a variation describes color and border size.
| ^^^		@min aspect ratio@	[[type:double]]		@1@		Bounds for the aspect ratio, @width/height@ symbols can take. This can be used to make non-square symbols.
| ^^^		@max aspect ratio@	[[type:double]]		@1@		^^^
	
!	<<<	<<<	<<<	<<<
| @"info"@	@font@			[[type:font]]		''Required'' 	Font to render the text.
| ^^^		@alignment@		[[type:scriptable]] [[type:alignment]]	@top left@	Alignment of the text.
| ^^^		@padding left@		[[type:double]]		@0@		Padding between the text and the border of the box, in pixels.
| ^^^		@padding right@		^^^			^^^		^^^
| ^^^		@padding top@		^^^			^^^		^^^
| ^^^		@padding bottom@	^^^			^^^		^^^
| ^^^		@background color@	opaque [[type:color]]	@rgb(255,255,255)@	Background color for the box, can be used to make it stand out.

--Example--

