text - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

<TEXT/> : ViewableWidget

The TEXT element creates a text widget that displays stylized characters or emojis. Some widgets provide ways to add a label or title that automatically formats a string of text for you; the TEXT element is for adding a text string anywhere with a much higher degree of styling and formatting configured by its parameters. To mix differing styles within the same run of text, each TEXT widget can be concatenated together using SPAN.

By default TEXT uses the base theme and style which matches the rest of your app and is intended for outputting general text. It can be easily modified using a few parameters to adjust it for its purpose such as a title, subscript, emphasis, etc. The parameters apply to the full string of text within the element tags so to highlight a single word in a paragraph with italics you need to use inline styling or break the text into multiple customized TEXT element wrappers.

You can use the value parameter for short text with regular alphanumeric characters. If you need to write a string containing restricted characters wrap the string within the <TEXT><![CDATA[ ]]</TEXT> element tags or use the encoded values for the characters.

If multiple TEXT styles, colors, or sizes are required within the same body, SPAN can be used as the parent to multiple TEXT widgets. SPAN's attributes will override the default attributes on the individual TEXT widgets if not set. The alignment attributes of TEXT will be ignored when within a SPAN, allowing the SPAN to align all of its TEXT children using its own attribute.

XML Character Restrictions:

" - must be inside TEXT element or encoded using "

' - must be inside TEXT element or encoded using '

& - must be inside TEXT element wrapped by CDATA, or encoded using &

< - must be inside TEXT element wrapped by CDATA, or encoded using <

> - must be inside TEXT element wrapped by CDATA, or encoded using >

For restrictions workaround see (Character Restrictions)

Attributes

*Note the attributes shared by span (marked with a ✅)

Name	Type	Default	Description	`<SPAN>`
width	int / %	null	The width of the widget.	✅
label/value	string		The text string, which can also be put directly inside the element
theme	string	default	The theme of the text, default / primary / accent
style	string	bodytext2	The style of the text, see (Theming and Styling) for options
font	string	Roboto	The font used for the text. See available fonts. Font names are case sensitive.	✅
size	int	follows theme.style	font size	✅
color	Color	follows theme.style	font color	✅
halign	string	left	Specifies the horizontal body alignment of the text: left right center justify	✅
valign	string	none	Specifies the vertical line alignment of the text: baseline, middle, sub, super, top, bottom, texttop, textbottom,	✅
selectable	bool	false	If the text can be selected by the user	✅
bold	boolean	follows theme.style	bold font	✅
italic	boolean	follows theme.style	italic font	✅
underline	boolean	follows theme.style	underline font	✅
elevation	int	0	adds shadow to the text	✅
shadowx	int	2	the x offset of the shadow	✅
shadowy	int	2	the y offset of the shadow	✅
shadowcolor	Color	Opaque Grey	the color of the shadow	✅
weight	int	2	the y offset of the shadow	✅
decoration	string	null	The attribute controlling the decoration: underline, strikethrough, overline.	✅
decorationweight	double	null	The decoration weight.	✅
decorationcolor	Color	black	the color of the decoration	✅
decorationstyle	string	none	Specifies the style of text decorations: none, left, right, center, justify.	✅
raw	bool	false	If the text will use inline markdown styling or not.
wordspace	double	1.0	Sets the space between words.	✅
letterspace	double	1.0	Sets the space between individual characters.	✅
lineheight	double	1.0	Specifies the height of each line independent of the font.	✅
overflow	string	wrap	Specifies the overflow behavior of text: wrap, ellipses, fade , clip.	✅

Inline Styling Parameters

Name	Type	Description
\n	newline
\t	tab	Creates a 4 space tab.
value	bold	Makes the segment bold.
value	italic	Makes the segment italic
^^value^^	subscript	Makes the segment subscript
^value^	superscript	Makes the segment superscript
_value_	underline	Adds an underline to the segment. Color, type and size can be controlled.
__value__	overline	Adds an overline to the segment. Color, type and size can be controlled.
___value___	strikethrough	Adds a strikethrough to the segment. Color, type and size can be controlled.
:name:	markdown emoji	adds any markdown emoji to the text. A list on all emojis can be found here

Examples

Text Customization

Character Restrictions within a `TEXT` element string

<TEXT label="All alphanumeric characters are valid, and most symbols."/>

<TEXT>"Quotes", (either " or ') are only valid wrapped inside the 'TEXT' element.</TEXT>

<TEXT>
    <![CDATA[Invalid symbols: &, < and > can only be used unencoded within this special tag.]]>
</TEXT>

Style and Theme Examples

<COLUMN>
    <TEXT theme="primary" style="h1">h1</TEXT>
    <TEXT theme="default" style="h2">h2</TEXT>
    <TEXT style="h3">h3</TEXT>
</COLUMN>
<COLUMN>
    <TEXT style="h4">h4</TEXT>
    <TEXT style="h5">h5</TEXT>
    <TEXT style="h6">h6 or headline#</TEXT>
    <TEXT style="caption">caption</TEXT>
    <TEXT style="bodytext1">bodytext1/body1/b1</TEXT>
    <TEXT style="bodytext2">bodytext2/body2/b2</TEXT>
    <BUTTON color="black"><TEXT theme="accent" style="button">button</TEXT></BUTTON>
    <ROW><TEXT>Default text beside an </TEXT><TEXT style="overline" bold="true">overline</TEXT></ROW>
</COLUMN>

Image Example of text style and theme

Theme and Style within a SPAN

<FML>
    <SPAN>
        <TEXT theme="primary" style="h1">h1</TEXT>
        <TEXT theme="default" color="red" style="h2">h2</TEXT>
        <TEXT style="h3">h3</TEXT>
        <TEXT style="h4">h4</TEXT>
        <TEXT style="h5">h5</TEXT>
        <TEXT style="h6" color="blue">h6 or headline#</TEXT>
        <TEXT style="caption">caption</TEXT>
        <TEXT style="bodytext1">bodytext1/body1/b1</TEXT>
        <TEXT style="bodytext2">bodytext2/body2/b2</TEXT>
    </SPAN>
</FML>

Image Example of SPAN

logo See it in Action