Text editor sample

The following is a hands-on tutorial of a new What-You-See-Is-What-You-Mean editor. Try it out! Type the content on the left and see the instant preview on the right.

Please note that without Javascript, you will not be able to preview the content. You would still be able to submit the content, however. This is an advantage over regular WYSIWYGs.

* Getting the message across with meaning

This, for example, is a paragraph like any other paragraph. Above, we see a top-level heading. Usually, there is only one of those per document, akin to a chapter title or a document title.

To create a
 new paragraph,
 leave at *least*
 one empty space...

...between lines as shown here.
No line in between means
 "continue
 writing the same
 paragraph." As
the markup progresses, this feature will become more and more
 useful.

** Second level heading

Structure is the name of the game. It is /structure/, more so than /appearance/, which conveys the most meaning. By thinking in terms of sections and subsections, the document is easier to read and better to maintain.

*** A note on margins and spacing

One of the great features about typing what one *means*, is the added flexibility at the time of writing content. Margins, alignments, font sizes, etc, are all part of the /styling/ of the page, not part of the /content/ of the page.  By separating style from content, the document is more portable, cleaner, and richer.

** Lists of any depths

Writing lists is intuitive. The key is to follow some simple rules:

+ Every list is a block-level element. As such, you need to leave at least one space between its parent and the child.

+ Each element in the list must be indented at least one space from the beginning of the page, and by the same amount:
     - Create a sublist by indenting at least one space more.
     - The extra space between list items is not necessary

+ Both numbered and ordered lists are available.

Note, of course, that the following is *not* a valid list (can you detect what is missing?)

- A ✂successful✂ failed attempt at creating a list

- Still not a *real* list

** Creating links

A link, or anchor has at most two components, and their structure consists of a curl brace (*{*), followed by the letter /a/ and a colon (*a:*), and then the URL of the link, as in {a:http://www.fiu.edu}.

An optional second argument can be appended after adding a comma (*,*) to the URL, and is used as the {a:http://www.fiu.edu,title} of the link. Of course, {a:..,relative URLs} are also allowed.

** Embedding images

It is important to note that images are inline elements. That is, like links and regular text, and unlike lists, they (
{img:http://president.fiu.edu/inc/img/miniFIU.png,FIU}
) run along with the rest of the text. Thus, it may be advantageous to put the image on a "paragraph" of its own:

{img:http://cmshared.fiu.edu/fiu-edu/_assets/images/fiu-logo.gif,FIU Logo}

The careful editor will notice the similarities between an anchor and an image. The two have similar structures, except that the former uses *a* where the latter uses *img* (short for image, of course). The first argument is still a URL, which can also be relative. The second argument is -required- *strongly* recommended. It is the "alternate text". That is, a brief description of the image for accessibility and compliance.

** Creating tables

Tables are useful, and usually very difficult. But simple tables do not have to be. Remember, a table is a paragraph-level element, and as such it should really have at least one blank space in between it and the previous/next element:

| x | y | x + y |
| 2 | 3 | 5     |
| 4 | 5 | 9     |
| 6 | 7 | 13    |

Though the vertical bars (*|*) are aligned above, they do not need to be. All that matters are the following rules:

- there must be at least one space between the bars and the content,
  - there must be the same number of bars in each row,
  - and they need not align

*** Borders around the cells

The borders around the cells are stylistic issues, and are resolved by the stylesheet. Due to some legacy bad practice, HTML browsers have caved in and by default display tables with no cells. But rest assured, that the above is a table, and most stylesheets will respectfully display them with the borders as desired.

*** Table headers

Finally, tables should usually have headers. Under this system, the header must be at the top of the table, and there can be multiple rows participating in the header. Simple use the dash (*-*) as the separator (just one is required, but more of them provide a more pleasant look). Thus,

| x | y | x + y |
-----------------
| 2 | 3 | 5     |
| 4 | 5 | 9     |
| 6 | 7 | 13    |

** Special environments

Sometimes, there is no other way to present text without explicitly inserting a line break. The circumstances that call for this are limited, but they usually appear when typing contact sections (like postal addresses), and possibly poems.

End a line with a backslash,\
If a new line is what you meant.\
But use this feature wisely,\
or bad input you'll lament.

** /Mens et manus/: how to learn

Of course, the best way to learn is to do! So go ahead, try it out. Not only can you say (type) what you mean, but you can also see what you get, giving you the best of both worlds.