| :---| :---|

|`utf-8`| The argument is a list of UTF-8 code points|

|`utf-16`| The argument is a list of UTF-16 code points|

|`unicode-scalars`| The argument is a list of Unicode scalars (same as UTF-32)|

|`unicode-scalars`| The argument is a list of Unicode scalars (same as UTF-32) or a single Unicode scalar|

If no_format_ is specified, the default is`unicode-scalars`.

For example:

```json example

["StringFrom", ["List"240,159,148,159],"utf-8"]

["StringFrom", ["List"240,159,148,159],{str:"utf-8"}]

["StringFrom", ["List",55357,56607],"utf-16"]

["StringFrom", ["List",55357,56607],{str:"utf-16"}]

["StringFrom",128287,"unicode-scalars"]

["StringFrom",128287]

["StringFrom", ["List",127467,127479],"unicode-scalars"]

["StringFrom", ["List",127467,127479]]

**To create a string from UTF-8 code points**, use the`["StringFrom", _list_, "utf-8"]` function.

**See also**:[`Utf16`](#utf16),[`UnicodeScalars`](#unicodescalars) and[`GraphemeClusters`](#graphemeclusters).

</FunctionDefinition>

<FunctionDefinitionname="Utf16">

<Signaturename="Utf16"returns="list<integer>">string</Signature>

Return a list ofutf-16 code points for the given_string_.

Return a list ofUTF-16 code points for the given_string_.

**Note:** The values returned are UTF-16 code units, not Unicode scalar values.

**To create a string from UTF-16 code units**, use the`["StringFrom", _list_, "utf-16"]` function.

**See also**:[`Utf8`](#utf8),[`UnicodeScalars`](#unicodescalars) and[`GraphemeClusters`](#graphemeclusters).

</FunctionDefinition>

**To create a string from Unicode scalars**, use the`["StringFrom", _list_, "unicode-scalars"]` function.

**See also**:[`Utf8`](#utf8),[`Utf16`](#utf16), and[`GraphemeClusters`](#graphemeclusters).

</FunctionDefinition>

<FunctionDefinitionname="GraphemeClusters">

<Signaturename="GraphemeClusters"returns="list<string>">string</Signature>

A**grapheme cluster** is the smallest unit of text that a reader perceives

A**grapheme cluster** is the smallest unit of text that a reader perceives

as a single character. It may consist of one or more**Unicode scalars**

(code points).

| <span style={{fontSize: "1.3rem"}}>`é`</span> (NFD)| <span style={{fontSize: "1.3rem"}}>`["é"]`</span>|`[101, 769]`|

| <span style={{fontSize: "1.3rem"}}>`👩‍🎓`</span>| <span style={{fontSize: "1.3rem"}}>`["👩‍🎓"]`</span>|`[128105, 8205, 127891]`|

In contrast, a Unicode scalar is a single code point in the Unicode standard,

corresponding to a UTF-32 value. Grapheme clusters are built from one or more scalars.

This function splits a string into grapheme clusters, not scalars.

This function splits a string into grapheme clusters:

```json example

["GraphemeClusters","Hello"]

For more details on how grapheme cluster boundaries are determined,

