Using BBCodes - ΩJr. Publizjr Creates Web Pages

The contents of Publizjr web pages can be written using any text editor, after which they must be uploaded to the web site in order to be visible to the public. On MS Windows systems, Notepad++ is a useful free editor, which lets us save the text files in UTF-8 character encoding, with Unix line endings. The built-in MS Notepad is incapable of this feat.

Notepad++ and similar text editors do not provide a way to add text styling to Publizjr web pages. In order to add it anyway, Publizjr allows content editors to add BBCodes to their texts. The Publizjr Generator templates parse these BBCodes, and turn them into regular web mark-up (usually HTML).

By default, BBCodes are allowed in the page body text only. If any of the other texts contain BBCodes, they will not be turned into regular mark-up. Chances are, they will be removed.

To allow BBCodes, the webmaster must install a BBCode parser. The default parser for Publizjr (an adaptation of the one by Louai Munajim) is a fairly simple script that performs a quick replacement. Instructions can be found in the Installation Manual.

General Usage

Much like web and xml mark-up, BBCodes start with a start tag before the text to style, and end with an end tag thereafter. Start a BBCode with a left-hand square bracket [, add the code, then close it with a right-hand square bracket ]. An end tag sports a slash / immediately after the [.

A space inside the square brackets prevents that code from being replaced. This is useful for examples. The example below shows how this works:
[ i ] i is for italics [ / i ].
Without spaces inside the tags, it has the following result:
i is for italics .

Whether or not a space is added around a tag is up to the text and the editor - it serves no mark-up purpose.

Mismatching start and end tags or omitting end tags is allowed and will result in odd formatting.

Making texts Bold

Bolded texts like the above heading are useful for headings. Bold texts are shown in the text size defined by the stylist, depending on the surrounding texts and mark-up.

Example:
[ b ]Making texts Bold[ / b ]
You can double up and triple up the b-tags. A double b-tag will result in an H3 html tag, and a triple b-tag will result in an H2-html tag. This way you can create bigger headings (H3 is larger than regular text, H2 is even larger).

Making texts Small

Small texts are useful for non-essential remarks. Small texts are shown in a smaller text size defined by the stylist, depending on the surrounding texts and mark-up.

Example:
Making texts [ small ]smaller[ / small ] than their surroundings.
This has the following effect after omitting the spaces inside the square brackets:

Making texts smaller than their surroundings.

Changing text size explicitely

Making text bold and small has an implicit, relative effect on the text size. If you want more control over the text size, you can use the [ size ] tag.

Sample coding:

[ size="1cm" ]Size = 1cm[ / size ]
[ size="20pt" ]Size = 20pt[ / size ]
[ size="3mm" ]Size = 3mm[ / size ]

Which results in this:
Size = 1cm
Size = 20pt
Size = 3mm
The size value may contain any font-size value allowed by the CSS specifications.

We advise you to avoid using these, and choose the [ b ] tags, instead, unless you have a very good reason. If you choose to use the [ size ] tag, test its effect well in multiple devices (desktop, laptop, tablet, smartphone, etc.).

Underlining text

Underlining text will make people think they see a hyperlink, and thus should be used with care.

Example:
Making texts [ u ]have an underline[ / u ].
Leave out the spaces to get this:
Making texts have an underline.

Combining this with b and i should prove harmless.

Adding hyperlinks

What would an internet be without hyperlinks? To make hyperlinks we apply the url BBCode, and add a web address to the opening tag, placing that address in quotes. Any kind of web address can be used.

Example:
The [ url="http://www.omegajunior.net/" ] OmegaJunior Consultancy [ / url ].
Without the spaces this results in:
The OmegaJunior Consultancy.

Ideally, a visitor recognises hyperlinks by an underline. This is why you should not underline text that contains no hyperlink. Lately, a trend has arisen that makes visitors hunt for hyperlinks. Which of these effect will happen, depends on the stylist.

We have also seen that some browsers fail to show an underline for hyperlinks even though instructed to show it. In those cases, adding a nested u (underline) BBCode may help.

Note: Publizjr web pages are shown by a template that lives outside the page's folder. So to reference a source inside the page's folder, add its name to the web address.

Adding an E-Mail Link

Though sometimes scorned for making life easy for address scrapers (who sell addresses to spammers), adding an e-mail address link can be a good way to let people know how to contact you. An e-mail address link can be added in the following way:

Mail me at [ mail = "publizjr @ omegajunior . net" ] "publizjr at omegajunior dot net" [ / mail ].
which renders this, if we remove all the spaces within the square brackets:

Mail me at "publizjr at omegajunior dot net".

Mind you that our CDN (Cloudflare) has a built-in protection against address scraping that prevents you from seeing the e-mail addresses unless you have javascript activated.

Adding images

Spice up the long texts, add some examples: we need images. BBCodes allow an img tag. In between the start and end tag, an image's web address must be placed. What browsers do with any other kind of address is up to them.

Example:
An [ img ] http://www.omegajunior.net/im1/rss-zjr-32.png [ / img ] RSS image.
Omit the spaces and it results in:
An RSS image.

With the img tag, spaces inside the start and end tag probably leads to display failure. So omit them.

Note: Publizjr web pages are shown by a template that lives outside the page's folder. So to reference a source inside the page's folder, add its name to the web address.

If you want the text to stop above and resume below the image, just add new lines.

Moving images and texts around

This is by no means an advanced layout mechanism, but it does allow you to say whether a block of text or an image should be placed on the left, in the middle, or on the right of the web page.

Sample coding:
[ left ]Left[ / left ][ center ]Middle[ / center ][ right ]Right[ / right ]
which allows the following:
which can make a mess of any web page. Notice that each of these tags adds its own empty line after themselves.

Combining images and hyperlinks

Often we want a visitor to use the image as a button, and have some action happen when they activate that button. In BBCodes, this requires nesting an img tag inside an url tag.

Example:
[ url="/im1/lookingglass-new-big.png" ][ img ]/im1/lookingglass.png[ / img ] Looking glass, bigger version (13KB).[ / url ]
Which results in:
Looking glass, bigger version (13KB).

Making lists

Simple lists without numbering can be achieved like this:
[ list ] [ * ]First item;
[ * ]Second item;
[ * ]Etc.[ / list ]
which, after removing the spaces, gets turned into this:

• First item;
  
• Second item;
  
• Etc.

By default, the Publizjr lists show bullets rather than numbers.

If you add a new line before the list end tag, it will be translated into a <br> HTML break, resulting in a visible new line. Thus, put the list end tag on the same line as the last list item.

Definition Lists

These lists contain pairs of words or phrases followed by their description. Usually, the described words appear bolded, whereas the description is italicised and indented. Whether that happens in your web page depends on the style set in the CSS.

Example:
[ dl ][ dt ]Definition Title[ / dt ][ dd ]Description[ / dd ]
[ dt ]2nd Title[ / dt ][ dd ]2nd Description[ / dd ][ / dl ]
Leave out the spaces inside the square brackets to yield this result:

Definition Title

Description

2nd Title

2nd Description

And like many other block elements, the [ dl ] tag adds its own empty line after itself.

Making text look like example coding

The examples above all look like example coding. The editor may add actual code, or any other kind of text. What the example coding block will look like, depends on the stylist.

The Publizjr parser should be able to display any code as web mark-up, except for BBCode itself. To show BBCode, add spaces inside the square brackets.

Example:
[ code ]This is example code.[ / code ]
Content editors should know that a Publizjr code block usually adds its own line-break.

Similarly, it is possible to add a [ pre ] tag pair inside the [ code ] tag pair. "Pre" is short for "preformatted", which means that the text is shown with the spaces, tabs, and hard returns in the way the editor wrote them. This is particularly useful for programmers who wish to preserve the formatting of their code samples. It also allows for easy mark-up of tables.

For instance, the following tabular display is set in [ pre ]:

name   red  green blue

----------------------

red    FF   00    00

green  00   FF    00

blue   00   00    FF

Notice how the font changed to one with a fixed-width letter? That is to help preserve the formatting.

What BBCodes do not do

BBCodes are chosen because they provide a safe, limited set of styling commands. Therefore, a lot of things cannot be done with BBCodes in Publizjr. Just compare the list above with all possible HTML elements allowed in HTML5, for instance.

Then again, not everything in web mark-up is equally useful for content editors. Thus, here is just a short overview of useful styling that did not make it into Publizjr BBCodes:

• Audio, video, and plug-ins: use custom-crafted templates.
  
• iFrames: use custom-made templates.
  
• Change styling: ask a front-end developer or stylist.