|
|
| Line 11: |
Line 11: |
| | == Introduction == | | == Introduction == |
| | | | |
| − | This component renders text. | + | This component displays text inside of a UIX canvas. It also supports [[Text Formatting|text formatting]]. |
| | | | |
| | <!--T:3--> | | <!--T:3--> |
| Line 42: |
Line 42: |
| | | | |
| | <!--T:4--> | | <!--T:4--> |
| − | == Behavior ==
| |
| − |
| |
| − | === Rich text ===
| |
| − |
| |
| − | The rich text markup system for styling text is inspired by HTML but isn't intended to be strictly compatible with standard HTML. The basic idea is that a section of text can be enclosed inside a pair of matching tags. For example, the <tt><nowiki><b></nowiki></tt> tag applies bold style: <tt><nowiki>Are we <b>not</b> men?</nowiki></tt> This would result in: Are we <b>not</b> men?
| |
| − |
| |
| − | As the example shows, the tags are just pieces of text inside the angle brackets <tt><</tt> and <tt>></tt>.
| |
| − |
| |
| − | Place the opening tag at the beginning of the section. The text inside the tag denotes its name (which in the example is just <tt>b</tt>). Place another tag at the end of the section. This is the closing tag. It has the same name as the opening tag, but the name is prefixed with a slash <tt>/</tt> character. Every opening tag must have a corresponding closing tag. If you don't close an opening tag, it's okay: the style continues to the end of the text.
| |
| − |
| |
| − | The tags are not displayed to the user directly but are interpreted as instructions for styling the text they enclose.
| |
| − |
| |
| − | ==== More than one style ====
| |
| − | It is possible to apply more than one style to a section of text by "nesting" one element inside another. For example, the <tt><nowiki><i></nowiki></tt> tag applies italic style, so we can combine this with bold style: <tt><nowiki>We are <b><i>Devo</i></b>.</nowiki></tt> This would result in: We are <b><i>Devo</i></b>.
| |
| − |
| |
| − | Note the ordering of the closing tags, which is in reverse to that of the opening tags. The reason for this is perhaps clearer when you consider that the inner tags need not span the whole text of the outermost element. For example: <tt><nowiki>We <b>are <i>Devo</i></b>.</nowiki></tt>: We <b>are <i>Devo</i></b>.
| |
| − |
| |
| − | ==== Parameters ====
| |
| − | Some tags have a simple all-or-nothing effect on the text but others might allow for variations. For example, the color tag needs to know which color to apply. Information like this is added to tags by the use of parameters. For example: <tt><nowiki>We are <color=green>Devo</color>.<nowiki>.</tt>
| |
| − |
| |
| − | Note that the ending tag doesn't include the parameter value. Optionally, the parameter value can be surrounded by quotation marks but this isn't required.
| |
| − |
| |
| − | Tag parameters cannot include blank spaces. For example, this: <tt><nowiki>We are <color =green>Devo</color>.<nowiki></tt> does not work because of the space before the = character.
| |
| − |
| |
| − | ==== Supported styles ====
| |
| − |
| |
| − | {| class="wikitable" style="font-size:10pt;"
| |
| − | ! style="text-align:left;"| Tag
| |
| − | ! Effect
| |
| − | |-
| |
| − | |<tt>b</tt>
| |
| − | |Renders the text in boldface.
| |
| − | |-
| |
| − | |<tt>i</tt>
| |
| − | |Renders the text in italics.
| |
| − | |-
| |
| − | |<tt>u</tt>
| |
| − | |Renders the text with underline. Underline draws the line slightly below the baseline. That vertical offset is defined by the font asset.
| |
| − | |-
| |
| − | |<tt>s</tt>
| |
| − | |Renders the text with a strikethrough. Strikethrough places the line slightly above the vertical offset which is defined by the font asset baseline.
| |
| − | |-
| |
| − | |<tt>sup</tt>
| |
| − | |Renders the text as superscript.
| |
| − | |-
| |
| − | |<tt>sub</tt>
| |
| − | |Renders the text as subscript.
| |
| − | |-
| |
| − | |<tt>color</tt>
| |
| − | |Sets the color of the text according to the parameter value. The color can be specified in the traditional HTML format: <tt>#rrggbbaa</tt> where the letters correspond to pairs of hexadecimal digits denoting the red, green, blue and alpha (transparency) values for the color. For example, cyan at full opacity would be specified by <tt>color=#00ffffff</tt>. You can specify hexadecimal values in uppercase or lowercase; <tt>#FF0000</tt> is equivalent to <tt>#ff0000</tt>. You may also use various common color names such as <tt>red</tt>, <tt>green</tt>, <tt>blue</tt>, <tt>black</tt>, <tt>white</tt>, and so on.
| |
| − | |-
| |
| − | |<tt>size</tt>
| |
| − | |Sets the size of the text according to the parameter value, given in pixels. The exact effect of the pixel size depends on many things, so simply set this and adjust until it looks like what you want.
| |
| − | |-
| |
| − | |<tt>noparse</tt>
| |
| − | |You can disable rich tags to expose the raw text. But if you still want to use your own tags in that same text, you can create a portion that isn't parsed. This can be important when showing usernames that can potentially have richtext like formatting.
| |
| − | |-
| |
| − | |<tt>lowercase</tt>
| |
| − | |Forces all text to be lowercase
| |
| − | |-
| |
| − | |<tt>uppercase</tt>
| |
| − | |Forces all text to be uppercase
| |
| − | |-
| |
| − | |<tt>mark</tt>
| |
| − | |Used to highlight text using the HTML format explained in color formatting. However, Because the markings lay on top of the text, you have to give them a semitransparent color to still be able to see the text. Example <tt>#ffff00aa</tt>
| |
| − | |-
| |
| − | |<tt>br</tt>
| |
| − | |This is an RTF use for SHIFT+ENTER for line breaking
| |
| − | |-
| |
| − | |<tt>nobr</tt>
| |
| − | |If you want words to stay together and not be separated by word wrapping
| |
| − | |-
| |
| − | |<tt>sprite name</tt>
| |
| − | |Sprites insert an image into text, they ignore colors. This requires both FontChain & DynamicSpriteFont Components. Sprites in Neos use a SpriteURL which is a direct link to the image and the Sprite Name. To prevent content from breaking in case your link breaks. It's recommended to use images you <u>Know</u> will not expire, like saving the image to your inventory where you can keep it safe. Example of using a sprite would be <sprite name=baguette> -- Sprites do not require an end tag, however, you can customize their position & separation using DynamicSpriteFont. This can be changed per sprite.
| |
| − | |}
| |
| − | <!--T:5-->
| |
| − |
| |
| | == Examples == | | == Examples == |
| | | | |
This article or section is a Stub. You can help the Neos Wiki by expanding it.
Introduction
This component displays text inside of a UIX canvas. It also supports text formatting.
Usage
| Fields
|
| Name
|
Type
|
Description
|
persistent
|
Bool
|
Determines whether or not this item will be saved to the server.
|
UpdateOrder
|
Int
|
Controls the order in which this component is updated
|
Enabled
|
Bool
|
Controls whether or not this component is enabled
|
Font
|
FontSet
|
The font to use
|
Content
|
String
|
What to display
|
ParseRichText
|
Bool
|
Whether or not to interpret text formatting
|
NullContent
|
String
|
What to display if Content is empty
|
Size
|
Float
|
The size to render text at, in display units
|
HorizontalAlign
|
TextHorizontalAlignment
|
How to align the text, horizontally
|
VerticalAlign
|
TextVerticalAlignment
|
How to align the text, vertically
|
AlignmentMode
|
AlignmentMode
|
How to compute alignment
|
Color
|
Color
|
The color to render the text with
|
Materials
|
Material
|
The Material(s) to render with
|
LineHeight
|
Float
|
How high each line of text is
|
MaskPattern
|
String
|
TBD
|
HorizontalAutoSize
|
Bool
|
Automatically adjusts the text's size to fit in its horizontal space
|
VerticalAutoSize
|
Bool
|
Automatically adjusts the text's size to fit in its vertical space
|
AutoSizeMin
|
Float
|
The minimum size that can be reached via auto-sizing
|
AutoSizeMax
|
Float
|
The maximum size that can be reached via auto-sizing
|
CaretPosition
|
Int
|
TBD
|
SelectionStart
|
Int
|
TBD
|
CaretColor
|
Color
|
TBD
|
SelectionColor
|
Color
|
TBD
|
InteractionTarget
|
Bool
|
TBD
|
_legacyFontMaterial
|
FontMaterial
|
Internal
|
_legacyAlign
|
Alignment
|
Internal
|
Examples
Here we start with a parent that has a VerticalLayout component with ForceExpandWidth and ForceExpandHeight set.
The first child contains text, with no LayoutElement.
The second child is an Image with a LayoutElement set to its defaults.
As we see, rather than having equally-weighted children, the image child is squashed. In part this is because the image child has no preferred height, but also the text seems to have a preferred height that includes some empty space underneath it.
Setting various values in the LayoutElement of the image child does expand that child. For example, setting its FlexibleHeight to 1 or its PreferredHeight to 100.
Related Components
