Difference between revisions of "SHIP:TextModel"

From Serious Documentation
Jump to: navigation, search
(Created page with "Text selection and styling properties are common to a variety of {{Node|displayable}} nodes, including {{Node|box}} and {{Node|text}}. This set of common properties are calle...")
 
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
Text selection and styling properties are common to a variety of {{Node|displayable}} nodes, including {{Node|box}} and {{Node|text}}.
 
Text selection and styling properties are common to a variety of {{Node|displayable}} nodes, including {{Node|box}} and {{Node|text}}.
  
This set of common properties are called the [[SHIP:TextModel|Text Model]] properties, and include  {{Prop|displayable|textfont}}, {{Prop|displayable|textsize}}, {{Prop|displayable|color}} and more.
+
This common properties are called the [[SHIP:TextModel|Text Model]] properties, and include  {{Prop|textmodel|textfont}}, {{Prop|textmodel|textsize}}, {{Prop|textmodel|textcolor}} and more.
 
 
== Inheritance Model ==
 
 
 
When a piece of {{Node|text}} is rendered, each of the [[SHIP:TextModel|Text Model]] properties is determined by the following prioritized inheritance rules:
 
 
 
# Any property specification on the {{Node|layout}} {{Node|text}} node itself
 
# Any attached object with the property specified
 
# The nearest displayable parent node's determination of that property
 
  
 
== [[SHIP:TextModel|Text Model]] Property Summary ==
 
== [[SHIP:TextModel|Text Model]] Property Summary ==
Line 21: Line 13:
 
|-
 
|-
 
|{{:SHIP:Property:textmodel:textstyle}}
 
|{{:SHIP:Property:textmodel:textstyle}}
|-
 
|{{:SHIP:Property:textmodel:textdirection}}
 
 
|-
 
|-
 
|{{:SHIP:Property:textmodel:texthalign}}
 
|{{:SHIP:Property:textmodel:texthalign}}
Line 32: Line 22:
 
|{{:SHIP:Property:textmodel:textcolor}}
 
|{{:SHIP:Property:textmodel:textcolor}}
 
|-
 
|-
|}
+
|{{:SHIP:Property:textmodel:textspacing}}
</onlyinclude>
 
 
 
== Outer ==
 
 
 
The most obvious set of properties in the box model describes the outer dimensions and location of the container:
 
 
 
<onlyinclude>
 
