HTML and Formatting Guide | Roleplay//Lives Help

Posts, stories, bios, custom profile sections, messages and comments can all hold HTML, so you can go beyond the editor buttons if you like. Open the editor's View HTML button (the </> icon) to see or type the code directly.

Before your writing is shown to anyone, the site runs it through a filter that keeps the safe parts and quietly removes everything else. This page lists exactly what the filter keeps, so you know what will work before you post.

The short version:

Ordinary formatting tags (bold, headings, lists, tables, quotes, images, links and so on) all work.
You can style things with the style="..." attribute, using the CSS properties listed below.
Anything that runs code, embeds another site, makes a form, or can cover up the rest of the page is removed.
If something is removed, the rest of your writing is still shown. Only the part that isn't allowed is left out.

Looking for the editor buttons instead? The Site Supporter Feature Guide covers the expanded editor, and the Site Guide covers the basics.

Tags You Can Use

What for	Tags
Text style	`<b>` `<strong>` `<i>` `<em>` `<u>` `<s>` `<strike>` `<del>` `<ins>` `<mark>` `<small>` `<big>` `<sub>` `<sup>`
Headings and paragraphs	`<h1>` to `<h6>`, `<p>`, `<br>`, `<hr>`, `<div>`, `<span>`, `<center>`
Quotes and code	`<blockquote>` `<q>` `<cite>` `<code>` `<pre>` `<kbd>` `<samp>` `<var>`
Lists	`<ul>` `<ol>` `<li>` `<dl>` `<dt>` `<dd>`
Tables	`<table>` `<caption>` `<thead>` `<tbody>` `<tfoot>` `<tr>` `<th>` `<td>` `<col>` `<colgroup>`
Links and images	`<a>` `<img>` `<figure>` `<figcaption>`
Spoilers and fold-outs	`<details>` `<summary>`
Layout sections	`<section>` `<article>` `<aside>` `<header>` `<footer>`
Notes and meanings	`<abbr>` (hover text through `title`), `<dfn>`, `<time>`
Other languages	`<ruby>` `<rt>` `<rp>` (pronunciation above text), `<bdi>` `<bdo>` (text direction), `<wbr>` (a spot where a long word may break)
Old-school	`<font>` (with `color`, `face` and `size`) and `<marquee>` (with `behavior`, `direction`, `scrollamount` and `loop`)

Attributes You Can Use

Attributes are the extra settings inside a tag, like href in a link. These work on any tag:

style (see the CSS section below), title (hover text), align, valign, width, height, dir, lang
Table settings: border, cellpadding, cellspacing, colspan, rowspan, nowrap, bgcolor, background
Font settings: color, face, size

A few tags have their own extras:

Links <a>: href and target. Use target="_blank" to open the link in a new tab.
Images <img>: src, alt, title, width, height, align and loading="lazy" (which waits to load the image until a reader scrolls to it, good for image-heavy bios).
Lists: start and type on <ol>, and type on <ul>.
Fold-outs: open on <details> makes it start unfolded.
Quotes: cite on <blockquote> and <q>.

Links and images need a full web address. Start them with https:// or http:// (links can also use mailto: for email). A short address like profile.cfm?authorID=1 is removed, so copy the whole address from your browser's address bar.

CSS Styles You Can Use

Put styles inside a style attribute, separated by semicolons:

<section style="background-color: #2b1d3a; color: #f3e6ff; padding: 1em; border-radius: 8px;">
  A boxed-in letter from the queen.
</section>

These are the properties the filter keeps. Any other property is removed, but the allowed ones next to it still work.

Text and fonts

color
font-family
font-size
font-weight
font-style
font-variant
text-align
text-transform
text-indent
text-shadow
text-decoration (and -line, -color, -style, -thickness)
-webkit-text-fill-color
line-height
letter-spacing
word-spacing
word-break
overflow-wrap
white-space
hyphens
vertical-align
writing-mode

Backgrounds and effects

background
background-color
background-image
background-size
background-repeat
background-position
background-attachment
background-clip and -webkit-background-clip
opacity
box-shadow
transform

Spacing, borders and size

margin (and -top, -right, -bottom, -left)
padding (and -top, -right, -bottom, -left)
box-sizing
border (and -top, -right, -bottom, -left)
border-color
border-style
border-width
border-radius (and each corner)
border-collapse
border-spacing
outline
width, height
min-width, min-height
max-width, max-height
aspect-ratio
object-fit, object-position
overflow, overflow-x, overflow-y
resize

