RuBB Code Tips & Tricks

RPoL uses RuBB code to reproduce many of the normal formatting effects of HTML.  Using RuBB code, a number of options are available to spice up posts, and lay out information more effectively.


Permitted Formatting...
Bold, Italics, Underline, Strike, Superscript, Subscript, and Small Text

RPoL allows for text to be styled in boldface (<b>) and italics (<i>), to be underlined <u> or struck through (<s>), or to be rendered as superscript (<sup>), subscript (<sub>), or small text (<small>).  Each of these tags requires a matching closing tag to render properly.

Examples:
<b>This text is bold.</b>
<i>This text is italicized.</i>
<u>This text is underlined.</u>
<s>This text has been struck through.</s>
<sup>This is superscript.</sup>
<sub>This is subscript.</sub>
<small>This text is small.</small>


Yields:
This text is bold.
This text is italicized.
This text is underlined.
This text has been struck through.
This is superscript.
This is subscript.
This text is small.


Text Colors

RPoL allows text to be colored.  Text may be colored red (<red>), orange (<orange>), aqua (<aqua>), blue (<blue>), dark blue (<darkblue>), green (<green>), dark green (<darkgreen>), brown (<brown>), purple (<purple>), yellow (<yellow>), or pink (<pink>).  Each of these tags requires a matching closing tag to render properly.

Because of the various colour schemes available, RPoL only allows the colors shown.  When a person views a message with the colourized text, the colours will be appropriately lightened or darkened depending upon their colour scheme.

Examples:
<red>This text is red.</red>
<orange>This text is orange.</orange>
<aqua>This text is aqua.</aqua>
<blue>This text is blue.</blue>
<darkblue>This text is darkblue.</darkblue>
<green>This text is green.</green>
<darkgreen>This text is dark green.</darkgreen>
<brown>This text is brown.</brown>
<purple>This text is purple.</purple>
<yellow>This text is yellow.</yellow>
<pink>This text is pink.</pink>


Yields:
This text is red.
This text is orange.
This text is aqua.
This text is blue.
This text is dark blue.
This text is green.
This text is dark green.
This text is brown.
This text is purple.
This text is yellow.
This text is pink.


Font Styles
Text in messages may be styled as serif (<serif>), monotype (<monotype>), or cursive (<cursive>).  Each of these tags requires a matching closing tag to render properly.

Examples:
<serif>This is the serif font.</serif>
<monotype>This is the monotype font.</monotype>
<cursive>This is the cursive font.</cursive>



Yields:
This is the serif font.
This is the monotype font.
This is the cursive font.


Aligning Text

Text can be centered on RPoL using the <centre> or <center> tags.  This tag must have a matching closing tag (</centre> or </center>) to function properly.

Example:
<center>This text is centered.</center>

Yields:
This text is centered.



Horizontal Rules

Horizontal rules (<hr>) are a convenient way to divide a message into sections.  They do not use a closing tag.

Example:
<hr>

Yields:



Images

Images require a valid web address (or URL) to locate the picture to which they are pointing.  This means the image must be hosted somewhere online for RPoL to be able to find it and display it in a thread.

Images use the image tag (<img>).  This tag has no closer.  Within the tag, the address of the image is supplied using the source attribute (src=""); the address of the image goes inside the quotation marks.

Example:
<img src="http://beta.rpol.net/images/banner-light-beta.gif">

Yields:

The image tag will also accept the alignment attribute to move an image to the left or right side of the post (the code would look like this: <img src="http://beta.rpol.net/images/banner-light-beta.gif" align="right">).  Note that vertical alignment options are not possible in RuBB code at this time, nor are other HTML image attributes available.

Links

Links can be automatically generated by RPoL just by pasting the URL into a post.  This is, by far, the easiest way to make links to other RPoL pages.

Examples:
http://rpol.net

Yields:
http://rpol.net

The Anchor tag (<a>) is also available for limited use in public forums and by the GMs of games.  The Anchor tag takes the hyper-reference attribute (href=""), and the link's web address goes inside the quotation marks.  The text which will become the link comes next, and then the anchor tag must be closed.

Example:
<a href="http://rpol.net">To RPoL!</a>

Yields:
To RPoL!


Lists

Lists are an excellent way to organize information in a post.  Lists vary slightly in that they take square brackets rather than angled brackets.  Lists can be unordered, or bullet point ([list]), or they can be ordered, or numbered ([olist]).  Lists always require a closing tag to work properly ([/list] and [/olist], respectively).  Each item in the list also needs a list item marker [*].

