IT Technology

Create a WYSIWYG Document Editor

Posted on by Thao Nguyen

When my eldest son and I finished writing the plain English compiler, we decided to test its usefulness by adding a “whatever you look at” document editor, and then use it for the system of record. Two birds and a stone!

Document viewing

We call this tool Writer. Here’s what it looks like when you open the instruction manual in Writer:

We call this document view one line per page. You can select, copy, cut, paste, copy, and print entire pages (as well as groups of pages, continuous or distimate) in this view. They can also be saved in Adobe PDF format, so people who don’t have a Writer can read them.

Page preview

When you open the page, you’ll see that the page is exactly the same as it was when you printed (or saved as a PDF page), although it has sky-blue grid lines to help with tasteful layout. Page 8 of our instruction manual will be displayed on the screen:

In this view, you can zoom in, zoom out, rotate and spell check the entire page. And you can add, delete, move, resize, color, flip, mirror, rotate, copy, cut, paste, copy, group, and other text and graphic “shapes”. The Home, End, Page Up, and Page Down keys can be used to conveniently flip through pages without having to return to document view.

Externalize the page

As mentioned above, a document (and part of a document) can be saved as a PDF. But the native format for permanent storage is much simpler and text-only. For example, consider the following document, which has only one page and four shapes on it: a pink ellipse, a green triangle, a blue square, and a text box with “ABC” in it:

If you open this document using our Open as Text command (or any other text editor), you’ll see the following:

ream cal-3024
  page 15840 12240 1 1440
    ellipse 0 0 0 0 1000 875 1440 1440 2880 2880
    polygon 0 0 0 1500 1000 875 4 4320 1440 5760 2880 4320 2880 4320 1440
    rectangle 0 0 0 2100 1000 875 7200 1440 8640 2880 0
    text 0 0 0 -1 0 0 10080 1440 14400 2880 0 "title" "osmosian" 1440 "center" 0 0 0 yes
       "ABC"
    end
  end
end

One entry for the entire document, one entry for each page, and one entry for each shape on the page. And not a single “<” is in sight!

Pasting here the 4, 000 ordinary English sentences that define the entire Writer is just too much. They are included in the source code that comes with our system www.osmosian.com/cal-4700.zip. Now, let’s prepare an example routine:

To group any selected shapes on a page:
If the page is nil, exit.
Create a group shape.
Put "group" into the group shape's kind.
Put the page's scale into the group shape's scale.
Move the page's shapes to some original shapes.
Loop.
Put the original shapes' first into a shape.
If the shape is nil, break.
Remove the shape from the original shapes.
If the shape is not selected, append the shape to the page's shapes; repeat.
Deselect the shape.
Append the shape to the group shape's shapes.
Repeat.  
Append the group shape to the page's shapes.
Select the group shape.
Adjust the group shape.

Shapes on the page are drawn from the back, so the newly grouped shapes will appear on top of the other shapes on the page.

Not a toy

Remember, this is not a “toy”. As I mentioned above, we use it to write the documentation of the system. Since then, it has been used to produce the 800-page illustrated “Teach Kids to Read” lesson, which you can view here: www.rhymingreader.com. Not to mention several other books aimed at children, a large number of training manuals, and presentation materials of all sizes. Here’s one of my favorite pages of all time, it was developed by an elementary school teacher to solve an age-old problem:

QED。

Thao Nguyen