{{PropTableStart|[[SHIP:BoxModel#Outer|Box Model Outer Properties]]}}
 
|{{:SHIP:Property:boxmodel:ot}}
 
 
|-
 
|-
|{{:SHIP:Property:boxmodel:ob}}
+
|{{:SHIP:Property:textmodel:textmultiline}}
 
|-
 
|-
|{{:SHIP:Property:boxmodel:oh}}
+
|{{:SHIP:Property:textmodel:textwrap}}
|-
 
|{{:SHIP:Property:boxmodel:ol}}
 
|-
 
|{{:SHIP:Property:boxmodel:or}}
 
|-
 
|{{:SHIP:Property:boxmodel:ow}}
 
 
|-
 
|-
 
|}
 
|}
 
</onlyinclude>
 
</onlyinclude>
  
== Alignment ==
+
== Font Selection ({{Prop|textmodel|textfont}}, {{Prop|textmodel|textsize}}, {{Prop|textmodel|textstyle}}) ==
  
The {{Prop|boxmodel|valign}} and {{Prop|boxmodel|halign}} properties can position a {{Node|box}} within its parent container very easily.  When not set, the outer properties govern the position of the box, but when set these override positioning set using the outer properties. 
+
== Alignment (<!--- Remove link until page exist {{Prop|textmodel|textdirection}}--->'''textdirection''', {{Prop|textmodel|texthalign}}, {{Prop|textmodel|textvalign}}) ==
  
<onlyinclude>
+
{| class="wikitable" style="margin: 1em auto 1em auto;"
{{PropTableStart|[[SHIP:BoxModel#Alignment|Box Model Vertical and Horizontal Alignment Properties]]}}
+
|[[Image:TextModelAlignmentOverview.png|500px|center|Text Model Alignment Overview]]
|{{:SHIP:Property:boxmodel:valign}}
+
|}
|-
 
|{{:SHIP:Property:boxmodel:halign}}
 
|-
 
|}</onlyinclude>
 
  
== Margins ==
+
== Colors ({{Prop|textmodel|textcolor}}, {{Prop|textmodel|textbgcolor}}) ==
  
Within the outer dimensions of the box model container, each of the four sides can have an optional and separate margin thickness.  When a value is unset, there is no margin on that edge.  The four margin properties are:
+
== Inheritance Model ==
  
<onlyinclude>
+
When a piece of {{Node|text}} is rendered, each of the [[SHIP:TextModel|Text Model]] properties is determined by the following prioritized inheritance rules:
{{PropTableStart|[[SHIP:BoxModel#Margins|Box Model Margin Properties]]}}
 
|{{:SHIP:Property:boxmodel:mt}}
 
|-
 
|{{:SHIP:Property:boxmodel:mb}}
 
|-
 
|{{:SHIP:Property:boxmodel:ml}}
 
|-
 
|{{:SHIP:Property:boxmodel:mr}}
 
|-
 
|}</onlyinclude>
 
  
== Borders ==
+
# Any property specification on the {{Node|layout}} {{Node|text}} node itself
 
+
# Any attached object with the property specified
Inside the margin, there is an optional border area.  The thickness, in pixels, of the border on each of the four sides is set independently, as is the optional color used to fill the border.  Therefore there are 4 pairs of border properties, with each pair being the thickness and color of the border.  The color, like other colors in SHIP, can be fully transparent if desired.
+
# The nearest displayable parent node's determination of that property
 
 
<onlyinclude>
 
{{PropTableStart|[[SHIP:BoxModel#Borders|Box Model Border Properties]]}}
 
|{{:SHIP:Property:boxmodel:bt}}
 
|-
 
|{{:SHIP:Property:boxmodel:bct}}
 
|-
 
|{{:SHIP:Property:boxmodel:bb}}
 
|-
 
|{{:SHIP:Property:boxmodel:bcb}}
 
|-
 
|{{:SHIP:Property:boxmodel:bl}}
 
|-
 
|{{:SHIP:Property:boxmodel:bcl}}
 
|-
 
|{{:SHIP:Property:boxmodel:br}}
 
|-
 
|{{:SHIP:Property:boxmodel:bcr}}
 
|-
 
|}</onlyinclude>
 
 
 
== Padding ==
 
 
 
Within the border of the box model container, each of the four sides can have an optional and separate padding thickness.  When a value is unset, there is no padding on that edge.  The four padding properties are:
 
 
 
<onlyinclude>
 
{{PropTableStart|[[SHIP:BoxModel#Padding|Box Model Padding Properties]]}}
 
|{{:SHIP:Property:boxmodel:pt}}
 
|-
 
|{{:SHIP:Property:boxmodel:pb}}
 
|-
 
|{{:SHIP:Property:boxmodel:pl}}
 
|-
 
|{{:SHIP:Property:boxmodel:pr}}
 
|-
 
|}</onlyinclude>
 
 
 
== Inner ==
 
 
 
The final rectangular area within a container extends to the inside of the padding.  This is called the "inner" area of a box model container and is calculated by taking the outer dimensions of the container and reducing it down by the margins, border, and padding.  Nodes within the container will be positioned and displayed relative to this inner area. 
 
 
 
 
 
These are read-only properties, and cannot be set in SHIPTide or at run-time in SHIPEngine.
 
 
 
<onlyinclude>
 
{{PropTableStart|[[SHIP:BoxModel#Inner|Box Model Inner Dimension Properties]]}}
 
|{{:SHIP:Property:boxmodel:it}}
 
|-
 
|{{:SHIP:Property:boxmodel:ib}}
 
|-
 
|{{:SHIP:Property:boxmodel:ih}}
 
|-
 
|{{:SHIP:Property:boxmodel:il}}
 
|-
 
|{{:SHIP:Property:boxmodel:ir}}
 
|-
 
|{{:SHIP:Property:boxmodel:iw}}
 
|-
 
|}</onlyinclude>
 
 
 
== Colors ==
 
 
 
The outer, margin, and inner areas of the {{Node|box}} can be each be filled with a flood color.  These areas are rendered in order, so any alpha blending will occur as expected.  The three relevant properties are:
 
 
 
<onlyinclude>
 
{{PropTableStart|[[SHIP:BoxModel#Colors|Box Model Background, Fill, Inner Color Properties]]}}
 
|{{:SHIP:Property:boxmodel:bgcolor}}
 
|-
 
|{{:SHIP:Property:boxmodel:fillcolor}}
 
|-
 
|{{:SHIP:Property:boxmodel:innercolor}}
 
|-
 
|}</onlyinclude>
 
 
 
== Rendering and Calculation Order ==
 
 
 
The order of the box rendering/calculation is as follows:
 
 
 
* The "outer" is established ({{Prop|boxmodel|ol}},{{Prop|boxmodel|or}},{{Prop|boxmodel|ow}},{{Prop|boxmodel|ot}},{{Prop|boxmodel|ob}},{{Prop|boxmodel|oh}})
 
* Background color is flood filled ({{Prop|boxmodel|bgcolor}})
 
* Margins are applied ({{Prop|boxmodel|ml}},{{Prop|boxmodel|mr}},{{Prop|boxmodel|mt}},{{Prop|boxmodel|mb}})
 
* Attached image {{Prop|box|object}} is rendered, centered in margins
 
* Borders are drawn ({{Prop|boxmodel|bl}},{{Prop|boxmodel|br}},{{Prop|boxmodel|bt}},{{Prop|boxmodel|bb}})
 
* Fill color is flood filled with the borders ({{Prop|boxmodel|fillcolor}})
 
* Padding is applied ({{Prop|boxmodel|pl}},{{Prop|boxmodel|pr}},{{Prop|boxmodel|pt}},{{Prop|boxmodel|pb}})
 
* Inner color is flood filled within the padding area ({{Prop|boxmodel|innercolor}})
 
* Contents of the {{Node|box}} drawn
 

Latest revision as of 11:26, 27 October 2016

Text selection and styling properties are common to a variety of displayable nodes, including box and text.

This common properties are called the Text Model properties, and include textfont, textsize, textcolor and more.

Text Model Property Summary

The following table summarizes the set of Text Model properties.

TextModel Property Summary
Property Data Type Description
textfont FontFamilyInfo Font family selector for displayable text.
textsize Dimension Pixel height selector for displayable text.
textstyle FONTSTYLE Style selector for displayable text.
texthalign HALIGN Horizontal alignment of text within its parent container's inner dimensions.
textvalign VALIGN Vertical alignment of text within its parent container's inner dimensions.
textbgcolor Color The background color of displayable text.
textcolor Color The color of displayable text.
textspacing Float A multiplier of the line spacing, with default unset value of 1.0f.
textmultiline Boolean Determines if a text line is permitted to overflow to the next line. The default (unset) is true.
textwrap Boolean Determines if a text line is permitted to automatically wrap to the following line if it will not fit on the current line. The default (unset) is true.


Font Selection (textfont, textsize, textstyle)

Alignment (textdirection, texthalign, textvalign)

Colors (textcolor, textbgcolor)

Inheritance Model

When a piece of text is rendered, each of the Text Model properties is determined by the following prioritized inheritance rules:

  1. Any property specification on the layout text node itself
  2. Any attached object with the property specified
  3. The nearest displayable parent node's determination of that property