• Print

WYSIWYG vs WYSI

WYSI editors enable a whole new level of interaction

Since HTML is the new paper and the new path to paper online editing environments are becoming much more important for publishing. Dominant until now has been the WYSIWYG editor we all know and…err…love? However the current WYSIWYG paradigm has been inadequate for a long time and we need to update and replace it. Producing text with a WYSIWYG editor feels like trying to write a letter while it’s still in the envelope. Let’s face it…these kinds of online text editors are not an extension of yourself, they are a cumbersome hindrance to getting a job done.

Apart from huge user experience issues the WYSIWYG editor has some big technical issues. Starting with the fact that The WYSIWYG editor is not ‘part of the page’ it is instead its own internally nested world. In essence it is an emulator that, through Javascript, ‘reproduces’ HTML. As a walled/emulated garden it is hard to operate on the objects in the garden using standard Javascript libraries and CSS. All interactions must be mediated by the editor. The ‘walled garden’ has little to do with the rest of the page – it offers a window through which you can edit text, but it does not offer you the ability to act on other objects on the page or have other objects act on it.

Thankfully a new era of editors is here and maturing fast. Still in search of a clearly embraced category name they are sometimes called ‘inline editors’ or HTML5 editors. This new generation takes a large step forward because they enable the user to act on the elements in the page directly through the HTML5 ‘contenteditable’ attribute. That allows ‘the page’ to be the editing environment which in turn opens up the possibility for the content to be represented in a variety of forms/views. By changing the CSS of the page, for example, we can have the same editable content shown as multi-column (useful for newspaper layout), as a ‘Google docs type’ clean editing interface, in a semantic view for highlighting paragraphs and other structural elements (important for academics) as well as other possibilities….

Additionally it is possible to apply other javascript libraries to the page including annotation softwares like AnnotateIt or typographical libraries like kern.js. This opens up an enormous amount of possibilities for any use case to be extended by custom or existing third-party Javascript libraries.

It is also possible to consider creating CSS snippets and apply them dynamically using the editor. This in effect turns the editor into a design interface which will open the path for in-browser design of various media including, importantly, ebooks and paper books.

There are various attempts at the HTML5 editor, which might also be called a ‘WYSI’ (‘What you see is‘) editor. The most successful are Mercury, Aloha and the recent fork of Aloha called ‘WYSIWHAT‘.

Each of these are treading their own path but things are really opening up. As an example and with reference to the last post I made about Math in browsers, the WYSIWHAT group is making some giant strides in equation editing. Their equation plugin which was first built by Mihai Billy Balaceanu at the September WYSIWHAT hack meet in Berlin has since been improved and extended by the Connexions team and the good people at OERPUB (including the talented trio of Phil Schatz, Kathi Fletcher and Marvin Reimer). The plugin was made by including MathJax in the page and allowing the editor to interact with that. This was not easily possible with previous WYSIWYG editors.

The progress on the equation front is looking very good but what this shows more than anything is that by using WYSI editors the entire page is available for interaction by the user or Javascript. Anything you can think of that Javascript can do you can bring to the editing environment, and that is quite a lot…

Coda: if you are brave and have Chrome 23 installed try visiting BookJS.net, follow the instructions and then visit this demo (it enables content editing of a book and dynamic CSS editing via contenteditable)

All posts by Adam Hyde are CC-BY-SA

TOC NY 2013— The publishing industry will gather at the Tools of Change for Publishing Conference in New York City, February 12-14, to explore the forces and solutions that are transforming publishing.Save 15% on registration with the code COMM15
tags: , , , , , , , , , , , , , , , , ,
  • AC

    Your previous post promised a MathML editor (not an ASCIIMath or LaTeX one) … so that’s disappointing.  

    • http://www.booksprints.net/ adam hyde

      ? – i promised an equation editor :) also, if you right click on the equations in the example and it will show you the mathml. im sure extending the project to include mathml editing wouldnt be too tricky. get involved and extend it!

      • AC

        Showing the MathML after right-click is part of MathJax functionality (not a functionality of the plug-in). That does not make the plug-in a MathML authoring tool (to quote from the previous post: “The combination of native MathML support, font support and authoring tools (more on this in a later post)” )

        I am interested in joining an open source mathml editor project, but this plug-in is not it. These people gave up on mathml as an authoring tool from the start…

        • http://www.booksprints.net/ adam hyde

          I said in the post it was built with MathJax. That was the point of the entire post to show how easy it is to build these things using contenteditable editors.

    • http://peter.krautzberger.info/ Peter Krautzberger

      If I understand correctly, this will be in the final release.

  • http://peter.krautzberger.info/ Peter Krautzberger

    There’s a point to be made that MathML is not for human consumption, so “MathML authoring” will always mean “somehow creating MathML without writing it manually”. TeX and asciimath are two ways to do that, wysiwyg is another. 

    • http://www.booksprints.net/ adam hyde

      thanks Peter, stated much better than I could have.

    • AC

       In theory, yes, in practice, no. Any fine adjustment of production-level material requires one to edit mathml code manually even when using non-open-source mathml editors (such as mathflow).

      • http://peter.krautzberger.info/ Peter Krautzberger

        Right. In wysiwhat’s defence, the missing MathML-tab with TeX or asciimath input is due to MathJax not exposing the MathML nicely enough — something that’s on the MathJax todo-list.

        • Anonymous Coward

           What tools do you use to write/create mathml?