ocPortal Tutorial: Comcode and the attachment system
Many fields in ocPortal support Comcode, and 'Comcode pages' may be used to layout pages and menus of your site without having to do complex template editing, and without needing to use a restrictive layout editor. The front pages and menus of ocPortal are, by default, Comcode pages.
Those familiar with forum systems may see that Comcode is similar to BBCode in some respects.
Table of contents
Comcode Security
A great deal of emphasis is placed on making sure Comcode is secure, as it is available to all members of an ocPortal website. There is a specific permission, 'allow insecure Comcode', and another 'allow nuisance Comcode': we recommend that these are left turned off except for staff.Allowing members to post HTML (via the HTML tag, covered under 'insecure Comcode') absolutely allows members to gather information that they can use to hijack your website (it is called an XSS vulnerability, and usually involves Javascript code).
There are additional mechanisms in Comcode to aid security, such as ones to stop Javascript-powered URLs, and ones to stop people trying to using HTML entities to bypass Javascript filtering.
Syntax
Comcode is written and laid out as plain-text. Within this plain text certain syntaxes can be used to make changes or additions:- emoticon codes may be used
- ocPortal symbols may be used, such as {$USERNAME} to display the username of the current user
- certain shortcuts may be used, such as (c) for ©
- Comcode tags may be used to change content, such as [b]text[/b] to make some text bold
- Comcode tags may be used to add content, such as [block]main_feedback[/block] to add a dynamic comments box
- horizontal lines may be added by placing a few "-"'s on their own line
- table syntax
- HTML style entities can be use to place special characters inside the text
- member profile links can be placed by typing {{username-goes-here}}, or {{?username-goes-here}} to show extra details when the mouse is hovered over (OCF only)
- CEDI page-links can be placed by typing [[pagename-goes-here]], or [[pagename-goes-here#anchor]]
- A special list syntax may be used to write lists that look close to how they are displayed (example follows)
Code
- this is a first list element
- this is beneath the first list element
- this is a second list element
The following is also done automatically:
- Hyperlinks may be written directly, and are automatically detected
- Long text is forcibly word-wrapped if it would break layout
There is also an XML version of Comcode, which is described in further detail in the 'Advanced Comcode' tutorial.
WYSIWYG
ocPortal provides a WYSIWYG editor for those who would rather not type Comcode directly. You may mix in raw Comcode with the normal formatted text of the WYSIWYG editor if you wish; this is necessary if you need to insert things that don't have a regular appearance, such as blocks.All members may use the WYSIWYG editor but it will be heavily filtered if they do not have 'dangerous Comcode' permission.
The HTML produced by the WYSIWYG editor is automatically converted back into Comcode, and it is possible that some of the more advanced settings of the WYSWIYG editor could be lost during that process. Therefore the WYSIWYG editor should not be relied on to create particulary complex pages, but rather, just to perform basic formatting that you would rather not write by manually typing Comcode tags.
Emoticons
The following emoticons are currently in the system:| Code | Image |
|---|---|
| :constipated: | |
| :upsidedown: | |
| :christmas: | |
| :puppyeyes: | |
| :depressed: | |
| :rolleyes: | |
| :offtopic: | |
| :whistle: | |
| :shutup: | |
| :hippie: | |
| :thumbs: | |
| :rockon: | |
| :guitar: | |
| :cyborg: | |
| :ninja2: | |
| :sinner: | |
| :devil: | |
| :shake: | |
| :party: | |
| :sarcy: | |
| :ninja: | |
| :drool: | |
| :sick: | |
| :king: | |
| :nerd: | |
| :hand: | |
| :cool: | |
| :dry: | |
| :wub: | |
| :zzz: | |
| :lol: | |
| :nod: | |
| :'( | |
| O_o | |
| (K) | |
| ^_^ | |
| :) | |
| :@ | |
| :S | |
| :$ | |
| ;) | |
| :P | |
| :D | |
| :o | |
| :| | |
| :( |
These are as provided by your forum driver, and most forums, including OCF (our own forum) allow them to be changed freely.
Table syntax
Table syntax is written as in the following examples…Code
{| This is the table summary
! Header 1, row 1
! Header 2, row 1
|-
| Cell 1, row 1
| Cell 2, row 1
|-
| Cell 1, row 2
| Cell 2, row 2
|}
or in reduced form,
Code
{| This is the table summary
! Header 1, row 1 !! Header 2, row 1
|-
| Cell 1, row 1 || Cell 2, row 1
|-
| Cell 1, row 2 || Cell 2, row 2
|}
List syntax
|
The example in action |
Code
- 1
- 2
- 2.1
- 2.1.1
- 2.2
- 3
- 3.1
See how simple it is: the number of spaces before the hyphen identifies the list level, the hyphen identifies it is a list, and then after a space (to make it look better when writing it) comes the actual line of the list.
Tag syntax
Tags are written as in a way similar to HTML, except using the "[]" brackets instead of the "<>" brackets, and a slightly more user-friendly notation.All tags have an opening tag, written [tag], and a closing tag, written [/tag]. The text between the tags is either:
- something the tags modify
- an otherwise critical parameter for the tags; for example, for the 'block' tag, it is the name of the block
Tags may also take other parameters rather than the tag 'contents' (what the tag has 'embedded'). These are written in like as follows: [tag a="a-value" b="b-value"]contents[/tag], where 'a' and 'b' are merely examples of named parameters, of which there can be any number. Often tags have a special parameter that is of critical importance, that we name 'param'. A short-hand for writing:
Code
[tag param="value"]contents[/tag]
Code
[tag="value"]contents[/tag]
Another short-hand which Comcode supports, but we do not like, is missing out the " symbols. If there are more than one parameter, and any but the last one contains a space, this will not work.
If a tag is referenced that does not actually exist, then it won't be read as a tag: it'll just display as plain text.
If you need to include the " symbol inside a tag parameter, you can put it in as ". Also, if you need to literally display a tag without it being parsed, you may type [ for the opening bracket.
Tags and parameters
When only certain parameters are allowed they are shown as, param=option1|option2(|…) for brevity.When a tag 'wraps' Comcode, it essentially adds on properties. For example:
Code
[b][i]text[/i][/b]
A 'string' is just a length of text. That text may be a number written as text, or any other form of text.
Note that Comcode tags are designed very carefully to have different attributes. For tags where it makes no sense for certain syntaxes to be interpreted within the embedded contents of the tag, the syntaxes will not be interpreted. For example, the 'code' and 'html' tags naturally do not actually parse Comcode within them. For tags that would add their own blank lines (visually speaking) after them, blank lines in Comcode after them are skipped in order to allow the Comcode itself to be attractive without affecting layout.
Some parameter values actually support Comcode themselves. To use this, you will need to use the " escaping syntax described in the 'Tag syntax' section if you need to quote parameter values.
No tags really need parameters, except the 'jumping' or 'random' tags, where it makes no sense not to give them. Often giving parameters will greatly improve the usefulness of a tag: for example, without a 'param' parameter, the quote tag does virtually nothing except put something in a box.
| Tag | Purpose | Parameters | Embeds |
|---|---|---|---|
|
contents |
Automatically generate a table of contents |
files – a prefix for determining which files to get titles from to put into the contents (defaults to only searching the currently parsed Comcode) zone – the zone to search for pages if we are doing a file search (defaults to zone Comcode is executing in) levels – the maximum depth of title level to put in (defaults to all) base – the level to begin titling from |
A comma separated list of CSS list style codes. Or nothing at all. |
|
concepts |
Show a concepts table and store the concepts so that the 'concept' tag may link to them from any other Comcode. This is a dangerous tag, only usable for those with permission. |
X_key – concept name X_value – explanation Supports Comcode. where X may be any number, and there may be many X's. |
The title of the concepts table. |
|
concept |
Show a concept, and if it is known, a link to the concept table that defines it. |
/ |
Name of the concept. |
|
list |
Show a list (alternative to direct syntax). Don't use it, unless you are making use of the of 'param'. |
param=1|a|i| (defaults to blank, meaning a normal list) '1' means 'numeric list' 'a' means 'alphabetical list' 'i' means 'Roman numerals' |
List elements, separated by [*] (which is not a proper Comcode tag, as it has no [/*] closing tag. |
|
flash |
Don't use it, it's only for compatibility. |
||
|
indent |
Indent. |
param – indentation (defaults to 10) |
Wrapped Comcode. |
|
staff_note |
A note available for any one who is viewing the Comcode source (usually, staff, validating a resource). It is a comment, and not ever rendered. |
/ |
The note. |
|
menu |
Display a Comcode menu (not a menu editor style menu). This is a dangerous tag, only usable for those with permission (because it can confuse the layout and break menu expansion via conflicting name). |
param – menu name type – menu type (defaults to tree, and only types available that have a template set for them) |
The menu syntax. |
|
cite |
Make an inline citation. |
/ |
Wrapped Comcode. |
|
ins |
Mark some text as inserted by a modification (this is intended to express meaning, rather than style). |
/ |
Wrapped Comcode. |
|
del |
Mark some text as deleted by a modification. |
/ |
Wrapped Comcode. |
|
dfn |
Mark some text as being a definition (this is intended to express meaning, rather than style). |
/ |
Wrapped Comcode. |
|
address |
Mark some text as being an address (this is intended to express meaning, rather than style). |
/ |
Wrapped Comcode. |
|
abbr |
Create a special abbreviation. |
param – the full version |
The abbreviation (i.e. short version). |
|
b |
Embolden. |
/ |
Wrapped Comcode. |
|
u |
Underline. |
/ |
Wrapped Comcode. |
|
i |
Italicise. |
/ |
Wrapped Comcode. |
|
s |
Slash. |
/ |
Wrapped Comcode. |
|
sup |
Make superscript (used in mathematics to 'raise to the power of', e.g. x2). |
/ |
Wrapped Comcode. |
|
sub |
Make subscript (used in mathematics to 'distinguish variables', e.g. x2). |
/ |
Wrapped Comcode. |
|
title |
Show a title. Note that a level 1 title will automatically affect the title in the page title bar, for purposes of search engine optimisation. |
param=1|2|3 – the level of title (i.e. the first title would be level 1, and sub-titles of that, level 2) sub – the sub-text of the title (only applies to level 1, in default templates) number – set to a comma separated list of list-style codes, as used by the contents tag: this will cause numbering to be placed before titles (defaults to no numbering, and a blank value may be used for default numbering) base – the minimum level this title will be numbered against (default 2) |
Wrapped Comcode. |
|
size |
Change size. Short-hand for using 'font' with a 'size'. |
param – a size number |
Wrapped Comcode. |
|
color |
Change colour. Short-hand for using 'font' with a 'color'. |
param – an HTML/CSS colour code |
Wrapped Comcode. |
|
highlight |
Highlight text. |
/ |
Wrapped Comcode. |
|
font |
Change font. |
param – the font face name color – the colour size – the size |
Wrapped Comcode. |
|
tt |
Show as teletyped. (Written like it was done on a typewriter, so as to make it stand out as something to type). Comcode in tt is not scanned for automatic link checking, amongst other things. |
/ |
Wrapped Comcode. |
|
internal_table |
Equivalent to 'box' This is deprecated, please don't use it. |
All of those for box. |
Wrapped Comcode. |
|
external_table |
Equivalent to 'box' This is deprecated, please don't use it. |
All of those for box. |
Wrapped Comcode. |
|
box |
Show the wrapped Comcode inside an ocPortal 'standard box'. A standard box may or many not have a title. If you look at an ocPortal page, you will likely see around 10 standard boxes of various configuration: basically, boxed content. Some box types support 'meta' and 'link' content, that attach inside the box in a special way. These aren't supported in Comcode for security reasons, and the BOX tempcode directive must be used instead. It is rare that these would be wanted outside templates. |
float=left|right (defaults to right) breadth=WIDE|THIN|<number>px – the width of the standard box. WIDE ones take up all available space (although they won't push things out of the way to do it). This is deprecated, please use 'dimensions' instead. dimensions=width|width"|"height (default: 100%) – the width/heights are given in CSS units - examples: "100px", "100px|50px" "100%|50px". type=classic|panel|med|curved|light (default: classic) – these represent different templates (STANDARDBOX_type.tpl). options – | separated options that different boxes may support (e.g. interlock). param – title. Supports Comcode. |
Wrapped Comcode. |
|
img |
Place an image specified by URL. |
align – CSS alignment code to show how the image aligns to other Comcode near it. param – the image mouse-over caption Supports Comcode. |
The URL. |
|
url |
Place a link. Because this tag has the URL and text opposite to in BBCode, Comcode supports them to be reversed via auto-detection. Comcode does it differently as it is designed policy to make the embedded text the most critical piece, which is naturally the URL (doing it the other way favours wrapping, but many Comcode tags aren't wrapped anyway). Search engines are instructed not to follow links unless the Comcode maker has special permission to allow them to do it. This is a utilitarian act of participation between web developers and search engine developers to help massively disincentive spam-bots. Where possible, use the 'page' tag rather than the 'url' tag. It is much less sensitive to changes in ocPortal structure that would leave URLs broken. |
param – the link text. Defaults to the link itself, but shortened. Supports Comcode. title – the tooltip. target=_blank|_self (defaults to _blank for an external link). Links that open in a new window will be marked as doing so on mouse-over, for accessibility reasons. |
The URL. |
|
|
Place an e-mail link, with anti-spam obfuscation. Like the URL tag, the embedded text and caption may be switched around. |
param – caption. Supports Comcode. title – the tooltip. subject – the default subject for the new email. body – the default body for the new email. |
The e-mail address. |
|
reference |
Show a reference. This tag is rarely used, but is designed for citations. |
type=url (URL is the only specific type at the moment – if it is not a URL, leave this parameter out) param – the reference title (only give if different from the reference code). Supports Comcode. |
The reference code (e.g. “Webster's encyclopaedia”) |
|
upload |
Provide a link to an uploaded file. It is not recommended that you use this tag, as it was created before the attachment system existed and is very much inferior to it. |
type – the uploads directory to link to a file in param – the link caption. Supports Comcode. |
The file-name to link to. |
|
page |
Show a link to an ocPortal page. It is much preferable to use this rather than the 'url' tag, because it is more resistant to architectural changes (for example, if suddenly ocPortal was written in something other than PHP, URLs to index.php would no longer work, but page links would). This tag has two very distinct usage patterns, where parameters/embed-text are interpreted differently. If only a 'param' parameter and embed-text is given, then the embed-text becomes the caption, and 'param' becomes the page-name; the zone is wherever the page is located. The other usage pattern is as described formally here. |
param – the zone the page is in caption – the link caption. Supports Comcode. Other parameters are actual parameters to place inside the URL. For instance 'type' and 'id' are likely to be used, as these are very commonly found in ocPortal URLs. |
The page name |
|
php |
This is equivalent to using the 'code' tag with the 'param' parameter as 'php'. Note that it does not execute PHP code, it displays it nicely. |
Those as for the 'code' tag, except 'param'. |
The code to show. |
|
codebox |
This is equivalent to using the 'code' tag with the 'scroll' parameter as '1'. |
Those as for the 'code' tag, except 'scroll'. |
The code to show. |
|
sql |
This is equivalent to using the 'code' tag with the 'param' parameter as 'sql'. Note that it does not execute PHP code, it displays it nicely. |
Those as for the 'code' tag, except 'param'. |
The code to show. |
|
code |
This displays code, with possible syntax highlighting (depending on code type – at the time of writing only PHP supports this). Note that it does not execute code, it only displays it. |
param – the language to highlight for: doesn't have to be supported, so you may be specific in case it is supported in the future scroll=0|1 – whether to show the code in a nice scrollable box (defaults to 1 if the length exceeds 1000, otherwise defaults to 0) |
The code to show. |
|
hide |
Hide some text such that it needs to be consciously expanded to see what it is. This is useful for giving warnings before viewing. For those without Javascript enabled, the text will be expanded by default. |
param – the warning (defaults to a translated 'Expand' string). Supports Comcode. |
Wrapped Comcode. |
|
quote |
Quote somebody. The quote is itself Comcode, rendered in a special box. |
param – who/what is being quoted. If you are quoting a member use their literal username, in case this tag is ever expanded to make use of such data. |
Wrapped Comcode. |
|
block |
Insert a dynamic block (described in the 'Advanced Custom Pages of Information (via Comcode)' tutorial. This is a dangerous tag, only usable for those with permission. |
Whatever the block takes. |
The block name. |
|
semihtml |
Treat the embedded text as freely mixed Comcode and HTML This is used by the WYSIWYG editor. This isn't a real Comcode tag, but actually a hint to the Comcode parser. This is a dangerous tag, only usable for those with permission. |
/ |
Comcode and HTML mixed freely. |
|
html |
Treat the embedded text as HTML. This isn't a real Comcode tag, but actually a hint to the Comcode parser. This is a dangerous tag, only usable for those with permission. |
/ |
HTML. |
|
if_in_group |
Only present the wrapped text if the current member is in one of the usergroups. This is a dangerous tag, only usable for those with permission (because it could be used to pass secret messages that moderators do not see). |
param=comma separated list of usergroups (either ID's or names) type=|primary|secondary (if non blank limits to given group membership type) |
Wrapped Comcode. |
|
exp_thumb |
Show a thumbnail to a special 'example' image. Intended for putting thumbnails into Comcode documents without using the attachment system (which relies on DB entries or exported documents). |
float=left|right (defaults to right) |
The image code. The image is stored in data/images/<zone>/<code>.<ext> e.g. 'foo' would typically be 'data/images/docs/foo.png'. |
|
exp_ref |
Similar to exp_thumb, but shows a link rather than a thumbnail. Useful for putting a link in-line to the text to pinpoint what is also shown as a thumbnail. |
param - The text to show (defaults to a translated 'Example' string) |
The image code as with exp_thumb. |
|
thumb |
Show and cache an automatically generated thumbnail to a URL. The thumbnail width is that of the configuration options specification. |
align – CSS alignment code to show how the image aligns to other Comcode near it. param – a local relative URL to a thumbnail to forcibly use. Normally this parameter would not be given. caption – a caption shown as a tooltip. float=left|right – Float the tag to the left/right. Normally this parameter would not be given. |
The URL. |
|
attachment |
Show an attachment. Normally you do not type this tag directly, but rather use the posting form's attachment functionality to have it added for you. You might also choose to copy&paste these automatically-made attachment tags. The one case where this would be typed directly is if you are creating an attachment from a URL. This is a rare case and should be avoided, as external URLs may cease to be valid over time. Downloading and then uploading the file is better. Note that the thumb tag provides similar functionality to using an image attachment by URL, and the url tag provides similar functionality to using a download attachment, and the flash tag, a flash attachment. Embedded attachments are also supported, but these are only created by and for use by Comcode pages. To create a Comcode page with embedded attachments you must use the export feature in the editor. Once an embedded attachment is found, it is extracted, and the Comcode is rewritten to reference the extracted file. This tag is tightly controlled for security. |
description – description for the attachment, shown inside a box. Use '/' to say not to put an image in a box. Note that for new uploads, descriptions are addable in the attachment editor, and automatically moved them into the tag after form submission. Supports Comcode. filename – the file-name to have the attachment downloaded under. type=auto|island|inline|download – what type of attachment display should be used (default is auto). For auto, ocPortal detects what the file is from file extension, and uses appropriate templates to tie to relevant HTML tags or plugins. width – width, if appropriate height – height, if appropriate align – alignment float=left|right – Float the tag to the left/right. Normally this parameter would not be given. |
This can be many things, and determined how the attachment works. If it is 'new_X' then ocPortal will look for an attached file to the posted form. If it is a number, it will tie to that numbered attachment. If it is 'url_URL' it will make an attachment from that URL. If it is something else, it will be interpreted as an encoded file. |
|
align |
Change the justification. |
param=left|center|right |
Wrapped Comcode. |
|
left |
The same as using 'align' with 'left'. |
/ |
Wrapped Comcode. |
|
center |
The same as using 'align' with 'center'. |
/ |
Wrapped Comcode. |
|
tooltip |
Display a tooltip over the wrapped Comcode. The tooltip should be not be used to display critical information when accessibility is required as it depends on Javascript being enabled. |
param – The tooltip |
Wrapped Comcode. |
|
right |
The same as using 'align' with 'right'. |
/ |
Wrapped Comcode. |
|
snapback |
Link to a forum post. Don't use it, it's only for compatibility. |
param – the title to give for the link forum – the forum to look in (unneeded for most forum drivers) |
The ID of the forum post. |
|
post |
Link to a forum post. |
param – the title to give for the link forum – the forum to look in (unneeded for most forum drivers) |
The ID of the forum post. |
|
thread |
Link to a forum topic. Don't use it, it's only for compatibility. |
param – the title to give for the link forum – the forum to look in (unneeded for most forum drivers) |
The ID of the forum topic. |
|
topic |
Link to a forum topic. |
param – the title to give for the link forum – the forum to look in (unneeded for most forum drivers) |
The ID of the forum topic. |
|
include |
Include the full contents of a Comcode page at this point in the Comcode. It goes without saying (but we will!) that you should not create an include that includes the including Comcode page (a loop). This is a dangerous tag, only usable for those with permission. |
param – the zone to include from (default is to search) |
The Comcode page name. |
|
random |
Show a random choice from a number of possibilities. A random number is picked, and then it is linked to a string by what range it fits within. This is a dangerous tag, only usable for those with permission (because it could be used to hide things like random obscenities from staff). |
X – the string to show if our random number is between our X and the next highest X. Supports Comcode. Where there may be any number of X's, which are all numbers. The first X should be 0 (zero). |
The maximum value for our random number. |
|
ticker |
Show a scrolling marquee. You should not use this site on a page that is meant to meet accessibility guidelines. |
param – the width in pixels speed – a multiplier for the default speed |
Wrapped Comcode. |
|
jumping |
Jump between a number of strings. You should not use this site on a page that is meant to meet accessibility guidelines. |
Any number of strings given any name (names are ignored, only values are used). Supports Comcode. |
The number of milliseconds between jumps. |
|
section |
Define a 'page', for content spread across 'pages' (the term 'section' is used instead of 'page' to avoid terminology inconsistency within ocPortal). |
param – the name of the section (required) default – set this to 1 if the section is the default section (otherwise leave it out, or set it to 0). There should only be one default section (or none), unless multiple sections should be opened initially. |
Wrapped Comcode. |
|
section_controller |
Provides the interface to move between sections. |
A comma-separated list of section names, which will be shown in the order given. |
In addition, new tags may be created. This is discovered in the 'Advanced Comcode' tutorial.
Shortcuts
There are some short-cuts for use to use:- (c) for ©
- (r) for ®
- -- for –
- --- for —
Symbols
For a list of symbols, see the 'Tempcode programming' tutorial. It is rare that you will want to include a symbol, and they are primarily designed for usage from Tempcode, our templating language.Comcode Menus
ocPortal has had a dedicated menu editor since version 2.5. Before this, menus were written directly into Comcode rather than being tied to a menu-editor menu via a block. The old method of writing a 'Comcode menu' is still available though, and some users, especially those with disabilities, may prefer this method of menu generation.|
The example in action |
The menu tag takes a single parameter - the codename assigned to the menu. Each menu should be assigned a different codename, and you may just make one up as you write the Comcode.
The menu is only designed for organising links. You should not attempt to store other content in a Comcode menu tag.
Here is an example of a menu tag in action…
Code
[menu="some_codename"]
-contracted section
+expanded section
page = URL
page = URL
+expanded section
page = URL
page = URL
[/menu]
Tip
The '-' means that a section is not expanded by default, whilst the '+' means that a section is. Those lines without a '+' or '-' are lines that are actually entries on the menu, and contain the caption of the entry, followed by " = ", followed the the URL of the entry.
Menu entries are typed so that their indentation is equal to the indentation of the start of the section's title. i.e. one further depth of indentation from the section's '+' or '-'.
Attachments
|
Adding an attachment |
|
Editing an attachment |
Using them couldn't be easier: you just choose a file (or many files) from your computer, and ocPortal will automatically add an 'attachment' tag into the Comcode you are writing. You may then move that tag to any location you want, for placement of the actual attachment when the content is viewed. There is special built in support for in-line display of various media forms, and support of download of other types of file; any file can be added so long as the file type is in the allowed list of file types defined in the Admin Zone (see the security tutorial for a discussion on this).
Attachments may be given special captions, which are usually displayed as a part of the attachment box. If your attachment is an image and you don't want it placed in a box, use '/' as the caption text.
Images have automatically generated and cached thumbnails.
Important note
Concepts
- Mark-up language
- A language designed so that text may be laid out by surrounding special elements around portions of the text to define meta-properties (such as font)
- Comcode
- ocPortal's mark-up language for the creation of formatted text and inclusion of dynamic elements
- Attachment
- A file attached to Comcode via a 'posting page' supporting Comcode field; attachments have special support for rich media
- Semi-HTML
- HTML and Comcode mixed freely together
- WYSIWYG
- What-You-See-Is-What-You-Get: the name of the type of interactive editing interface used for formatting text in many programs, including modern word processors