Examples:
[list][*] This is the first item on an unordered list.
[*] This is the second item on an unordered list.
[*] This is the third item on an unordered list.[/list]

[olist][*] This is the first item on an ordered list.
[*] This is the second item on an ordered list.
[*] This is the third item on an ordered list.[/olist]


Yields:
  • This is the first item on an unordered list.
  • This is the second item on an unordered list.
  • This is the third item on an unordered list.

  1. This is the first item on an ordered list.
  2. This is the second item on an ordered list.
  3. This is the third item on an ordered list.


Preformatted and Teletype Text

Using the preformatted tag (<pre>) and the teletype tag (<tt>) are useful for laying out information in columns, or to create in-game maps from simple text.

Preformatted text is a paragraph form, meaning that it will force a new line before and after the enclosed text.  Within the tag, text will continue until the "enter" key is used to create a new line -- it will not wrap automatically.  Text inside the <pre> tag is always monospaced, meaning that every character is the same height and width.  The preformatted tag requires a closing tag (</pre>) to function.

Example:
<pre>This text is preformatted. Each character is the same size,
so it's possible to create simple tables:

Armor             Cost
 backplate          20
 wrist guard         5
 leggings           25
 shield             15</pre>


Yields:
This text is preformatted. Each character is the same size,
so it's possible to create simple tables:

Armor              Cost
  backplate          20
  wrist guard         5
  leggings           25
  shield             15

The teletype tag works similarly, with the following exceptions: it word-wraps automatically when the right-hand side of the screen is reached, and it does not force a new line before and after the enclosed text.  It, too, requires a closing tag (</tt>).

Example:
This is normal text, and <tt>this is teletype text</tt>.

Yields:
This is normal text, and this is teletype text.


Quotes

RPoL has a feature for quoting others in the Quotation tag (<quote>).  Quotations are set off from other text.  The tag requires a matching closing tag (</quote>) at the end of the passage.  The source can be named inside the initial tag, as demonstrated below.

Examples:
<quote>Hokey religions and ancient weapons are no match for a good blaster at your side, kid.</quote>
<quote Darth Vader>I find your lack of faith disturbing.</quote>

Yields:
quote:
Hokey religions and ancient weapons are no match for a good blaster at your side, kid.
Darth Vader typed:
I find your lack of faith disturbing.


Spoilers

RPoL allows some text to be hidden as "spoiler" text until someone mouses over it.  The Spoiler tag (<spoiler>) always requires a matching closer tag after the spoiler text (</spoiler>).  Note: do not use font color code inside spoiler tags, as it will counteract the special Spoiler code.

Example:
Why did the chicken cross the road?
<spoiler>In my day, we didn't ask why the chicken crossed the road. Someone told us that the chicken had crossed the road, and that was good enough for us.</spoiler>


Yields:
Why did the chicken cross the road?

Spoiler text: (Highlight or hover over the text to view)
In my day, we didn't ask why the chicken crossed the road. Someone told us that the chicken had crossed the road, and that was good enough for us.



A GM (and only a GM posting as a GM or NPC) can supress the spoiler header by using <spoiler mode=silent> </spoiler>.

The keyword "hidden" can also be used in place of "spoiler".

Displaying Code

Sometimes, you'll want to demonstrate some RuBB Code or something similar to other users in a post.  This is when the Code tag ([code]) comes in handy.  The Code tag prevents RuBB code from being processed as code, and instead displays it as it was typed. The Code tag requires a matching closing tag ([/code]).

Example:
This is an ISO entity shown without the code tag around it, &eacute;, and this is the same entity inside code tags, [code]&eacute;[/code].  Look how <b>bold</b> works without the code tags, and then with [code]<b>them</b>[/code].

Yields:
This is an ISO entity shown without the code tag around it, é, and this is the same entity inside code tags, &eacute;.  Look how bold works without the code tags, and then with <b>them</b>.


Tables

Yet one more way to organize information on RPoL is by using tables.  Tables can either be done by Easy Tables (and Grids) or by HTML-like formatting.  The latter require a number of tags, which we'll cover here briefly.

First, all tables open with a Table tag (<table>) and end with a matching closing tag (</table>).  In between those two tags go the table content.

Each row in the table is opened with a Table Row tag (<tr>), and then closed with a matching closer (</tr>).

Each cell in the table is opened with either a Table Header tag (<th>), or a table cell tag (<td>), and of course each is closed as well (</th> or </td> respectively).  Headers will center text and bold it, while regular table cells display more plainly.

Example:
<table>
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Content Row 1 Column 1</td><td>Content Row 1 Column 2</td></tr>
<tr><td>Content Row 2 Column 1</td><td>Content Row 2 Column 2</td></tr>
</table>


