diff --git a/articles/textlabel.md b/articles/textlabel.md index f0777c00e..3fbb1e778 100644 --- a/articles/textlabel.md +++ b/articles/textlabel.md @@ -10,3 +10,120 @@ Text labels are texts that are visually created in 3D space and can be used for [TextLabel class in C# API reference](https://docs.altv.mp/cs/api/AltV.Net.Client.Elements.Entities.TextLabel.html)
### Example + +```js +alt.Font.register("/segoeuib.ttf"); + +const pos = alt.Player.local.pos; +const rot = alt.Player.local.rot.sub(0, 0, -Math.PI); +new alt.TextLabel("Test label!", "Segoe UI", 100, 1, pos, rot, alt.RGBA.white, 2, alt.RGBA.black, true, 10); +``` + +## Formatting + +To achieve multicolored or styled text, or to include an image, Text Label API supports simple formatting, which is done through a set of XML tags. + +> [!WARNING] +> Tags without a closing tag should end with `/>`.
+> For example: `
`, `` + +## Available formatting tags: + +### `font` + +Sets font parameters for text inside. + +#### Attributes: + +| Name | Required? | Description | Format | Example | +| ------------ | --------- | ------------------------- | ------------------- | ---------- | +| size | no | Font size (in pixels) | float | `16.0` | +| color | no | Text color | HEX color without # | `FF0000` | +| outlineColor | no | Outline color | HEX color without # | `00FF00` | +| outline | no | Outline width (in pixels) | float | `5.0` | +| face | no | Font name | string | `Segoe UI` | +| weight | no | Font weight | int | `500` | + +#### Example: + +```xml +Nice red text! +``` + +### `img` + +Allows to insert an image into the text. + +#### Attributes: + +| Name | Required? | Description | Format | Example | +| -------- | --------- | ------------------ | ------ | ----------- | +| src | yes | Image path[^1] | string | `/test.png` | +| width | no | Image width | float | `60` | +| height | no | Image height | float | `80` | +| baseline | no | Image baseline[^2] | float | `0.1` | + +[^1]: Image path is resolved from the creating resource, or asset pack. For example: + `/test.png` - test.png in the root of creating resource; + `@demo/test.png` - test.png in the root of asset-pack resource named `demo` + +[^2]: Baseline determines which location on image (relative to height, 0.0 is top edge, 1.0 is bottom edge) will be located om the text baseline (bottom text line) level. + This parameter can be used to align image to the surrounding text. By default baseline is set to `0.5`. + +#### Supported image formats: + +- `png` +- `jpg` +- `bmp` +- `tga` + +#### Example: + +```xml +alt:V Multiplayer +``` + +### `b` + +Makes text **bold** (font weight 700). Has more priority than `font`. + +#### Example: + +```xml +This text is bold +``` + +### `i` + +Makes text display as _italic_. + +#### Example: + +```xml +This text is italic +``` + +### `s` + +Makes text display as crossed out (strikethrough: ~~example~~). + +```xml +This text is crossed out +``` + +### `u` + +Displays a line under the text + +```xml +This text is underlined +``` + +### `br` + +Inserts a newline character. Added for convinience, normal newline character is also supported. + +```xml +Line 1
Line 2 +Line 3 +```