New BBCode (Pardon Our Dust Beta Version)
09-11-2018, 01:59 AM
As some folks may know, part of the recent forum overhaul involved adding some shiny new BBCode Formatting Tags and features. They're all coded up for the most part, but we'll be rolling out new features a bit at a time, to make sure they're in good working order. If you want to make use of 'em, keep your eyes on this thread!
NOTE 1: The rich-text editor doesn't currently recognize these tags, and gets confused parsing them (especially when not in Source Mode). If you plan to use them, I'd suggest editing your posts in an external notepad and copypasting them in to preview, since it has a bad habit of eating posts sometimes. At very least, edit in Source Mode by clicking on the page button on the editor (you can also set Source Mode to be default in your user settings). And keep backups as you work, because the editor might eat posts because of this. Also, keep an eye out for the editor auto-replacing tags with tags you don't want. Hoping to get tags fixed in the editor ASAP, but it's a big fix. Bear with it for now, please. It'll get better.
NOTE 2: Apologies for any broken or borked features. Bug will need to be ironed out, old tags may be messed up for a bit, and it's possible that some of these tags may change how they look/work in the next few weeks. I'll do my best not to break anything if they get redesigned extensively. Also, if you have any trouble with these tags, please leave a note here
Expanded Text Styling:
First of all, here are some returning tags, which have been enhanced with handy new features. Also, anything given in all caps is a parameter; for example COLOR is a hex color code or name, while ### represents a number up to 3 digits long. If you have any questions about how these are used, please ask!
Neutral outlines help [outline=#808080][c=yellow]Light Text[/c][/outline] show on light bgs, and [outline=#808080][c=purple]Dark Text[/c][/outline] show on dark bgs!
New Fonts:
We're test-driving a series of new fonts. These might get pared down a bit in time, and others are still to be added. They're applied with [noparse]TEXT[/noparse] as before. The full list of potential new fonts can be found here!
[fixed][3x1]
Acme
Audiowide
Caveat Brush
Creepster
Dancing Script
Delius Swash Caps
Electrolize
Flavors
Glass Antiqua
Grand Hotel
Indie Flower
Kelly Slab
[|]
Lato
Lobster Two
MedievalSharp
Mina
Monoton
Montserrat Alternates
Mystery Quest
Nanum Pen Script
Nova Square
Open Sans
Oregano
Pacifico
[|]
Poiret One
Princess Sofia
Redressed
Righteous
Roboto
Share
Special Elite
Sunshiney
Ubuntu Mono
Unica One
Unifont
VT323
[/3x1][/fixed]
Enhanced Background Tags:
Backgrounds have several new features! They now expand to cover all of the content they're placed around, allowing you to put background colors behind images, spoilers, code blocks, and more! In addition, there are new image backgrounds, which allow you to put stretched or tiled images behind your content, to create graphical text elements and such.
This case used "style=tile-bottom" to tile the fire only along the bottom of the text. Also, the [noparse][bg][/noparse] tag is 2 lines of text tall, so the fire can extend beyond the top of the text.
I lit this text on fire for you. I hope you like it.
Box Tags:
A new tag for organizing and styling content. By default, it draws a box that shrinks around whatever's inside it, and fits in the same line as other content, making highly customizable containers similar to quote or code boxes.[noparse][box]CONTENT[/box][/noparse] is the simplest form of box tag.
[box]Behold!
I am a normal box![/box] And I'm some text that's in the same line as the box, but I figure I'll just wrap around to the next line or so when we're done running parallel? Like, I'm lined up with the bottom, not the top of the box, so... this is just where I is, I guess.
Box tags can also be given color and border size parameters, like [noparse][box=grey border=2]CONTENT[/box][/noparse]. NOTE: If you want to make a box invisible, just use the color "transparent"; this is a color value that works on other tags too, if you didn't know!
[box=#F69 border=4]I'm a pink box that's given a border size of 4 pixels! :O[/box]
Normally, boxes shrink to fit their content, but if given a size they will constrain their content to fit within that size instead. Much like images, boxes can be resized by [noparse][box width=### height=###]CONTENT[/box][/noparse] parameters. You can also use size=###x### to define both dimensions at once, or use x=### and y=###.
[box width=250 height=100]I am a box that's been told to be 250 pixels wide by 100 pixels tall. When there's too much content like text or big images, I get scrollbars all up in my business, which lets users scan around. Works horizontally or vertically, though only goes horizontal if it's gotta. Images that are too wide, for example.[/box]
When giving a box a width=full or size=full parameter, the box is set to be full-width, and stretch to fill whatever content it's inside.
[box width=full]My text is much smaller than full width![/box]
Also note that tags like [noparse][url] or [bg][/noparse] affect all the content inside them, so you can make these apply to the entire box, and all it's contents. It might not seem like much on it's own, but when combined together, this tag can create some fun content wrappers, like this boy right here.
[box=#0CF][bg=#069][box=#fff]What is Lorem Ipsum?[/box] [box=#0CF]Why should I care?[/box] [box=#0CF]Original Text[/box] [box=#0CF]Quit[/box]
[box=transparent height=200]> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.[/box][/box][/bg]
And, for what might be my favorite feature, the box tag can also be given an image to turn into a border for it. This can create textboxes, faux UI elements, buttons, word bubbles, or other graphical text elements. [noparse][box=URL]CONTENT[/box][/noparse] will chop up the image URL you give it into 3x3 equal pieces, and use it to create the edges, corners, and background for a graphical box!
![[Image: dNiP06K.png]](https://i.imgur.com/dNiP06K.png)
<-- This is the raw image, which gets chopped up into 3x3 tiles...
[box=https://i.imgur.com/dNiP06K.png border=32]...and this is the box that gets drawn using the edges, corners, and background tiles made from it. And if you feel really sassy, you can make it a gif, and it'll be animated.[/box]
NOTE: You can still give it a width=###, height=###, and/or border=### like above too, which looks like [noparse][box=URL width=### height=### border=###]CONTENT[/box][/noparse]. Since the border parameter resizes the border thickness of the image, if it's important to match the scale of the raw image as closely as possible, the border=### should be equal to 1/3 of the image size, or the width of one of the 3x3 tiles.
Layout Tags:
Layouts are a powerful new tag for arranging content. Think of them like invisible tables, with rows and columns. They can be used to make grids, stick content that can't normally be side-by-side next to each other, or even make a boring old data table. NOTE: For now, layouts can be at most 5x5 cells. Bigger layouts coming soon.
Like lists, Layouts are built with multiple tags:
Example of a 3-by-3 layout:
Layouts can be used to do all sorts of things, like create textboxes that resize to fit their content...
[2x1][img width=96]https://i.imgur.com/MKwOx6i.png[/img] [|]
Hi there. It's me, famous game director Todd Howard. We here at Bethesda Game Studios have heard what you've been saying, and I'm very excited to announce that we are finally porting Skyrim to Eagle Time. Soon, you'll be able to share interactive text and graphics-based adventures featuring all your favorite vikings, lizards, and wizards in a living, breathing message board environment.
[/2x1]
...put normally full-width content like quotes and spoilers side-by-side in even-sized [noparse][fixed][/noparse] tables...
[fixed][2x1]
...and whatever else you crazy kids get up to these days. I'm not your boss.
Web Embed Tags:
PLEASE USE RESPONSIBLY!!! This is a test-drive of a new feature; allowing users to embed an external webpage inside a frame in their post. This is intended for use in creating interactive content, minigames, or animations to go with adventures using HTML, to fill the sort of role older content like Flash used to. For now, you'll need an external place to host HTML; if you don't have a server, places like free Github Pages work well too. If it's useful and people are good about it, we may be able to make hosting interactive content like this easier in the future. NOTE: It's equivalent to forcing someone to automatically open a new tab on their browser, so don't abuse it or overdo it!
NOTE 1: The rich-text editor doesn't currently recognize these tags, and gets confused parsing them (especially when not in Source Mode). If you plan to use them, I'd suggest editing your posts in an external notepad and copypasting them in to preview, since it has a bad habit of eating posts sometimes. At very least, edit in Source Mode by clicking on the page button on the editor (you can also set Source Mode to be default in your user settings). And keep backups as you work, because the editor might eat posts because of this. Also, keep an eye out for the editor auto-replacing tags with tags you don't want. Hoping to get tags fixed in the editor ASAP, but it's a big fix. Bear with it for now, please. It'll get better.
NOTE 2: Apologies for any broken or borked features. Bug will need to be ironed out, old tags may be messed up for a bit, and it's possible that some of these tags may change how they look/work in the next few weeks. I'll do my best not to break anything if they get redesigned extensively. Also, if you have any trouble with these tags, please leave a note here
Expanded Text Styling:
First of all, here are some returning tags, which have been enhanced with handy new features. Also, anything given in all caps is a parameter; for example COLOR is a hex color code or name, while ### represents a number up to 3 digits long. If you have any questions about how these are used, please ask!
- Overlines: [noparse]Text can now have overlines drawn using [o]TEXT[/o].[/noparse]
- Colored Text Lines: [noparse]Underline, Strike-through, and Overline tags can now have colors, using [u=COLOR], [s=COLOR], or [o=COLOR] respectively. NOTE: These seem to be kinda tempermental, and caused this post to be eaten a few times when editing, so keep backups when using them for now![/noparse]
- Color Shorthand: [noparse][c=COLOR]TEXT[/c] is a compact alternative to writing color tags for text.[/noparse]
- Outlining: [noparse][outline=COLOR]TEXT[/outline] will draw a 1-pixel outline around text of a given color.[/noparse]
Neutral outlines help [outline=#808080][c=yellow]Light Text[/c][/outline] show on light bgs, and [outline=#808080][c=purple]Dark Text[/c][/outline] show on dark bgs!
New Fonts:
We're test-driving a series of new fonts. These might get pared down a bit in time, and others are still to be added. They're applied with [noparse]TEXT[/noparse] as before. The full list of potential new fonts can be found here!
[fixed][3x1]
Acme
Audiowide
Caveat Brush
Creepster
Dancing Script
Delius Swash Caps
Electrolize
Flavors
Glass Antiqua
Grand Hotel
Indie Flower
Kelly Slab
[|]
Lato
Lobster Two
MedievalSharp
Mina
Monoton
Montserrat Alternates
Mystery Quest
Nanum Pen Script
Nova Square
Open Sans
Oregano
Pacifico
[|]
Poiret One
Princess Sofia
Redressed
Righteous
Roboto
Share
Special Elite
Sunshiney
Ubuntu Mono
Unica One
Unifont
VT323
[/3x1][/fixed]
Enhanced Background Tags:
Backgrounds have several new features! They now expand to cover all of the content they're placed around, allowing you to put background colors behind images, spoilers, code blocks, and more! In addition, there are new image backgrounds, which allow you to put stretched or tiled images behind your content, to create graphical text elements and such.
- Classic: [noparse]CONTENT or CONTENT work as before. Both BG and Background should be interchangeable with all new tags too.[/noparse]
- Image Background: [noparse]Using CONTENT will apply the image at the URL as a stretched image in the background of the content.[/noparse]
- Tiling Image: [noparse]If you want the image to tile in the background, CONTENT will tile the image background instead of stretching it. You can also use "style=tile-x" and "style=tile-y" to limit image tiling to the X or Y direction only. Other valid styles are "tile-top", "tile-bottom", "tile-left", and "tile-right". These tile parallel to that edge.[/noparse]
- Resizing Tiles: [noparse]If you need to resize the tiles, CONTENT allows you to resize the dimensions manually, similar to images.[/noparse]
- Resizing Border Margins: [noparse]You can expand the background to be larger than the content it wraps around, using [bg border=###]CONTENT[/bg]. This works for images or color backgrounds, and expands the edge of the background by that many pixels. On the below image, it's used to extend the black background past the edge of the quote.[/noparse]
https://en.wikipedia.org/wiki/Dancing_baby Wrote:The Dancing Baby animation spread quickly on popular web forums, individual web sites, international e-mail, demo videos, commercials, and eventually mainstream television. Awareness of the baby most significantly increased when featured on CBS, CNN, and Fox's Ally McBeal comic drama series. The animation was shown on several episodes of Ally McBeal as a recurring hallucination, suggesting a metaphor for the ticking of Ally's biological clock. On that show, it was curiously accompanied by Blue Swede's cover of the B. J. Thomas song "Hooked on a Feeling." Various commercial advertisements presented the Dancing Baby animation to international markets continuing the mainstream media attention. This particular manifestation of the video, bound to the song, is widely distributed and referred to as the "Ugachaka (or Oogachaka) Baby."
This case used "style=tile-bottom" to tile the fire only along the bottom of the text. Also, the [noparse][bg][/noparse] tag is 2 lines of text tall, so the fire can extend beyond the top of the text.
I lit this text on fire for you. I hope you like it.
Box Tags:
A new tag for organizing and styling content. By default, it draws a box that shrinks around whatever's inside it, and fits in the same line as other content, making highly customizable containers similar to quote or code boxes.[noparse][box]CONTENT[/box][/noparse] is the simplest form of box tag.
[box]Behold!
I am a normal box![/box] And I'm some text that's in the same line as the box, but I figure I'll just wrap around to the next line or so when we're done running parallel? Like, I'm lined up with the bottom, not the top of the box, so... this is just where I is, I guess.
Box tags can also be given color and border size parameters, like [noparse][box=grey border=2]CONTENT[/box][/noparse]. NOTE: If you want to make a box invisible, just use the color "transparent"; this is a color value that works on other tags too, if you didn't know!
[box=#F69 border=4]I'm a pink box that's given a border size of 4 pixels! :O[/box]
Normally, boxes shrink to fit their content, but if given a size they will constrain their content to fit within that size instead. Much like images, boxes can be resized by [noparse][box width=### height=###]CONTENT[/box][/noparse] parameters. You can also use size=###x### to define both dimensions at once, or use x=### and y=###.
[box width=250 height=100]I am a box that's been told to be 250 pixels wide by 100 pixels tall. When there's too much content like text or big images, I get scrollbars all up in my business, which lets users scan around. Works horizontally or vertically, though only goes horizontal if it's gotta. Images that are too wide, for example.[/box]
When giving a box a width=full or size=full parameter, the box is set to be full-width, and stretch to fill whatever content it's inside.
[box width=full]My text is much smaller than full width![/box]
Also note that tags like [noparse][url] or [bg][/noparse] affect all the content inside them, so you can make these apply to the entire box, and all it's contents. It might not seem like much on it's own, but when combined together, this tag can create some fun content wrappers, like this boy right here.
[box=#0CF][bg=#069][box=#fff]What is Lorem Ipsum?[/box] [box=#0CF]Why should I care?[/box] [box=#0CF]Original Text[/box] [box=#0CF]Quit[/box]
[box=transparent height=200]> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.[/box][/box][/bg]
And, for what might be my favorite feature, the box tag can also be given an image to turn into a border for it. This can create textboxes, faux UI elements, buttons, word bubbles, or other graphical text elements. [noparse][box=URL]CONTENT[/box][/noparse] will chop up the image URL you give it into 3x3 equal pieces, and use it to create the edges, corners, and background for a graphical box!
<-- This is the raw image, which gets chopped up into 3x3 tiles...[box=https://i.imgur.com/dNiP06K.png border=32]...and this is the box that gets drawn using the edges, corners, and background tiles made from it. And if you feel really sassy, you can make it a gif, and it'll be animated.[/box]
NOTE: You can still give it a width=###, height=###, and/or border=### like above too, which looks like [noparse][box=URL width=### height=### border=###]CONTENT[/box][/noparse]. Since the border parameter resizes the border thickness of the image, if it's important to match the scale of the raw image as closely as possible, the border=### should be equal to 1/3 of the image size, or the width of one of the 3x3 tiles.
Layout Tags:
Layouts are a powerful new tag for arranging content. Think of them like invisible tables, with rows and columns. They can be used to make grids, stick content that can't normally be side-by-side next to each other, or even make a boring old data table. NOTE: For now, layouts can be at most 5x5 cells. Bigger layouts coming soon.
Like lists, Layouts are built with multiple tags:
- Layout Tags: [noparse]The [#x#]CONTENT[/#x#] tags are the outer tags that define a new layout, where # is the number of cells in the layout, horizontal by vertical. Currently handles layouts up to 5x5.[/noparse]
- New Column: [noparse]The [|] tag divides cells horizontally, marking a new cell in the column.[/noparse]
- New Row: [noparse]The [-] tag divides cells vertically, marking the start of a new row.[/noparse]
- Fixed Width: [noparse]Put a pair of [fixed][/fixed] tags outside any layout to make it Fixed Width; all cells will be equal width instead of shrinking to fit content, and are as wide as the page. (NOTE: These will probably be changed, since layouts will hopefully eventually get a width/style parameter. Keep that in mind when using them!).[/noparse]
Example of a 3-by-3 layout:
Code:
[3x3]
Cell 1A [|] Cell 2A [|] Cell 3A
[-]
Cell 1B [|] Cell 2B [|] Cell 3B
[-]
Cell 1C [|] Cell 2C [|] Cell 3C
[/3x3]Layouts can be used to do all sorts of things, like create textboxes that resize to fit their content...
[2x1][img width=96]https://i.imgur.com/MKwOx6i.png[/img] [|]
Hi there. It's me, famous game director Todd Howard. We here at Bethesda Game Studios have heard what you've been saying, and I'm very excited to announce that we are finally porting Skyrim to Eagle Time. Soon, you'll be able to share interactive text and graphics-based adventures featuring all your favorite vikings, lizards, and wizards in a living, breathing message board environment.
[/2x1]
...put normally full-width content like quotes and spoilers side-by-side in even-sized [noparse][fixed][/noparse] tables...
[fixed][2x1]
My Left Brain Wrote:Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs Dogs[|]
My Right Brain Wrote:Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats Cats[/2x1][/fixed]
...and whatever else you crazy kids get up to these days. I'm not your boss.
Web Embed Tags:
PLEASE USE RESPONSIBLY!!! This is a test-drive of a new feature; allowing users to embed an external webpage inside a frame in their post. This is intended for use in creating interactive content, minigames, or animations to go with adventures using HTML, to fill the sort of role older content like Flash used to. For now, you'll need an external place to host HTML; if you don't have a server, places like free Github Pages work well too. If it's useful and people are good about it, we may be able to make hosting interactive content like this easier in the future. NOTE: It's equivalent to forcing someone to automatically open a new tab on their browser, so don't abuse it or overdo it!
- Basic Embedded Webpage: [noparse][web=URL] or [web]URL[/web] will create a simple full-width frame to put the linked webpage into your post.[/noparse]
- Resized Page: [noparse]Use [web size=###x###]URL[/web], or [web width=### height=###] if you need the content frame to be locked to a specific size. As with images, you can omit either width=### or height=###, and the other will be calculated automatically.[/noparse]