15:02 ST
Reply
[UPDATE] Improvements to BBCode

Hi everyone,

We’ve just pushed an update to BBCode, which fixes a number of minor layout issues. The four most noticeable effects are:

1: Forum post spacing

If you look closely at posts at the moment, there is a slightly larger amount of space between the top of the message box and the beginning of the actual text if the post is short (that is, takes up less vertical space than the identity box with the forum avatar and username). This is particularly noticeable in short posts with long spoilers where opening and closing the spoiler makes the amount of space above the post contents change (which can also make the location of the spoiler-checkbox move up and down). This update will fix that issue.

2: Fixed some issues with lists

In HTML, the closing tag for list elements (i.e. the “</li>”) tag is optional. That is, while the version on the left is the standard method for encoding a list, the version on the right is also perfectly valid:

<ul>
<li>first</li>
<li>second</li>
</ul>

 

 

OR
<ul>
<li>first
<li>second
</ul>

And many of you do this with BBCode as well. However, until now our implementation of BBCode would convert

[ul]
[li]first
[li]second
[/ul]

 

into
<ul>
<li>first
<li>second
</li></li></ul>

which is invalid HTML, causing some display issues depending on how your browser decides to try to interpret it. This update fixes the problem.

3: Some niceties

This push will add some common typographic niceties. For example, it will convert double-dashes to em-dashes, three periods into ellipses, etc. Basically just some little things that make text look better.

4: Paragraph / block-element spacing

Consider the following input into a BBCode field (e.g. a forum post or pet profile, whatever):

Hello there I am a paragraph

And I am a new paragraph

Currently, every newline is converted into a linebreak, resulting in this:

Hello there I am a paragraph<br>
<br>
And I am a new paragraph

Besides, being semantically horrible and resulting in accessibility issues for screen-readers etc, this makes paragraph spacing ugly, since the gap between paragraphs is exactly the same height as a line of that paragraph. This update will result instead in paragraphs being correctly wrapped in HTML’s paragraph tags like so:

<p>Hello there I am a paragraph</p>
<p>And I am a new paragraph</p>

The upshot of this is a much more “natural” spacing between paragraphs, as well as other block-level elements (e.g. lists, quote-blocks, code-blocks, etc.), for which it is currently difficult to surround with reasonable spacing. It also means you no longer need to worry so much about what tags need to be on what lines to prevent extra blank lines appearing all over the place!

Please be aware that this particular effect may mess with some profile layouts if they rely on specific vertical distances, as it (slightly) alters the amount of vertical space that some elements create. So for example, if you have used a bunch of newlines to measure out a specific vertical distance on a post or profile, this distance will shrink somewhat. However, if you rely on this (e.g. to measure down to where pet profiles become full-page-width) then all you need to do to fix your profile is to add more spacing.


Generally speaking we try to make changes to BBCode as rarely as possible because it means people who rely on specific layouts need to go and edit their stuff. But while this last effect will temporarily mess up the layout of some profiles, the fix is easy, and the end result makes general written text more pleasant to read. I think in this case the benefits greatly outweigh the short-term inconvenience that some people may experience.

Sizing and spacing may be tweaked a little more over the next week or two to get things looking really good, but this should be comparatively minor. If you notice any BBCode elements not working correctly, please let me know :)

Posted 12/29/15, edited 12/29/15

Yay fixed issues! I’m kind of laughing over this though because the profile contest thing that happened a little while ago. The skeleton I set up/used did rely on vertical spacing somewhat, and the update broke it. So now there’s probably a bunch of mycenians who’ve used that who have broken bios now. xD

*wanders off to fix mine*

Posted 12/29/15
Please be aware that this particular effect may mess with some profile layouts if they rely on specific vertical distances.

haha… haha… ha…. *sweats*

edit: whOA THERE are quotes supposed to be this big now??

Posted 12/29/15, edited 12/29/15
baekhesten dear goodness no. Thanks for noticing o_O
Posted 12/29/15, edited 12/29/15

-checks profile- nope coding still works.

Thanks for the update glitch!

Posted 12/29/15

I’m down with all this, but just to make sure—there’s no way to simply add line breaks anymore?

edit: And by that I mean, more line breaks than just one in a row. Idek what I’m talking about anymore. Figured out a fix anyway!

Posted 12/29/15, edited 12/30/15
Oh nice!! This is gonna look much nicer, thanks!
Posted 12/31/15
Reply