Character Introduction

HTML Support in Intro Section

Our platform now supports HTML formatting in the intro section, allowing creators to enhance their content with structured text, images, and formatting elements. Below is a list of common used HTML tags:

Tag	Usage	Example
<b>	Bold text	<b>Bold</b> → Bold
<i>	Italic text	<i>Italic</i> → Italic
<strong>	Important text (bold)	<strong>Important</strong> → Important
<em>	Emphasized text (italic)	<em>Emphasis</em> → Emphasis
<u>	Underlined text	<u>Underline</u> → <u>Underline</u>
<s>	Strikethrough text	<s>Deleted</s> → Deleted
<br>	Line break	Line 1<br>Line 2 → Line 1 Line 2
<p>	Paragraph	<p>This is a paragraph.</p>
<blockquote>	Quotation	<blockquote>Quote</blockquote>
<ul>/<ol>	Lists (unordered/ordered)	<ul><li>Item</li></ul>
<li>	List item	<li>Item</li> in <ul> or <ol
<img>	Image	<img src="url.jpg" alt="Image">
<figure>/<figcaption>	Image with caption	<figure><img src="url"><figcaption>Caption</figcaption></figure>
<a>	Link	<a href="https://example.com">Click here</a>
<table>	Table structure	<table><tr><td>Cell</td></tr></table>
<tr>	Table row	<tr><td>Row</td></tr>
<td>	Table data cell	<td>Cell</td>
<th>	Table header cell	<th>Header</th>
<div>	Container element	<div>Content</div>
<span>	Inline container	<span>Inline</span>
<pre>	Preformatted text	<pre>Code Block</pre>
<hr>	Horizontal line	<hr>

⚠️ Unsupported Features

• JavaScript is not supported.

• CSS stylesheets and <style> elements are not allowed. However, you can use inline styles.

• Certain interactive elements like <iframe> and <script> are not permitted for security reasons.

Using Inline Styles

Inline styles are defined directly within the style attribute of an HTML element.

Common Inline CSS Properties

1. Text Color: style="color: red;" (Sets text color)

2. Font Size: style="font-size: 20px;" (Sets font size)

3. Background Color: style="background-color: yellow;" (Sets background color)

4. Spacing:

   • style="margin: 10px;" (Sets outer spacing)

   • style="padding: 10px;" (Sets inner spacing)

5. Border: style="border: 1px solid black;" (Sets a border)

6. Text Alignment:

   • style="text-align: center;" (Centers text horizontally)

   • style="vertical-align: middle;" (Centers content vertically)

7. Layout:

   • style="display: flex;" (Uses Flexbox layout for flexible alignment)

   • style="position: absolute;" (Sets absolute positioning)

How to Use It

To create a well-formatted character intro, you can use a combination of paragraphs, headers, lists, and images. Below is an example character introduction using supported HTML elements.

<img src="https://cdn.crushon.ai/images/7886d47b-04dc-11f0-b823-36ecd4ed3496/ab56fa02-2dcb-412c-8813-6e2198cada20" alt="Aeloria, a mystical guardian with glowing celestial energy">
    <p><em>“The universe is an endless tapestry, woven with the choices of all beings.”</em></p>
    <h3>🛡️ Background</h3>
    <p>Aeloria is an enigmatic guardian who watches over the boundaries between worlds. Born from cosmic energies, she ensures the balance of celestial forces remains intact.</p>
    <h3>⚡ Abilities</h3>
    <ul>
        <li><strong>Stellar Vision:</strong> Can see beyond space and time.</li>
        <li><strong>Astral Shield:</strong> Generates a protective field against dark forces.</li>
        <li><strong>Celestial Flight:</strong> Travels between dimensions with ease.</li>
    </ul>
    <h3>✨ Personality</h3>
    <p>Aeloria is <em>serene, wise, and deeply empathetic</em>. She speaks in a calm and melodic tone, offering guidance to those who seek her aid.</p>
    <p><strong>Are you ready to embark on a journey through the stars with Aeloria?</strong></p>

The following is the form in which this HTML intro is displayed on the chat page.