Yields:
Heading 1Heading 2
Content Row 1 Column 1Content Row 1 Column 2
Content Row 2 Column 1Content Row 2 Column 2


The aforementioned Easy Tables would have achieved the same result by using the code:
| Heading 1              | Heading 2              |
|-------------------------------------------------|
| Content Row 1 Column 1 | Content Row 1 Column 2 |
| Content Row 2 Column 1 | Content Row 2 Column 2 |







Private Lines to Groups (Language Groups)...
Private Groups
GMs have the option to set up Private Groups within their games.  One of the more common usages for this is to set up Language Groups for those within their game who share languages that others do not.


Creating and Assigning Groups
To create a Private Group, use the "Edit Private Groups" link in the GM Menu.  There, 32 different groups are available.  Give each group that you wish to use a name, such as Sindariel-Cwenya, or CovertOps.

Then, assign players to the group using the tick boxes  and click "Update".


Using Private Groups
In game, the GM can use these groups to send Private Lines within posts that only some of the party can read.  An example might be:

[Private to group CovertOps: The man matches the description of the one you were sent to find.]

Or:

[Language Sindariel-Cwenya: Greetings, my friends.  Can I offer you some refreshment?]

The difference between using "Private to group" and "Language" is that with the former, only those in the group see the PL while in the latter, those who do not have membership still see the PL, but see it as scrambled text.


Special Syntax
Text can be escaped with curly brackets.  That is, if the GM uses:

