Advanced formating with BB codes -- a refference · 1:48am Aug 19th, 2012
'Advanced' formatting on this site is accomplished using 'BB Code'. If you've used the formatting buttons at the top of a comment box (or blog post, or I assume a story too), then you've already meet them. This is just a list of all the ones supported.
I have to fake out the tags or it'll format them, so all the tags shown on the list will be shown as \[demo\] rather than as [demo].
UPDATE: A BBCode guide has been added to linked from the FAQ (not mine, sadly but not surprisingly). You can find it here. It has more details about color, and more details about BBCode itself.
The basics:
Bold text with \[b\]
Italicize text with \[i\]
Underline text with \[u\]
Those all nest, so you can underline, bold and italicize text if you want.
Those can all be done with the buttons.
Most tags need to be 'closed', that is, where you want your [demo] to stop having effect, you need to add [/demo]. If you normally type them in by hand, get in the habit of doing this.
Insert a horizontal line, like the one at the top, with \[hr\]. This tag doesn't need to be closed, unlike a lot of the others.
You can cross (or strike) text out with \[s\]. This now has a button, it's the one with an 'S' with a line through it.
Text can be centered, like here, with the \[center\] tag.
Or,
it can be right-aligned, that is, pushed all the way over to the right side, with \[right\].
You can also
do this to only part of a line,
but it breaks the line up
and tends to look crappy.
Unless, of course, that effect is exactly what you're after. Which it might be, if you're actually writing poetry.
Sidebars
If you don't want to center text or use the default, you can also make sidebar thingies with \[right_insert\] (for right-side sidebars, like this one) or \[left_insert\] (for left-side sidebars). Make sure you don't put them at the bottom of the page, though, because the like to screw with the formatting. Make sure you close them, the same way as you close any of the others.
No, really. Make damn certain you close them. Otherwise, they really fuck with the page. If you don't believe me, look here. Password is moosewood.
Small caps can be made with \[smcaps\]
You can also mark spoilers with \[spoiler\]
Font size can be changed -- to use with the RCV, for example -- with \[size=#em\]. Size=1em would be equal to normal-size text, but you can use size=0.5, size=1.36, and stuff like that. This is great, because now you can make text bigger or smaller, instead of always being one size, which the old \[size=##\] way would do. Close with a simple \[/size\]
You can add color to text with the \[color\='colorname'\] tag. Or, if you want a really particular color, you can use its 'hex value'--a short jumble of numbers and letters that looks kinda like '#ea80b0'--instead of a name. You just close those with \[/color\]. There's a button for this, it's the one that looks like a color wheel.
Links are made with the \[url\='location'\] tag. You do need to include the http:// in the location. Similar to \[color\], these are closed with \[/url\]. The button for this one looks like a short chain.
On the topic of links, if you're linking to something on FIMFiction there's a better way to do it. Rather than using the \[url\='location'\] tag, use the \[site_url\='location'\] tag, and delete the 'fimfiction.net' part and everything before it of the location.
What's the benefit of this? Well, this link will take you to Wanderer D's userpage. So will this one. BUT, they take you to different versions of it. One will take you to the mobile site, and one will take you to the www site and encrypt the connection. This isn't very good, since you probably aren't logged on to both, and if you're on your phone or something you can't use the www site.
This link, however, which was made using the \[site_url\='location\] tag instead, will always take you to the same version (mobile or regular) that you're using. (Although the user page still won't look very good on a phone.)
Just close this with \[/site_url\]
Embed images with the \[img\='image location'\] tag. The button for this looks like little-bitty picture.
You can embed youtube videos as well. Check it out:
The tag for this is just \[youtube\='video link'\]
You can create block-quotes with the \[quote\] tag. Quote stuff the same way you would bold it. Example:
This is some quoted text.
On some sites, you can put quote attributes. Those would look like \[quote\='attributes'\]. I have not determined if those work here, use at your own risk.
There's also a \[page_break\] tag. I can't really demonstrate in the post, but if you find this post on my blog page---way in the back, possibly near the bottom--you'll discover that only the first part, up to the line, shows up on that page. That's because right below the line is a \[page_break\] tag. Use carefully, it only works the first time.
At present, that's all the tags I know of. If I find more, I'll add them, but I doubt there will be.
Why this? I like being helpful. Granted, sometimes I get a bit pretentious about it, as in my Searching the read later post. But if people find it useful, then good!
Hello person who just started following me. Nice post, that's really helpful, I'll be bookmarking it. I have a new tag for you: \[page_break\]. If you put it in a blog post, fimfiction only displays the content above the tag in the preview. page_break isn't documented anywhere as far as I know, so I actually had to ask Wanderer D to learn this secret.
416633 Hello!
Glad you found it helpful. You didn't find it pretentious at all, I hope? I worry about that.
That's a neat tag. I wonder if it works in story descriptions? Thanks, I'll add it.
Yeah, a number of these don't have any actual documentation. Heck, some that have buttons now didn't back when I first made this. It's in need of an update.
427490
Why would it be pretentious? It's a useful guide. It's a shame there isn't really something like this in a move visible place, such as the site FAQ.
Spot test!
[left]This is left-aligned text.[/left]
This is centered text.
I hope this is right-aligned text.
EDIT: Alignment option are \[center\] and [default].
Last updated on 12/19/2012
Changelog:
- added text centering
- added \[site_url\] tag
- added youtube embeds
- added \[page_break\] tag
Update 1/19/2013:
Added \[spoiler\] tags
attempted 'relative' font sizing. (That would've looked like [font=+8]) It didn't work.
Update 2/21/2013: 'strike' now uses \[s\] rather than \[strike\]
431396
Actually, there is something in the FAQ, under Comments --> How Does BBCode Work. It links to a post in The Writer's Group (and was the implied insult in that name / apostrophe use intentional or accidental, I wonder). In any case, you can find the post here.
The big one you two seemed to have missed out on, and mind you I've never seen ANYONE but me use this one, is \[left_insert\] (and of course its sibling \[right_insert\]). I don't want to give too much away, but (1) these things can seriously screw up page formatting (or at least they could before the update, and given that no one uses them, I can't imagine that having been fixed unless by accident) and (2) I've got some plans in mind for those things. Big plans.
House of Leaves plans.
Nonetheless, this is still awesome. I have a chapter that will never be published of a fic that hasn't yet been where I've done nothing but play around with the formatting tags so I can reference them and use them as necessary.
Right insert test.
Left insert test.
929981 Fascinating, thanks for the tip. I'm pretty sure (not absolutely sure, but at least sure enough to talk about it) that that guide wasn't around when I first created this post; or at least it wasn't mentioned in the FAQ. I'll add a link to the top of the post, though.
about:sidebars
Are you sure the right_insert/left_insert tags aren't supposed to do that? They look like they're designed for inserting sidebars to me. Regardless, I may have a new way to go about doing footnotes...
Never published and just for playing around, huh? That's pretty much the point of this blog, I'm just doing it publicly so I can share the knowledge more easily.
...
i.imgur.com/j5Q7DVw.png
Okay, you're right about screwing up the formating.
Update 3/22/2013:
- Added link to 'official' BBCode guide (the one linked in the FAQ)
- Added "sidebars" in the form of the \[right_insert\]/\[left_insert\] tags
- Added note about not closing the \[hr\] tag
Update 2014-01-11:
- Added discovery of the \[right\] tag
- Updated \[size\] tag with new(-ish), recommended relative size system
- Changed description of the link button, to match the current button
- Added mention of color values to the color section
- Added notes on closing tags
Nice! "right_insert" is what you meant when you said "aside box"?
1709753
"Aside box" were your words, from the first time I annoyed you by not telling you how I did it, but yes. I think a 'more proper' term for this kind of thing is 'sidebar', but I'm not the one programing the site, so :ppshrug:
You may notice, they also come in left_insert.
Also, in the comment where I'm playing around with the insert boxes to test them, I went <right insert> <left insert> <main body text>. This may be useful.
Wow old blog is old. I used formatting to great effect in this story: http://www.fimfiction.net/story/202903/behind-blue-eyes
I also used nested quotes in my story "Stone Onion" for a cool effect. Have a great day!
Too bad that you cannot do list BBC on this site