mirror of
https://github.com/rojo-rbx/rojo.git
synced 2026-10-25 04:54:07 +00:00
update rules
This commit is contained in:
Joe
parent
4c390fdd37
commit
d5522b2fef
8549 changed files with 11783 additions and 1888 deletions
285
.cursor/rules/roblox/en-us/ui/rich-text.md
Normal file
285
.cursor/rules/roblox/en-us/ui/rich-text.md
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
---
|
||||
title: Rich text markup
|
||||
description: Rich Text Markup are simple markup tags to style sections of a string.
|
||||
comments: |
|
||||
1. Replace numbered footnotes with dedicated style.
|
||||
---
|
||||
|
||||
UI **rich text** utilizes simple markup tags to style sections of a string in bold, italics, underline, fill color, stroke variations, and more. You can apply styling tags to `Class.TextLabel`, `Class.TextButton`, and `Class.TextBox` objects.
|
||||
|
||||
## Enable rich text
|
||||
|
||||
You must enable rich text on a per-object basis through its **RichText** property in the [Properties](../studio/properties.md) window, or by setting the property to `true` in a `Class.LocalScript`.
|
||||
|
||||
<img src="../assets/ui/rich-text/Enable-Rich-Text.png"
|
||||
width="320" />
|
||||
|
||||
```lua highlight="2"
|
||||
local title = Instance.new("TextLabel")
|
||||
title.RichText = true
|
||||
|
||||
title.Text = "Use a <b>bold title</b>"
|
||||
```
|
||||
|
||||
<Alert severity="info">
|
||||
When editing an object's **Text** property in Studio, toggling the **RichText** checkbox in the [Properties](../studio/properties.md) window displays the text string as a final render. This is useful for identifying and correcting mistakes in any [supported tags](#supported-tags).
|
||||
</Alert>
|
||||
|
||||
<Alert severity="warning">
|
||||
<a href="../production/localization/index.md">Localizing</a> an experience to support other languages removes rich text formatting tags. To ensure formatting appears in other languages, re-apply the tags manually to your localized strings.
|
||||
</Alert>
|
||||
|
||||
## Supported tags
|
||||
|
||||
Rich text tags are similar to XML/HTML tags and you must include both an opening and closing tag around the formatted text.
|
||||
|
||||
`<b>Formatted text</b>`
|
||||
|
||||
You can also nest tags inside each other as long as you close them in the reverse order of how you opened them.
|
||||
|
||||
`<b><i><u>Formatted text</u></i></b>`
|
||||
|
||||
### Font color
|
||||
|
||||
`<font color=""> </font>`
|
||||
|
||||
<blockquote>
|
||||
`I want the <font color="#FF7800">orange</font> candy.`<br />
|
||||
`I want the <font color="rgb(255,125,0)">orange</font> candy.`
|
||||
<img src="../assets/ui/rich-text/Example-Color.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Font size
|
||||
|
||||
`<font size=""> </font>`
|
||||
|
||||
<blockquote>
|
||||
`<font size="40">This is big.</font> <font size="20">This is small.</font>`
|
||||
<img src="../assets/ui/rich-text/Example-Size.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Font face
|
||||
|
||||
`<font face=""> </font>`
|
||||
|
||||
<blockquote>
|
||||
`<font face="Michroma">This is Michroma face.</font>`
|
||||
<img src="../assets/ui/rich-text/Example-Font-Face.png" width="600" />
|
||||
</blockquote>
|
||||
<Alert severity="info">
|
||||
Font face/family names are listed on the `Datatype.Font` enum reference page.
|
||||
</Alert>
|
||||
|
||||
### Font family
|
||||
|
||||
`<font family=""> </font>`
|
||||
|
||||
<blockquote>
|
||||
`<font family="rbxasset://fonts/families/Michroma.json">This is Michroma face.</font>`
|
||||
<img src="../assets/ui/rich-text/Example-Font-Face.png" width="600" />
|
||||
</blockquote>
|
||||
<Alert severity="info">
|
||||
Font face/family names are listed on the `Datatype.Font` enum reference page.
|
||||
</Alert>
|
||||
|
||||
### Font weight
|
||||
|
||||
`<font weight=""> </font>`
|
||||
|
||||
<blockquote>
|
||||
`This is normal. <font weight="heavy">This is heavy.</font>`<br />
|
||||
`This is normal. <font weight="900">This is heavy.</font>`
|
||||
<img src="../assets/ui/rich-text/Example-Weight.png" width="600" />
|
||||
</blockquote>
|
||||
<Alert severity="info">
|
||||
Font weight can be a case-insensitive string name including `Thin`, `ExtraLight`, `Light`, `Regular`, `Medium`, `SemiBold`, `Bold`, `ExtraBold`, or `Heavy`; it can also be a number in factors of 100 between `100` and `900`.
|
||||
</Alert>
|
||||
|
||||
### Font transparency
|
||||
|
||||
`<font transparency=""> </font>`
|
||||
|
||||
<blockquote>
|
||||
`Text at <font transparency="0.5">50% transparency</font>.`
|
||||
<img src="../assets/ui/rich-text/Example-Transparency.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Stroke
|
||||
|
||||
`<stroke> </stroke>`
|
||||
|
||||
<table size="small">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Parameter</th>
|
||||
<th>Equivalent Property</th>
|
||||
<th>Example Values</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>`color`</td>
|
||||
<td>`Class.UIStroke.Color`</td>
|
||||
<td>`"rgb(255,125,0)"`, `"#FF7800"`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`thickness` or `th`</td>
|
||||
<td>`Class.UIStroke.Thickness`</td>
|
||||
<td>`"1"`, `"4"`, `"0.5"`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`transparency` or `tr`</td>
|
||||
<td>`Class.UIStroke.Transparency`</td>
|
||||
<td>`"0"`, `"0.5"`, `"1"`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`joins`</td>
|
||||
<td>`Class.UIStroke.LineJoinMode`</td>
|
||||
<td>`"round"`, `"bevel"`, `"miter"`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`sizing`</td>
|
||||
<td>`Class.UIStroke.StrokeSizingMode`</td>
|
||||
<td>`"fixed"`, `"scaled"`</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<blockquote>
|
||||
`You won <stroke color="#00A2FF" thickness="2" transparency="0.25" joins="miter">25 gems</stroke>.`
|
||||
<img src="../assets/ui/rich-text/Example-Stroke.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
<Alert severity="info">
|
||||
See [UI appearance modifiers](../ui/appearance-modifiers.md#stroke) for details on `<stroke>` tag parameters such as `thickness` and `joins`.
|
||||
</Alert>
|
||||
|
||||
### Bold
|
||||
|
||||
`<b> </b>`
|
||||
|
||||
<blockquote>
|
||||
`Text in <b>bold</b>.`
|
||||
<img src="../assets/ui/rich-text/Example-Bold.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Italic
|
||||
|
||||
`<i> </i>`
|
||||
|
||||
<blockquote>
|
||||
`Text <i>italicized</i>.`
|
||||
<img src="../assets/ui/rich-text/Example-Italic.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Underline
|
||||
|
||||
`<u> </u>`
|
||||
|
||||
<blockquote>
|
||||
`Text <u>underlined</u>.`
|
||||
<img src="../assets/ui/rich-text/Example-Underline.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Strikethrough
|
||||
|
||||
`<s> </s>`
|
||||
|
||||
<blockquote>
|
||||
`Text with <s>strikethrough</s> applied.`
|
||||
<img src="../assets/ui/rich-text/Example-Strikethrough.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Line break
|
||||
|
||||
`<br/>`
|
||||
|
||||
<blockquote>
|
||||
`New line occurs after this sentence.<br/>Next sentence...`
|
||||
<img src="../assets/ui/rich-text/Example-Line-Break.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Uppercase
|
||||
|
||||
`<uppercase> </uppercase>`<br/>`<uc> </uc>`
|
||||
|
||||
<blockquote>
|
||||
`<uppercase>Uppercase</uppercase> makes words read loudly!`<br />
|
||||
`<uc>Uppercase</uc> makes words read loudly!`
|
||||
<img src="../assets/ui/rich-text/Example-Uppercase.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Small caps
|
||||
|
||||
`<smallcaps> </smallcaps>`<br/>`<sc> </sc>`
|
||||
|
||||
<blockquote>
|
||||
`My name is <smallcaps>Diva Dragonslayer</smallcaps>.`<br />
|
||||
`My name is <sc>Diva Dragonslayer</sc>.`
|
||||
<img src="../assets/ui/rich-text/Example-Small-Caps.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Mark
|
||||
|
||||
`<mark> </mark>`
|
||||
|
||||
<blockquote>
|
||||
`Text <mark color="#009966" transparency="0">highlighted</mark>.`
|
||||
<img src="../assets/ui/rich-text/Example-Highlighted.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
### Comment
|
||||
|
||||
`<!-- -->`
|
||||
|
||||
<blockquote>
|
||||
`After this is a comment...<!--This does not appear in the final text--> and now more text...`
|
||||
<img src="../assets/ui/rich-text/Example-Comment.png" width="600" />
|
||||
</blockquote>
|
||||
|
||||
## Escape forms
|
||||
|
||||
If you want to render certain characters like `<` or `>` and exempt them from consideration as part of rich text tags, you can write them in their **escape form**.
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Character</th>
|
||||
<th>Escape</th>
|
||||
<th>Example</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>`<`</td>
|
||||
<td>`<`</td>
|
||||
<td>`10 < 100`</td>
|
||||
<td>10 < 100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`>`</td>
|
||||
<td>`>`</td>
|
||||
<td>`100 > 10`</td>
|
||||
<td>100 > 10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`"`</td>
|
||||
<td>`"`</td>
|
||||
<td>`Meet "Diva Dragonslayer"`</td>
|
||||
<td>Meet "Diva Dragonslayer"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`'`</td>
|
||||
<td>`'`</td>
|
||||
<td>`Diva's pet is a falcon!`</td>
|
||||
<td>Diva's pet is a falcon!</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`&`</td>
|
||||
<td>`&`</td>
|
||||
<td>`Render another escape form <b>&lt;</b> by escaping an ampersand`</td>
|
||||
<td>Render another escape form **&lt;** by escaping an ampersand</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
Loading…
Add table
Add a link
Reference in a new issue