[Language Dwarven:  Tell {Bob} we're gunning for him!]

Then anyone who doesn't speak Dwarven will still see "Bob", but the rest of the text will be scrambled.

With the "Private to" syntax (but not Language), there is also a not operator available.  So the GM can use:

[Private to group not CovertOps: Why are those other guys all wearing the same kind of shoes?]

This would be visible to everyone who was not in the CovertOps group.  Do note, however, that not takes precedence so that if a PL were addresed to both "Group CovertOps" and "Group not CovertOps", only the non-CovertOps members would see it.




Good Form...
Keeping it Reasonable

Remember that while styling a post is a lot of fun, other people need to be able to read it to understand what you're trying to tell them.  Excessive use of color tags and other formatting options can make it difficult for some users to concentrate on your message itself.  Over-use of styling in Public forums is officially frowned upon.


Previewing

It's a good idea to preview your posts before submitting them to see if any tags you put in them are broken or mistyped.  That way, your post won't be marred by a bunch of code that makes it hard to read.


Using Multiple Tags

When using more than one tag to format the same bit of text, always nest the tags.  This means that the first tag opened is the last one closed, the second one opened is the next-to-last closed, and so on.  If tags are not properly nested inside one another, they won't work correctly.

Example:
<red>This whole sentence is red, <i>but only this half of it is italicized, and only this <b>word</b> is in boldface.</i></red>

Yields:
This whole sentence is red, but only this half of it is italicized, and only this word is in boldface.


Quoting

Quoting others in a conversation is a very useful way to help readers keep the gist of the whole thing in mind.  When quoting, however, it's a good idea to cut the quote down to only the relevant parts (never quote an entire post), and only when necessary.  The "quote" link on a post should never be used as a substitute for the "reply" link at the bottom of the page.




How do I...
Put pictures in a post?

Images can be inserted into posts using the Image tag, <img>.  In order for an image to be posted in a game thread, it must be hosted somewhere online.  Where it is hosted is known as its address, or its URL.

To insert an image into a post, use the Image tag with the image's online address to tell viewers' browsers where to find the image:

<img src="URL">

It's important to only link images which you host on your own webspace somewhere.  Displaying images that others are hosting is known as Bandwidth theft, and is a big no-no.

Finally, images can only be posted in games, not in public forums.


Create a map using text only?

Rather than use graphical programs, many GMs on site are content to make rough combat sketches using only their keyboard.  In their most basic form, these maps can show a grid and each player's place on that grid.  These character maps have the advantage of being easy for players to duplicate and modify in their posts.  They're usually created using the preformatted text tag, above.

Example:
<pre>Our map thus far:
    A   B   C   D   E   F   G   H   I   J
   +---+---+---+---+---+---+---+---+---+---+
 1 |   |   |   |Joe|   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 2 |   |   |Bob|   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 3 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 4 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 5 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 6 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 7 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 8 |   |   |   |   |   |   |Ted|   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 9 |   |   |   |Sue|   |   |   |Sam|   |   |
   +---+---+---+---+---+---+---+---+---+---+
10 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+</pre>


Yields:
Our map thus far:
    A   B   C   D   E   F   G   H   I   J
   +---+---+---+---+---+---+---+---+---+---+
 1 |   |   |   |Joe|   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 2 |   |   |Bob|   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 3 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 4 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 5 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 6 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 7 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 8 |   |   |   |   |   |   |Ted|   |   |   |
   +---+---+---+---+---+---+---+---+---+---+
 9 |   |   |   |Sue|   |   |   |Sam|   |   |
   +---+---+---+---+---+---+---+---+---+---+
10 |   |   |   |   |   |   |   |   |   |   |
   +---+---+---+---+---+---+---+---+---+---+


Make special characters, like the copyright symbol?

These special characters are made using codes that tell the viewer's browser what special character to display.  These codes always start with an ampersand (&) and always end with a semi-colon (;).  Use these codes whenever you want to insert the character in a post (never just copy and paste the character itself, as that will often display incorrectly for other users).

Some of the more interesting characters are:

Code to TypeHow it LooksWhat It's Called
&dagger;dagger
&Dagger;double dagger
&spades;spade suit
&clubs;club suit
&hearts;heart suit
&diams;diamond suit
&larr;leftward arrow
&uarr;upward arrow
&rarr;rightward arrow
&darr;downward arrow
&trade;trademark sign
&lt;<less-than sign
&gt;>greater-than sign
&iexcl;¡inverted exclamation mark
&cent;¢cent sign
&euro;Euro sign
&pound;£pound sign
&curren;¤general currency sign
&yen;¥yen sign
&sect;§section mark
&copy;©copyright symbol
&reg;®registered trademark symbol
&deg;°degree sign
&para;pilcrow/paragraph mark
&middot;·middle dot
&frac14;¼one-fourth
&frac12;½one-half
&frac34;¾three-fourths
&iquest;¿inverted query mark


More can be found online -- try searching for "ISO Entities".


Put die roller links in posts and character sheets?

RuBB code uses a basic structure with attributes that can be set for the various dice roller options.  The links will lead to the die roller, with it set up for the user according to the link's specifications, but the user will still need click the "Roll the Dice" button once they're there.

The basic format is:  [dice=<dice>]

In this case, the dice are referred to in standard RPG format -- number of dice, then d, then the sides on the die.  So, 1d10 rolls one ten-sided die.  Multiple kinds of dice can be thrown by separating them with a comma, and penalties and bonuses can be indicated with the plus and minus signs.

Example: [dice=1d20,2d4]
(roll one twenty-sided die added to two four-sided dice)

Example: [dice=1d20+2]
(roll one twenty-sided die and add two to the result)

Other Options

Several other options are available to help flesh out the dice roller link.  Each goes within the square brackets, separated from the other options by a space.  (Below, replace the angle brackets and anything between them with the appropriate information.)




Make more advanced tables?

For more advanced tables, note that the table tag itself will accept the width attribute with a percentage or a number.  This determines, up to 100%, how wide the table will be compared to the post in which it's displayed.  Tables will not expand beyond the width of the post they're in, even if this attribute is set to more than 100%.

Example:
<table width="75%">
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Content Row 1 Column 1</td><td>Content Row 1 Column 2</td></tr>
<tr><td>Content Row 2 Column 1</td><td>Content Row 2 Column 2</td></tr>
</table>


Yields:
Heading 1Heading 2
Content Row 1 Column 1Content Row 1 Column 2
Content Row 2 Column 1Content Row 2 Column 2




While tables cannot be nested inside one another, tables can be stacked and "forced" to the same width as above.  This can produce the illusion of centered headings and the like.  Other permitted tags can be used inside table cells as well, for better formatting.  The example below uses three tables, one atop the other, inside "center" tags.

Example:
<center>
<table width="55%">
<tr><th>Table Example</th></tr>
</table>
<table width="55%">
<tr><th>Heading 1</th><th>Heading 2</th></tr>
<tr><td>Content Row 1 Column 1</td><td>Content Row 1 Column 2</td></tr>
<tr><td>Content Row 2 Column 1</td><td>Content Row 2 Column 2</td></tr>
</table>
<table width="55%">
<tr><td><small>* table footnote</small></td></tr>
</table>
</center>


Yields:
Table Example
Heading 1Heading 2
Content Row 1 Column 1Content Row 1 Column 2
Content Row 2 Column 1Content Row 2 Column 2
* table footnote
 

 


Last updated: 09:54, Thu 28 Nov 2013.
Direct link: http://rpol.net/help/?t=faqs&page=rubbcode