Layout

display (see below)
float, clear
flex, flex-direction, flex-wrap, flex-flow, flex-grow, flex-shrink, flex-basis
justify-content, align-items, gap
grid-template-columns
column-count
list-style-type, list-style-position
table-layout, caption-side

A few rules about values

display can be block, inline, inline-block, flex, inline-flex, grid, inline-grid, flow-root, list-item, table, table-row or table-cell. display: none isn't allowed, so you can't hide parts of a post.
Background images in url(...) need a full https:// or http:// address. Short addresses and pasted image data (data:...) are removed. Gradients like linear-gradient(...), radial-gradient(...) and conic-gradient(...) work fine.
No CSS tricks: a style that contains a backslash escape (\) or a CSS comment (/* */) is removed. So is !important on display.
Everything stays in its box. Your writing is shown inside its own frame, so big transforms, negative margins or oversized boxes can't spill over the rest of the page. Anything that sticks out past the edge is simply cut off, so keep boxes and tables narrow enough for a phone screen.

What Isn't Allowed

These are removed whenever your writing is shown. Most of them could be used to break the page, trick readers or run code in their browsers, so they're off for everyone.

Not allowed	Why, and what to do instead
Scripts	`<script>` and attributes like `onclick` or `onmouseover`. These run code, so they're never kept.
Embeds	`<iframe>`, `<embed>`, `<object>`, `<video>`, `<audio>`. To share a video or song, post a link to it.
Forms and buttons	`<form>`, `<input>`, `<button>`, `<select>`, `<textarea>`. They could be used to fake a login box.
Style sheets	`<style>` blocks and `<link>` tags. Use the `style` attribute on each tag instead.
SVG and math	`<svg>` and `<math>`. Save the drawing as a PNG and use `<img>`.
class and id	`class` and `id` attributes are removed (except the site's own `@`-tag links). Style each tag directly with `style`.
Positioning	`position`, `z-index`, `top`, `left`, `right`, `bottom`, `inset`. These could pin something over the site's menus or other people's posts.
Hiding and click tricks	`display: none`, `pointer-events`, `cursor`.
Animations	`animation`, `transition` and keyframes. `<marquee>` is the one moving element that's allowed.
Filters and masks	`filter`, `backdrop-filter`, `mask`, `clip-path`. These can load outside files or slow the page down for readers.
Other tags	Anything not in the list of tags above, such as `<dialog>`, `<template>` or `<meta>`. The tag is removed, but the text inside it usually stays.

Handy Examples

A spoiler or fold-out section

Great for character secrets, long stat sheets or content notes.

<details>
  <summary>Spoiler: what's really in the locket</summary>
  <p>A lock of her brother's hair.</p>
</details>

A styled quote box

<blockquote style="border-left: 4px solid #c9a227; background: rgba(255,255,255,.05); padding: .8em 1em; font-style: italic;">
  The sea doesn't care who you were on land.
</blockquote>

Gradient text

<span style="background: linear-gradient(90deg, #ff6ec4, #7873f5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold;">
  Chapter One
</span>

Two columns side by side

<section style="display: flex; flex-wrap: wrap; gap: 1em;">
  <article style="flex: 1 1 200px;">Left column</article>
  <article style="flex: 1 1 200px;">Right column</article>
</section>

The flex-wrap and the 200px let the columns stack on a phone instead of getting squashed.

A highlighted name

<mark style="background-color: #3d2a5c; color: #fff; padding: 0 .3em; border-radius: 4px;">Lady Morwen</mark>

Tips

Build boxes with <section>, not <div>. When you switch from View HTML back to the normal editor, it turns every <div> into a paragraph, which can collapse boxes inside boxes. <section>, <article>, <aside>, <header>, <footer> and <figure> are left alone. In the same way, style text with <strong>, <em> or <span> rather than <b> or <i>, because the editor drops styles from those.
Previews are shorter than the full post. Feeds and browse pages show the first part of your writing, so a big layout can be cut off partway in a preview. The full page always shows everything.
Think about phones. Fixed widths like width: 900px make readers scroll sideways on small screens. Try max-width: 100% or percentages instead.
Keep it readable. Light text on a light background, or tiny fonts, are hard on readers' eyes. Check your post on both a computer and a phone.
Test in a draft. If something doesn't show up, it's probably on the "not allowed" list, or the image address isn't a full https:// link.

Questions?

Check the FAQs, ask on the Discord, or contact us. If you'd like a tag or style added, let us know what you want to make and we'll take a look.