TinySemantics TinyMCE Theme Mock Up

Overview

This is a mock up of the toolbar to be used in the TinySemantics theme for the TinyMCE WYSIWYG editor. This document was developed using an XHTML based doctype which is also being jointly developed as part of this project. In this way, as the theme is constructed, the well-formedness and validity of the generated mark up can be checked.

More information about this project can be found at the TinySemantics SourceForge Project Docs section.

Where are we now?

In order to simplify development, the javascript that injects the TinyMCE editor has been removed from this document. For the time being, we are only concentrating on the construction of the toolbar.

The CSS assumes a DIV classed "someBlock" that would set the final width and height of the editor. The hope is that the editor will be able to appear within the context of a portal environment such as JBoss Portal.

Tiny Semantics SourceForge Project

Toolbar Features

• Text Only - no bitmaps used to render the buttons. All elements are coded with XHTML and styled with CSS.
• Each button is documented with a small amount of help text that appears just above the toolbars
• We are using unicode character entities to "compose" graphics - view the source of this document to see what is going on.
  • We are restricting ourselves to character entities that are viewable by default with Microsoft Internet Explorer 6.0. Microsoft does in fact have full support for all of unicode. The support is limited to the default font for the browser and requires a configuration change from Times New Roman to a Unicode Font. This is the only way to see the complete Unicode character base. Suffice to say, we will not be making use of this technique.
  • The character entities we are using are based on selections documented by Alan Wood’s Unicode Resources
  • Some entities are intended to be used to draw shapes. There is a group of characters in a section of unicode labeled "Box Drawings". The text of our buttons are displayed within a small block and naturally word wrap. We then chop the line height in half to get the box drawing characters to meet up. On Microsoft Windows, this only works well using the font "Arial Unicode MS".
  • After many hours of trial and error, it appears as though Mozilla is capable of rendering only one font besides its defaults. Fortunately that font is also "Arial Unicode MS". ("Lucida Sans Unicode" also seems to work well but not much else does.) All other fonts tested seemed to look like crap and had major dimensional problems.
• Although Opera is not compatible with TinyMCE, our work is often checked against that browser. This is just another sanity check. Unfortunatley, Opera has a bug with floats which prevent us from getting it right. Please comment in the project's forum if you know of a work around within Opera.
• The TinySemantics project will make every effort to develop the toolbar outside the TinyMCE API. The hope is that this part of the project will be useful to web designers looking for a nice looking way of creating a horizontal navbar.