# BBClash Spec V1.1.0
This document aims to create a standard specification for basic Penclash-flavoured BBCode.
# Goals
Penclash-flavoured BBCode aims to be simple to use, easy to understand, and quick to write, while still providing users with enough options to be able to achieve most desired formatting needs.
Penclash-flavoured BBCode also aims to be as semantic as possible, giving end applications freedom to style content as needed.
# Basic Syntax
## Tags
Penclash-flavoured BBCode utilizes three types of tags: simple tags (no argument), parameterized tags (one argument), and void tags (no closing tag). These are written as follows:
Simple tag: `[tag][/tag]`
Parameterized tag: `[tag=argument][/tag]`
Void tag: `[tag]`
## Paragraphs
Paragraphs are defined by either **two line breaks** or **a line break and an indent**. A single line break will remain as a single line break, but will be kept in the same paragraph as the text that precedes it. Three line breaks will create a **scene break**.
This is done to allow greater control over the formatting of output by the end application.
# Tag Reference
---
Template:
## Tag Name
Tag description.
#### Tag:
BBCode example. Use {} to indicate user input, e.g. (text contents}.
#### Yields:
HTML example. Use {} to indicate user input, e.g. (text contents}.
---
## Center
Center-aligns text.
#### Tag:
[center]{text content}[/center]
#### Yields:
<div class="center">{text content}</div>
## Right
Right-aligns text.
#### Tag:
[Right]{text content}[/right]
#### Yields:
<div class="right">{text content}</div>
## Bold and Strong
Emboldens text. The [strong] tag can be nested.
#### Tag:
[bold]{text content}[/bold]
[strong]{text content}[/strong]
#### Yields:
<b>{text content}</b>
<strong>{text content}</strong>
## Italic and Emphasis
Emphasizes text. The [em] tag can be nested.
#### Tag:
[i]{text content}[/i]
[em]{text content}[/em]
#### Yields:
<i>{text content}</i>
<em>{text content}</em>
## Underline
Underlines text.
#### Tag:
[u]{text content}[/u]
#### Yields:
<span class="undeline">{text contents}</span>
## Smallcaps
Sets text to a smallcaps font variant.
#### Tag:
[smcaps]{text content}[/smcaps]
#### Yields:
<span class="smallcaps">{text contents}</span>
## Strikethrough
Strikes text through.
#### Tag:
[s]{text content}[/s]
#### Yields:
<s>{text contents}</s>
## Monospace
Sets text to a monospace font variant.
#### Tag:
[mono]{text content}[/mono]
#### Yields:
<span class="monospace">{text contents}</span>
## Subscript
Subscripts text.
#### Tag:
[sub]{text content}[/sub]
#### Yields:
<sub>{text contents}</sub>
## Superscript
Superscripts text.
#### Tag:
[sup]{text content}[/sup]
#### Yields:
<sup>{text contents}</sup>
## Spoiler
Spoilers text.
#### Tag:
[spoiler]{text content}[/spoiler]
#### Yields:
<span class="spoiler">{text contents}</span>
## Color/Colour
Sets the font colour of text. Accepts hex colour codes prefixed with a '#' and valid web colours. Both spellings (colour/color) are acceptable.
#### Tag:
[color=#{hex code}]{text content}[/color]
[colour={web colour name}]{text content}[/colour]
#### Yields:
span style="color:#{hex code};">{text contents}</span>
span style="color:{web colour name};">{text contents}</span>
## URL
Creates a hyperlink. Can be named or unnamed, depending on whether or not the url is given as an argument.
#### Tag:
[url]{web address}[/url]
[url={web address}]{text content}[/url]
#### Yields:
<a href="{web address} rel="nofollow">{web address}</a>
<a href="{web address} rel="nofollow">{text content}</a>
## Email
Creates an email hyperlink.
#### Tag:
[email]{email address}[/email]
#### Yields:
<a href="mailto:{email address}>{email address}</a>
## Opacity
Sets text opacity. Takes either a percentage or a decimal between 0.0 and 1.0.
#### Tag:
[opacity=#{opacity value}]{text content}[/color]
#### Yields:
<span style="opacity:#{opacity value};">{text contents}</span>
## Size
Sets text size. Takes either an em or a point value. Values less than 0.5em or above 2.0em will be set to .5 and 2, respectively.
#### Tag:
[size={size value}]{text content}[/size]
#### Yields:
<span style="font-size:#{size value}rem;">{text contents}</span>
## Header
Creates a header. Header tags range from 1 to 6.
#### Tag:
[h1]{text content}[/h1]
[h2]{text content}[/h2]
[h6]{text content}[/h6]
#### Yields:
<h1>{text content}</h1>
<h2>{text content}</h2>
<h6>{text content}</h6>
## Image
Inserts an image.
#### Tag:
[img]{image address}[/img]
#### Yields:
<img src="{image address}">
## Quote
Creates a quote block. Can take the author of the quote as an argument for attribution purposes.
#### Tag:
[quote]{text content}[/quote]
[quote={quote author}]{text content}[/quote]
#### Yields:
<blockquote>{text content}</blockquote>
<blockquote data-author="{quote author}">{text content}</blockquote>
## Footnote
Creates a footnote. Footnotes are kept inline with the text in their original position under the assumption that formatting will be handled by the application. Footnotes can take an argument for the symbol that will be used to designate them, otherwise they should be sequentially numbered by the application.
#### Tag:
{text content}[footnote]{footnote content}[/footnote]
{text content}[footnote={footnote symbol}]{footnote content}[/footnote]
#### Yields:
{text content}<span class="footnote">{footnote content}</span>
{text content}<span class="footnote" data-symbol = "{footnote symbol}">{footnote content}</span>
## Pre
Pre creates a block of preformatted text. Text will be displayed in a monospaced font and will preserve formatting.
#### Tag:
[pre]{text content}[/pre]
#### Yields:
<pre>{text content}</pre>
## Code and Codeblock
Code and Codeblock define areas of computer code or markup that should not be formatted. Code defines a single line of text; Codeblock allows for multiple lines. Codeblock also allows an argument to define the language of its contents intended for use with syntax highlighting. BBCode tags in Code or Codeblock should be ignored.
#### Tag:
[code]{text content}[/code]
[codeblock]{text content}[/codeblock]
[codeblock={language}]{text content}[/codeblock]
#### Yields:
<code>{text content}</code>
<pre class="codeblock">{text content}</pre>
<pre class="codeblock" data-language="{language}">{text content}</pre>
## Figure
Figure defines self-contained content that can be floated to the right or left. Figure takes one required argument for the floated direction.
#### Tag:
[figure=right]{content}[/figure]
[figure=left]{content}[/figure]
#### Yields:
<figure class="figure-right">{content}</figure>
<figure class="figure-left">{content}</figure>
## List and List Item
List and its subordinate tag List Item create lists. Lists can be nested. Lists are by default bulleted and unordered. To change the style of bullet for an unordered list, 'circle', 'square', or 'none' may be supplied. to create an ordered list, an argument must be supplied: '1' for numeric, 'a' and 'A' for lower and uppercase alphabetic, and 'i' and 'I' for lower and upper case roman numeric. List Item-s used outside of a List are considered invalid and will not be parsed.
#### Tag:
[list]
[*]{list item 1}
[*]{list item 2}
[/list]
[list=circle]
[*]{list item 1}
[*]{list item 2}
[/list]
[list=1]
[*]{list item 1}
[*]{list item 2}
[/list]
[*]{list item}
#### Yields:
<ul>
<li>{list item 1}</li>
<li>{list item 2}</li>
</ul>
<ul style="list-style-type:circle;">
<li>{list item 1}</li>
<li>{list item 2}</li>
</ul>
<ol type="1">
<li>{list item 1}</li>
<li>{list item 2}</li>
</ol>
[*]{list item}
## Table, Table Row, Table Data, Table Header, and Caption
Table and its subordinate tags create tables. Subordinate Table tags used outside of a Table are considered invalid and will not be parsed.
#### Tag:
[table]
[caption]{table caption}[/caption]
[tr]
[th]{table header 1}[/th]
[th]{table header 2}[/th]
[/tr]
[tr]
[td]{table content 1}[/td]
[td]{table content 2}[/td]
[/tr]
[/table]
[tr]
[td]{table content 1}[/td]
[td]{table content 2}[/td]
[/tr]
#### Yields:
<table>
<caption>{table caption}</caption>
<tr>
<th>{table header 1}</th>
<th>{table header 2}</th>
</tr>
<tr>
<td>{table content 1}</td>
<td>{table content 2}</td>
</tr>
</table>
[tr]
[td]{table content 1}[/td]
[td]{table content 2}[/td]
[/tr]
## Math and Mathblock
Math and Mathblock designate TeX-syntax mathematical formulae to be rendered by the application. Math is for inline code; Mathblock is a block element. Math and Mathblock ignore formatting and BBCode tags.
#### Tag:
[math]{TeX code}[/math]
[mathblock]{TeX code}[/mathblock]
#### Yields:
<span class="math_container">{TeX code}</span>
<div class="math_container">{TeXCode}</div>
## Embed
Embed embeds content from other sources. This should be handled by the end application.
#### Tag:
[embed]{content address}[/embed]
#### Yields:
<div class="embed" data-content="{content address}"></div>
## Pre-Line
Preserves linebreaks as-written.
#### Tag:
{text content}\n\n{more text content}
#### Yields:
{text content}\n\n{more text content}
## Indent
Indents passages of text. Can take an optional argument for the level of indentation, up to four levels deep.
#### Tag:
[indent]{text content}[/indent]
[indent=4]{text content}[/indent]
#### Yields:
<div class="indent-1">{text content}</div>
<div class="indent-4">{text content}</div>
## Horizontal Rule
Horizontal Rule is a void tag that inserts a horizontal rule.
#### Tag:
[hr]
#### Yields:
<hr>