Initial Publication Date: April 10, 2006 (see revision history: 2 events)

More Serckit Tags

In addition to being able to control the spacing and size of text on the page through the formatting menu, there are number of square bracket tags that can be used to achieve other formatting effects:

[br clear] makes a line break that forces text to be below any preceeding material (useful for keeping text below, rather than next to, a narrow image).
The [pullquote] tag indicates the beginning of an extended 'aside' (providing useful information outside the normal flow of the text). The aside should be ended with a [end pullquote] tag. Note that [context] gives exactly the same results as [pullquote].
Similarly [bigfirstline] can be used at the start of a paragraph to cause the first line of the following text to be extra large--a handy visual effect for drawing folks into the start of a long stretch of text. As you might guess the paragraph you start this way should be ended with a [end bigfirstline]
If you need a special character like a ° or a ± you'll can either figure out how to type that character directly into Serckit or you can use the entity tag. In the later case you'll need to look up the cryptically named 'character entity code' in a table like this. Use the decimal code you find in this table in a tag like this [entity 177] to get the ± sign. A more complete but more cryptic list is also available.
You can obtain en dashes and em dashes by using either 2 or 3 consecutive hyphens. Learn more about using dashes appropriately.
You can make very small text (for captions and the like) with [small] and [end small] tags Or slightly larger text with [mediumsmall].
The [hidden 'text'] tag, and it's counter part [end hidden] are used to surround text that we'd like to have hidden except when the user explicitly wants to see it. It creates a single link labeled 'Show text' (where the word text is replaced with whatever 'text' you put between the single quotes in the starting tag). When the link is clicked it expands to reveal everything between the hidden tags as well as a link to hide the material again. You can optionally cause the word Show to be left off, the small 'twiddle' triangle to be left off, and also cause the text to be shown (but still hide-able) when the page first loads by including the omit_show, no_twiddle and show_at_start flags: [hidden 'Click Here' omit_show show_at_start no_twiddle]
You can also add a unique id number to a hidden tag --any 3 digit number will do as long as it isn't already used on a hidden tag within that page: [hidden 238 'text'] This allows the open/closed state to be remembered for a given users across a session (so that if they leave a page and come back it will have retained it's state. It also allows you to construct urls that point to a page with that hidden block already open. For example if your url is 'index.html' and the id you've chosen is '238' then the url:
index.html?expandhidden238=yes
Will lead people to that page with that particular hidden tag already set open.
The [fadebox 200] tag achieves a similar effect. When placed at the beginning of a section of content (the end of which should be marked with an [end] tag) it will cause only the first bit of the text show (limited to area 200 pixels high). The content below that will be faded out and a 'show more' button will be added which toggles the rest of the content into view. You can adjust how much of the content is initially visible by changing the '200' to a different number (height in pixels). This is useful for long sections of text where you want to show the lead-in text but not take up all the space for the for the full text.
The [definition 'text'] tag, and it's counter part [end definition ]allow you to create a bit of text (between the two tags) that pops-up when people hold their mouse over the 'text' in the initial tag. Useful for unobtrusively adding definitions of unfamiliar terms into the page.
The [lang 'es'] tag, and it's counter part [end lang ] should be used to surround sections of text that aren't in english. Use the two letter abbreviation to indicate the language used within the tags.
The [tooltip] tag allows you to create a pop-up box that displays arbitrary content. The simple form looks like: [tooltip] When you hover over this text [tooltipcontent]This content will be shown[end].While the default behavior is to activate the pop-up when the target content (whatever is between the initial tooltip tag and the tooltipcontent tag) is hovered over with the mouse, it's also possible to require a click of the mouse to the tooltip appear with [tooltip click]. If the tooltip content will contain elements that need to be interacted with (e.g. checkboxes) you'll need to add the 'interactive' flag to keep the tooltip from disappearing when clicked. You can also control how the tooltip is positioned using 'left', 'right', 'top' or 'bottom', and you can alter the width of the tooltip by indicating a width in pixels. The correct order for using all these options looks like: [tooltip click interative bottom 300].
The [context] tag, and it's counter part [end context] allow you to create shaded boxes around text.

The shape and color of the box is defined in the chrome. Most sites have more than one context box (context2, context3) each with its own style. In most cases context6 is an actual pullquote style with stylized quotation marks and large text.

It's possible to directly enter the html tags that control formatting. While all of these formatting options are available through the normal interface here is a list of the html tags that the system will accept when in raw html mode.

Show raw html options

<p> and </p> start and end a paragraph.
<br> forces a single line break
<hr> makes a thin horizontal line: a horizontal 'rule'. Often overused on websites so show some discretion
<ul> marks the start of an unordered (bulleted) list, with </ul> marking the end. In turn each item in the list should be surrounded with a <li> and </li>
<ol> and </ol> work similarly creating an ordered list with the items automatically numbered. Again each item in the list must start with <li> and end with </li>. Multiple lists can be nested within each other and will automatically be appropriately indented. To get different numbering schemes for different levels of indentation you can use the variant <ol lower-alpha> which will give you lower case alphabetic labels. Other variants available are: upper-alpha, lower-roman abd upper-roman.
One can also create a definition list with series of terms and definitions. Surround the entire list with <dl> </dl> tags. Each term/definition pair should be surrounded by <dt> </dt> tags and each definition by <dd> </dd> tags.
The <h1> (and it's partner the </h1>) is the first in a series of tags which surround headings. <h1> is the top-most heading (e.g. the title of a page), which the others are used on headings of declining prominence:<h2>, <h3>, <h4>.
The <strong> and <em> tags place strong or weak emphasis on a bit of text (normally indicated by bolding or italicizing the text). As expected the emphasized text should be ended with an appropriate </strong> or </em> tag.
Superscripts and subscripts can be obtained by using the <sup> or <sub> tag to start and the </sup> or </sub> tag to finish.
[lb], [rb], [gt], [lt] create left and right brackets and greater and less-than signs in a way that won't be interpretted as tags. These can be useful if you're trying to write documentation about tags.

« Previous Page Next Page »