Improvements
The most notable improvements are scrollable code and image blocks. If images go beyond a certain width or height, the container div tag holding them transforms into a scrollable block. This has the advantage that REALLY BIG pictures no longer cause you to have to scroll horizontally (or vertically) all that much in order to read the thread. Since this is dedicated to a game forum, it makes sense to have this feature as screenshots are likely to be large, require a LOT of scrolling, and can significantly reduce the usability of the forum in such a thread. (I believe Jakob Neilsen, a fairly well-known usability expert, wrote a piece on this. I'm not too sure.) The same applies to [ignore]
- Code: Select all
Note: Scrolling behavior doesn't really work correctly in Internet Explorer due to its really crappy support of CSS2. Right now, I'm using the next best possible workaround. If anyone has a better idea of handling scrolling divs in CSS, I'd be happy to implement it.
Another significant change over the default phpBB parser is with regards to URL handling. By default, when you'd copy and paste a URI into the text field, it would be linked without question. Rather lengthy URLs would pose the same problem as wide images. After posting a lengthy URL, horizontal scrolling would render the thread almost unreadable. Piki solves this problem by breaking apart the URL into a leading and trailing section, joining the two with an ellipsis (that's the "..." character group you sometimes see in writing). It has another mode for URL splitting that's used on Slashdot wherein a space (" ") is inserted every X characters. I don't have this mode enabled since I think it can be aesthetically disruptive.
URI handling is also improved in that any links will be appended with the "real" domain name of the link. For instance, you might see something like the follow: [ignore]http://example.com/ [example.com][/ignore]. The domain name in brackets is the "real" domain name of the link. That prohibits someone from linking to a resource in order to disguise it, such as: [ignore]http://somebankingsite.dom[/ignore]. In this particular example, the "real" domain would be appended in brackets, rendering the link to look something like: [ignore]http://somebankingsite.dom [evildomain.com][/ignore]. As you can see, the visual indicator that the link points to an unexpected domain can be rather helpful. This should also reduce the likelihood that someone could link to, for example, a purported "fluffy bunny" only to wind up pointing to something that might be better left unseen.
There's also an "inline code" feature for use whenever you might need to put a [icode]monospace font[/icode] inside of a block of text. I don't really see much utility for this feature here.
Other improvements are mostly limited to the behavioral pattern of various formatting tags. [ignore]
- Code: Select all
Additions
There are several new things that have been added to Piki, including the ability to ignore formatting blocks, anchor tags, captions, and the like. Piki also supports wiki-style formatting something like MediaWiki, though with minor changes. The following is a fairly complete list of syntax structures that are now legal:
Piki supports Wiki-style formatting for links, rendering, etc. The formatting style is somewhat like Mediawiki of Wikipedia fame. Here's an example:
'''Bold''': [ignore]**Bold**[/ignore]
'''Code/monospace block''': [ignore]@@Code block@@[/ignore]
'''Colored Text''': [ignore]#red#Colored Text##[/ignore]
'''Colored Text 2''': [ignore]##800000#Colored Text 2##[/ignore]
'''Custom Heading''': [ignore]=1=Custom Heading==[/ignore]
'''Default Heading''': [ignore]==Default Heading==[/ignore]
'''Emphasis''': [ignore]""Emphasis""[/ignore]
'''Horizontal Rule''': [ignore]----[/ignore]
'''Italics''': [ignore]''Italics''[/ignore]
'''Link to Local Resource (requires callback)''': [ignore][[local:some/local/url Sensible, descriptive name]][/ignore]
'''Preformatted text block''': [ignore]{{{ preformatted text }}}[/ignore]
'''Strike-through''': [ignore]---Strike-through---[/ignore]
'''Strong''': [ignore]'''Strong'''[/ignore]
'''Subscript''': [ignore],,Subscript,,[/ignore]
'''Superscript''': [ignore]^^Superscript^^[/ignore]
'''URL linking''': [ignore][[http://example.com Sensible, descriptive name]][/ignore]
'''Underline''': [ignore]__Underline__[/ignore]
Piki also supports standard phpBB-style BBCode tags, including a few new ones that might be of interest:
Acronyms (syntax is REVERSE that of HTML): [ignore][acronym="LOL"]Laughing Out Loud[/acronym][/ignore]
Anchor: [ignore][anchor="Name"]Create Anchor "Name"[/anchor][/ignore]
Bold: [ignore]Bold[/ignore]
Caption: [ignore][caption="Caption Text"]Object to caption[/caption][/ignore]
Cite (citation of a work): [ignore][cite]Cite[/cite][/ignore]
Colored Text: [ignore][color="red"]Colored Text[/color][/ignore]
Emphasis: [ignore][em]Emphasis[/em][/ignore]
Header sizes 1-6: [ignore][header="2"]Header Size 2[/header][/ignore]
Horizontal Rule: [ignore][hr][/ignore]
Inline code (may have a different prevailing style than [monospace]): [ignore][icode]Example code.[/icode][/ignore]
Italics: [ignore]Italics[/ignore]
Multi-line code: [ignore]
- Code: Select all
In-line code
Pre-formatted text: [ignore][pre]Pre-formatted text[/pre][/ignore]
Resize Text: [ignore][size="10"]Resize Text[/size][/ignore]
Resize Text (manual): [ignore][size="10pt"]Resize Text[/size][/ignore]
Strike-through: [ignore][strike]Strike-through[/strike][/ignore]
Strong: [ignore][strong]Strong[/strong][/ignore]
Subscript: [ignore][sub]Subscript[/sub][/ignore]
Superscript: [ignore][sup]Superscript[/sup][/ignore]
URL linking: [ignore][url="http://example.com"]Sensible URL name[/url][/ignore]
Underline: [ignore]Underline[/ignore]
You can also disable processing of formatting tags by using {ignore}[ignore][/ignore]{/ignore} tags. For example: [ignore]Ignored http://example.com/ formatting.[/ignore]. Perhaps some of the more useful ones are [ignore][strike][/ignore] and so forth. There are some other improvements and additions made that the examples (above) don't fully describe. But, for the purpose of the 'goon forums, I think this is a relatively complete list that should cover some of the new additions.
I'll be updating the editor with a few new buttons, too, to make things a bit easier. This might be helpful to Turus on our policy page as well.
HTML Stripping
By default, all HTML is stripped. Right now, only a few tags are allowed (specifically the list-string is "b,code,i,u,pre,a,img,sub,sup,span,strike,hr"). I might alter this slightly, though, since I think all the useful tags are probably already covered here. HTML tags are also sanitized, meaning that attempts to override styles, add JavaScript calls, and so forth are removed. As will all release candidate software, this feature might not be perfect. But... it does a pretty respectable job.
Bugs
Piki is still in the release candidate phase for version 0.1. This means that there are bound to be bugs, and the best way to work them out is to use it. Most bugs will probably be due to browser quirks or my rather poor understanding of CSS, but in the case it's due to a Piki behavior, let me know.