see[Unicode® Standard Annex#29](https://unicode.org/reports/tr29/).

**See also**:[`Utf8`](#utf8),[`Utf16`](#utf16), and[`UnicodeScalars`](#unicodescalars).

</FunctionDefinition>

The following keys are applicable to text content:

-`weight` a string, one of`"normal"`,`"bold"`,`"bolder"`,`"light"`

-`style` a string, one of`"normal"`,`"italic"`,`"oblique"`

-`language` a string indicating the language of the expression, e.g.`"en"`,`"fr"`,`"es"`etc.

-`language` a string indicating the language of the expression, e.g.`"en"` (English),`"fr"` (French),`"es"`(Spanish)

-`cssId` a string indicating the CSS id of the expression

-`textDecoration` a string indicating the text decoration, e.g.`"none"`,`"underline"`,`"line-through"`

-`textAlign` a string indicating the text alignment, e.g.`"left"`,`"center"`,`"right"`

-`textTransform` a string indicating the text transformation, e.g.`"none"`,`"uppercase"`,`"lowercase"`

-`textIndent` a number indicating the text indentation in pixels

-`lineHeight` a number indicating the line height in pixels

-`letterSpacing` a number indicating the letter spacing in pixels

-`wordSpacing` a number indicating the word spacing in pixels

-`textShadow` a string indicating the text shadow, e.g.`"2px 2px 2px rgba(0,0,0,0.5)"`

-`boxShadow` a string indicating the box shadow, e.g.`"2px 2px 5px rgba(0,0,0,0.5)"`

-`transform` a string indicating the CSS transform, e.g.`"rotate(45deg)"`,`"scale(1.5)"`,`"translateX(10px)"`

-`transition` a string indicating the CSS transition, e.g.`"all 0.3s ease-in-out"`

-`cursor` a string indicating the cursor style, e.g.`"pointer"`,`"default"`,`"text"`

-`display` a string indicating the CSS display property, e.g.`"inline"`,`"block"`,`"flex"`,`"grid"`

-`visibility` a string indicating the CSS visibility property, e.g.`"visible"`,`"hidden"`,`"collapse"`

-`zIndex` a number indicating the z-index of the expression

-`position` a string indicating the CSS position property, e.g.`"static"`,`"relative"`,`"absolute"`,`"fixed"`

-`float` a string indicating the CSS float property, e.g.`"left"`,`"right"`,`"none"`

-`clear` a string indicating the CSS clear property, e.g.`"left"`,`"right"`,`"both"`,`"none"`

-`overflow` a string indicating the CSS overflow property, e.g.`"visible"`,`"hidden"`,`"scroll"`,`"auto"`

-`overflowX` a string indicating the CSS overflow-x property, e.g.`"visible"`,`"hidden"`,`"scroll"`,`"auto"`

-`overflowY` a string indicating the CSS overflow-y property, e.g.`"visible"`,`"hidden"`,`"scroll"`,`"auto"`

-`whiteSpace` a string indicating the CSS white-space property, e.g.`"normal"`,`"nowrap"`,`"pre"`,

-`textOverflow` a string indicating the CSS text-overflow property, e.g.`"ellipsis"`,`"clip"`

-`direction` a string indicating the text direction, e.g.`"ltr"` (left-to-right) or`"rtl"` (right-to-left)

-`lang` a string indicating the language of the expression, e.g.`"en"` (English),`"fr"` (French),`"es"` (Spanish)

-`role` a string indicating the ARIA role of the expression, e.g.`"button"`,`"link"`,`"textbox"`

-`aria-label` a string providing an accessible label for the expression

-`aria-labelledby` a string providing an accessible label by referencing another element's ID

-`aria-describedby` a string providing an accessible description by referencing another element's ID

-`aria-hidden` a boolean indicating whether the expression is hidden from assistive technologies

-`aria-live` a string indicating the ARIA live region, e.g.`"off"`,`"polite"`,`"assertive"`

-`aria-atomic` a boolean indicating whether assistive technologies should treat the expression as a whole

-`aria-relevant` a string indicating what changes in the expression are relevant to assistive technologies, e.g. `"additions"

-`aria-controls` a string providing the ID of another element that the expression controls

-`aria-expanded` a boolean indicating whether the expression is expanded or collapsed

-`aria-pressed` a boolean indicating whether the expression is pressed (for toggle buttons)

-`aria-selected` a boolean indicating whether the expression is selected

-`aria-checked` a boolean indicating whether the expression is checked (for checkboxes or radio buttons)

-`aria-valuenow` a number indicating the current value of the expression (for sliders or progress bars)

-`aria-valuetext` a string providing a text representation of the current value of the expression

-`aria-valuemin` a number indicating the minimum value of the expression (for sliders or progress bars)

-`aria-valuemax` a number indicating the maximum value of the expression (for sliders or progress bars)

-`aria-keyshortcuts` a

The`Annotated` function is**inert** and the value of a`["Annotated", expr]` expression is`expr`.

import ChangeLog from '@site/src/components/ChangeLog';

<ChangeLog>

- The`[Length]` function has been renamed to`[Count]`.

- The`xsize` property of collections has been renamed to`count`.

- The`xcontains()` method of collections has been renamed to`contains()`.