Grato por sua visita. Neste momento esta página está apenas disponível em inglês.

APL Text

The Text component displays text in either a single line or multiple lines. See Alexa Design Guide–Text for guidance on using text for a good user experience in Alexa skills.

Properties

Property Type or
Values
Required Styled Dynamic Description
color Color No Yes Yes The color of the text. Defaults to #FAFAFA for a dark theme and #1E2222 for a light theme.
fontFamily String No Yes No Font family (such as "Amazon Ember Display"). Default depends on locale.
fontSize Dimension: Properties No Yes No The size of the text. Default is 40dp.
fontStyle normal | italic No Yes No The font style to display. Defaults to normal.
fontWeight normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 No Yes No The font weight to display. Defaults to normal.
letterSpacing Dimension: Properties Yes No No Additional space to add between letters. Defaults to 0.
lineHeight Number (percentage) Yes No No Line-height multiplier. Defaults to 1.25.
maxLines Integer No No No The maximum number of lines of text to display. The text will be truncated with an ellipsis if not all text is visible. Defaults to 0, which indicates no maximum.
text String Yes No Yes The markup to display in this text box. If this value is set to null or an empty string "", no content appears.
textAlign auto | left | right | center No Yes No Alignment of text within a paragraph. Defaults to auto.
textAlignVertical auto | top | bottom | center No Yes No Vertical alignment of text. Defaults to auto.

Most of these properties have default values specified by the current text style. Refer to Resources for a discussion of styles.

A Text component will not scroll unless it is placed within a ScrollView.

color

The color of the text. If the theme is light, the default is #1E2222. If the theme is dark, the default is #FAFAFA.

fontFamily

The font family used to draw the text. APL authors generally should not set this property, as they don't know what fonts may be available on the target device.

The default value is language-dependent. All locales except ja-JP (Japanese) have the default Amazon Ember Display. For Japanese, the default value is Noto Sans CJK. See Style Packages–FontFamily.

fontSize

The size of the font, normally expressed in dp. The default is 40dp.

fontStyle

The style of the font, either normal or italic. Defaults to normal.

fontWeight

The weight of the font. Defaults to normal. The normal and bold values are assigned at runtime. The integer values 100 through 900 correspond to progressively darker variations of the font. Most fonts don't support this many variations. For example, Amazon Ember Display has five weights (Thin, Light, Regular, Medium, Bold) which are assigned 100, 300, 500, 700, and 900 respectively.

Note that fontWeight is processed as an enumerated set, not as an integer or a string. For example, the value 750 is invalid and will not set the font to a weight between 700 and 800. When assigning a fontWeight in a resource, it is recommended that you use a string resource.

letterSpacing

Additional space to add between letters. Defaults to 0.

lineHeight

Line-height multiplier. Defaults to 1.25.

maxLines

The maximum number of lines of text to display. Defaults to N, where N is a very large number. Setting it to a smaller number will clip the text to that many lines and will insert an ellipsis if the text is truncated.

text

When the value of text is set to null, this is equivalent to setting the value to be an empty string "".

Text blocks support simple markup. Supported tags include:

Tag Description Example Display
<br> Insert a line break. Line breaks may be repeated. Line 1<br>Line 2 Line 1
Line 2
<strong>, <b> Bold a span of text. <b>Large</b> dogs are friendly. Large dogs are friendly.
<em>, <i> Italic a span of text. Read <em>Emma</em> for homework. Read Emma for homework.
<strike> Strikethrough a span of text The document is <strike>fine</strike> pretty good. The document is fine pretty good.
<u> Underline a span of text I just <u>loved</u> the chocolate! I just loved the chocolate!
<tt>, <code> Monospace a span of text.

The <code>main</code> function is the entry point.

The main function is the entry point.
<sup>, <sub> Superscript and subscript a span of text. See Gibson<sup>1<> for the H<sub>2<>O formula. See Gibson1 for the H2O formula.

Markup elements may be nested. Improperly nested markup gives undefined behavior. <b>Once upon a time <u>a small dog</b> ate a grasshopper and felt ill.</u>. The rendering of the above is undefined because the <b> and <u> elements do not nest correctly.

Markup characters in text must be replaced with character entity references.

Entity Character Description
& \& Ampersand
< < Less-than
> > Greater-than
&#nn; Any Decimal Unicode code-point. "nn" is a valid integer.
&#xnn; Hexadecimal Unicode code-point. "nn" is a valid hexadecimal number

Numeric entity references can be in decimal or hexadecimal. For example, © can be written © or ©.

textAlign

Controls the positioning of lines of text: left, center, right, auto. The default is auto, which uses the default font direction (for example, left for English).

textAlignVertical

Positions the text within the text box. Only used if the text box is taller than the text content. Defaults to top.

Sample Text

{
    "type": "Text",
    "width": 400,
    "textAlign": "center",
    "style": "textStylePrimary2",
    "text": "<b>Hello!</b> This is your <i>Alexa</i> assistant speaking!",
    "maxLines": 2
}