Guided tour

This page is best viewed in Firefox 3.0+, Safari 3.0+, Chrome and IE8.0+

Welcome to a guided tour to explore a number of selected features of AtomWrite. Click any of the tabs to see step-by-step instructions for that particular feature. All tabs share one AtomWrite editor instance at the bottom of the page. Enjoy!

For most features, follow instructions under the tab and click a button labelled "Press me" to first load sample content into editor.

  1. to load sample content.
  2. Right click a paragraph in document and choose one of "Style Paragraph as..." items in pop-up menu to change look-and-feel of the selected paragraph to one of custom-defined paragraph styles. To remove style of the paragraph, right click the paragraph again and choose "Remove Paragraph Style..."
  3. Click to focus on an image (with green balls appearing at four corners of the image). Right-click and choose one of the "Style Image as..." items in pop-up menu to change look-and-feel of the selected image to one of custom-defined image styles.
  4. Highlight some text in one single paragraph and right click. Choose one of the "Style Selection as..." items in pop-up menu to change look-and-feel of the highlighted text to one of the custom-defined selection styles.
  5. You may style the entire document differently to this css by pressing . Note that font, line-space etc. as well as look-and-feel of the previously custom-styled paragraphs, images and texts have changed. In addition, a different set of custom style names appear in the righ-click pop-up menu.
  6. Now press to change back to the original css

There are two ways to preview (i.e. export) content from AtomWrite editor in HTML. Now to load some sample content.

  1. You may preview the content by invoking an API using javascript (Press Esc key to remove pop-up):
  2. Alternatively you may click on
    button on editor toolbar. The editor will first post content to a web server and then spawn another browser window to display the exported content loaded back from the web server.

User can save content being edited to local disk and load it back to continue working on it.

  1. to load some sample content.
  2. Click on
    button on editor toolbar and a browser pop-up dialog box will appear. Specify a file name and make sure that the file name is ended with ".atw". Then click "save" button to save the content.
  3. Press to clean up your content in editor.
  4. Now click on
    button on editor toolbar. Choose you saved .atw file in the browser pop-up dialog box to load saved content back to editor

You can add caption to an image. The caption is subject to all editor controls (such as spell-checking, format change etc.) just like text in paragraph. The caption appears at the bottom of the image and moves along with the image. Look-and-feel of the caption can be custom-styled.

  1. to load some sample content.
  2. Click on either of the two images (one inline and one float) to set focus to it.
  3. Right-click and choose "Add Image Caption" in the pop-up menu. An label "caption" appears at the bottom of the image.
  4. Click on the "caption" and wait for the cursor to appear. Now you can edit it however you would like.
  5. To remove it, set focus on image and right click then choose "Remove Image Caption" from the pop-up menu.

(Optional) to clean up editor.

  1. Click anywhere on editor to get focus. Wait for the cursor to appear.
  2. Click on
    button on editor toolbar to open drop-down dialog box for inserting image.
  3. Select tab "My computer" and click the "browse" button, a browser pop-up window will appear.
  4. In the browser pop-up window, choose an image file (jpg, gif or png) from your local disk.
  5. Your selected image is displayed immediately in the dialog box and a green button "insert" appears.
  6. Click "insert" button and the image is inserted into document instantaneously.
  7. As soon as the image from local disk is inserted into document, a green semi-transparent progress bar appears at the bottom of the image. The progress bar shows progress of a background image-processing task that jpeg-encodes and uploads the target image.
  8. You don't have to wait for the task to finish. You may immediately start to manipulate the image (resizing, floating, moving etc.) while image-processing runs in the background. As soon as image processing is finished, the progress bar disappear automatically.

Font size in AtomWrite editor is relative to a base size specified in the stylesheet but default to 14px. Any font size change in the editor is a percentile value relative to this base size. You can increase/decrease the base font size using hot keys: Ctrl+"+" / Ctrl+"-".

  1. to load sample content.
  2. Click on the editor for it to get the focus and then press Ctrl+"+" to increase base font.
  3. Now press Ctrl+"-" to descrease base font.

AtomWriter editor supports a number of hot keys. Try some of them listed below. to load some sample content.

  • First, click anywhere on editor to get focus. Wait for the cursor to appear.
  • Ctrl+↑ and Ctrl+↓ (Command+↑ and Command+↓ on MacOS) move cursor up/down to previous/next paragraph.
  • Ctrl+← and Ctrl+→ (Command+← and Command+→ on MacOS) move cursor left/right to previous/next word.
  • Ctrl+B, Ctrl+I, Ctrl+U toggle the format (bold, italic and underline) of current word at cursor.
  • Ctrl+Z and Ctrl+Y (Command+Z and Command+Y on MacOS)to undo/redo last edit (May not work on some versions of Internet Explorer).