Using Rich Text

## Course Introduction

Let's take a look at components and tags that can use rich text.

##### Reference Guide

  * [Making Speech Bubbles](/docs?postId=119)
  * [TextRendererComponent](/apiReference/Components/TextRendererComponent)
  * [TextGUIRendererComponent](/apiReference/Components/TextGUIRendererComponent)
  * [ChatBalloonComponent](/apiReference/Components/ChatBalloonComponent)
  * [TextComponent](/apiReference/Components/TextComponent)



## Rich Text

You can emphasize or edit text using the various rich text tags provided. The four components that can use rich text in MapleStory Worlds are TextRendererComponent, TextGUIRendererComponent, ChatBalloonComponent, and TextComponent. And TextComponent specifically can only use some rich text tags.

### Using Rich Text

Below is a list of tags that TextRendererComponent, TextGUIRendererComponent, and ChatBalloonComponent can use. The IsRichText property must be activated to use rich text.

  * 


When using multiple tags, you can use to limit the range of text to which the tag applies. For example, entering `~~Maple StoryWorld~~` will apply the tag to the range specified below.

[png](1769416799792433bd6914b3c4446aeda6ebefe51379f)

### Rich Text Tag List

[{"Tag":"align","Description":"Changes the alignment.","Example":"<\/align=\"center\">"},{"Tag":"allcaps","Description":"Changes all English text to capital letters.","Example":"<\/allcaps>"},{"Tag":"alpha","Description":"Changes the opacity.","Example":"<\/alpha=#80>"},{"Tag":"b","Description":"Bolds the text.","Example":"Text Input<\/b>"},{"Tag":"br","Description":"Adds a linebreak.","Example":"First LineSecond Line"},{"Tag":"color","Description":"Sets the color. The color input follows hexadecimal code (#00000000). The following are the names of the colors you can use. black, blue, green, orange, purple, red, white, yellow","Example":"<\/color=#ff0000>,<\/color=green>"},{"Tag":"cspace","Description":"Adjusts the text spacing.","Example":"<\/cspace=10>"},{"Tag":"i","Description":"Italicizes text.","Example":"<\/i>"},{"Tag":"indent","Description":"Adds a paragraph indent.","Example":"<\/indent=20%>"},{"Tag":"line-height","Description":"Adjusts the line spacing.","Example":"<\/line-height=150%>"},{"Tag":"line-indent","Description":"Adds an indent for each paragraph.","Example":"<\/line-indent=20%>"},{"Tag":"lowercase","Description":"Changes to lower case letters.","Example":"<\/lowercase>"},{"Tag":"margin","Description":"Sets the margins. You can set both side margins at once or set each one individually.","Example":"<\/margin=10>"},{"Tag":"mark","Description":"Emphasizes text with the chosen color.","Example":"<\/mark=#ffff0080>"},{"Tag":"mspace","Description":"Fixes the text spacing regardless of text size.","Example":"<\/mspace=20>"},{"Tag":"nobr","Description":"Adds a linebreak by bundling the text inside of a tag. Bundled text will mimize the number of linebreaks. Linebreaks are only added when the entered text is longer than the input area.","Example":"<\/nobr>"},{"Tag":"noparse","Description":"Shows the entered tags as-is.","Example":"Example Line<\/rotate=50><\/i><\/noparse>"},{"Tag":"page","Description":"Divides content into pages. The Overflow property must be set to Page.","Example":"First PageSecond Page<\/page>"},{"Tag":"pos","Description":"The characters following the tag appear spaced apart by the entered value.","Example":"<\/pos=50>,<\/pos=30%>"},{"Tag":"rotate","Description":"Rotates the entered text by the entered value.","Example":"<\/rotate=45>"},{"Tag":"s","Description":"Strikethrough.","Example":"~~< \/s>"},{"Tag":"size","Description":"Sets the text size. The larger the value, the larger the text.","Example":"<\/size=150%>"},{"Tag":"smallcaps","Description":"Converts lower case English text to smaller capital letters. Capital letters don't change.","Example":"<\/smallcaps>"},{"Tag":"space","Description":"Sets the spacing equal to the entered value.","Example":"<\/space=50>"},{"Tag":"sprite","Description":"Default emojis or images defined by TextSpriteSet can be used. Default emojis use values between 1 to 16.","Example":"<\/sprite=1>, <\/sprite>"},{"Tag":"strikethrough","Description":"Displays as strikethrough text.","Example":"<\/strikethrough>"},{"Tag":"style","Description":"Either the default style or the style defined by TextStyleSheet are available for use. The following default styles are usable. * H1, H2, H3, C1, C2, C3, Quote, Link, Title, Normal","Example":"<\/style=\"h1\">, <\/style=\"my>"},{"Tag":"sub","Description":"Converts into subscript.","Example":"<\/sub>"},{"Tag":"sup","Description":"Converts into superscript.","Example":"<\/sup>"},{"Tag":"u","Description":"Underlines text.","Example":"<\/u>"},{"Tag":"uppercase","Description":"Converts all English text to capital letters.","Example":"<\/uppercase>"},{"Tag":"voffset","Description":"Sets a vertical offset.","Example":"<\/voffset=10>,<\/voffset=10em>"},{"Tag":"width","Description":"Changes the width.","Example":"<\/width=50%>"}]

## TextComponent Rich Text Tag

The following is a list of rich text tags that TextComponent can use. The IsRichText property must be activated to use rich text.

  * Enter Text 



[{"Tag":"b","Description":"Bolds text.","Example":"Example Line<\/b>"},{"Tag":"i","Description":"Italicizes text.","Example":"Example Line<\/i>"},{"Tag":"size","Description":"Sets the text size.","Example":"Example Line<\/size=70>"},{"Tag":"color","Description":"Sets the color. The color input follows hexadecimal code (#00000000). The following are the names of the colors you can use. aqua, cyan, black, blue, brown, darkblue, fuchsia, green, grey, lightblue, lime, magenta, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow","Example":"Example Line<\/color=#ff1932>, Example Line<\/color=olive>"}]