Inline comment formatter

Last edited by JavaWoman:
Modified links pointing to docs server
Mon, 28 Jan 2008 00:11 UTC [diff]

See also: FormattingRules


I've modified formatters/wakka.php so as to recognize a new formatter for inline comments.
When adding inline comments, we used to adopt a combination of indents and note markup, which produces hardly readable discussions and frequent inconsistencies.

Syntax
The new InlineCommentFormatter introduces a simple syntax, similar to that of unordered lists.
To produce an inline comment use & preceded by one or more tabs (or ~).
To append a subcomment to an existing comment use the above syntax with an extra tab (or an extra ~) - much as you append a subitem to an existing list item.

~& Comment
~~& Subcomment
~~~& Subsubcomment

gives:



Example

Note:
To correctly display the following example you need to revert to the default wikka skin (TestSkin). Otherwise, you will just see an ordinary list.

Here's how it looks like:



Installation

This feature is part of WikkaWiki as of version 1.1.6.0. If you wish to apply it to an older version without upgrading to the latest version, follow these instructions:

1. Modify formatters/wakka.php

You first need to modify the wakka formatter in three different places.

A) original

        // indented text
        elseif (preg_match("/\n([\t,~]+)(-|([0-9,a-z,A-Z,ÄÖÜ,ßäöü]+)\))?(\n|$)/s", $thing, $matches))


A) modified
        // indented text
        elseif (preg_match("/\n([\t~]+)(-|&|([0-9a-zA-ZÄÖÜßäöü]+)\))?(\n|$)/s", $thing, $matches))


B) original
            elseif ($newIndentType == "-") { $opener = "<ul><li>"; $closer = "</li></ul>"; $li = 1; }
            else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }



B) modified
            elseif ($newIndentType == "-") { $opener = "<ul><li>"; $closer = "</li></ul>"; $li = 1; }
            elseif ($newIndentType == "&") { $opener = "<ul class=\"thread\"><li>"; $closer = "</li></ul>"; $li = 1; } #inline comments
            else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }



C) original

    "======|=====|====|===|==|".
    "\n([\t,~]+)(-|[0-9,a-z,A-Z]+\))?|".
    "\{\{.*?\}\}|".


C) modified

    "======|=====|====|===|==|".        # headings
    "\n([\t~]+)(-|&|[0-9a-zA-Z]+\))?|".         # indents and lists
    "\{\{.*?\}\}|".                             # actions



2 Add a new class to your stylesheet (default: css/wikka.css)

ul.thread {
    list-style-type: none;
    border-left: 2px #666 solid;
    padding-left: 10px;
    margin: 5px 0px;
}

ul.thread li {
    color: #333;
    font-size: 11px;
}


Suggestions for improving the inline comments style are welcome :)


Alternate styles

Here's a couple of ideas...

1. thin borders

ul.thread {
    list-style-type: none;
    border-left: 1px #666 solid;
    padding: 0px 5px;
    margin: 5px 0px;
}

ul.thread li {
    color: #333;
    font-size: 11px;
}


gives



2. graded thick borders

/* darker border for main comments */
ul.thread {
    list-style-type: none;
    border-left: 10px #BBB solid;
    padding: 0px 5px;
    margin: 5px 0px;
}

ul.thread li {
    color: #333;
    font-size: 11px;
}

/* lighter border for subcomments, subsubcomments etc. */
li ul.thread {
    border-left: 10px #DDD solid;
}


gives




3. layered sheets

ul.thread {
    list-style-type: none;
    border-left: 2px #666 solid;
    border-top: 2px #666 solid;
    padding: 0px 5px;
    margin: 5px 0px;
}

ul.thread li {
    color: #333;
    font-size: 11px;
}


gives



4. boxes

ul.thread {
    list-style-type: none;
    border: 2px #666 solid;
    padding: 0px 5px;
    margin: 5px 0px;
}

ul.thread li {
    color: #333;
    font-size: 11px;
}


gives



CategoryDevelopmentFormatters CategoryLayout
There are 5 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki