1. Overview

2. Directory structure

3. Customizable files

4. Installation procedure

Overview

One of the design goals for SpellChecker site is to allow clients to produce a spell checking dialog consistent with their own appearance guidelines. This document will first look at the files normally available for customization. Then it will discuss each customizable item.

Warning

Some changes to customizable files will not take effect unless the web’s module application settings are reloaded. The simplest way to do this is to re-start the web server. However, doing so can become very awkward when performing repeated changes to refine the look of the site. The solution is to prepare whole set of files in off-line and place them at once or to restart the web application each time you made changes. Another solution is to enable content expiration. In this case the traffic to your site will be significantly increased because each session requires these files. Which solution to choose depends on changes you need.

Directory structure

Custom look and feel package should be prepared in exact format to be properly understood by SpellChecker Web engine. This includes files with predefined names stored in predefined folders.

 

There are seveeral places where customizable files should be placed:

1. <spellchecker root>/WebInterface/spellcheck/lf

2. <spellchecker root>/WebInterface/spellcheck/templates/lf

3. <spellchecker root>/WebInterface/spellcheck/templates/lf.MSIE

4. <spellchecker root>/WebInterface/spellcheck/texts/

 

First location contains common images, css-files and spch.js. Second location contains custom templates for all browsers but IE. The third contains templates for IE 4+. The fourth location contains text messages, button captions used in the SpellChecker window

 

The lf and lf.MSIE folders contain folder templ, where spell checking dialog parts stored.

 

Each of these three directories can contain three css-files (mid.css, styles.css and top.css) and twelve locale-specific subdirectories with images for eleven supported locales plus one directory for files shared across all locales. The names are as following:

 

·    img           - shared images (logo and borders)

·    img_br       – British English language support

·    img_dk      - Danish language support

·    img_en      - American English language support

·    img_fr       - French language support

·    img_de      - German language support

·    img_it        - Italian language support

·    img_nl       - Dutch language support

·    img_no      - Norwegian language support

·    img_pt       - Portuguese language support

·    img_se      - Swedish language support

·    img_sp      - Spanish language support

 

img directory contains only four images:

·    d.gif                    - part of border

·    dlg_top_left.gif     - part of border

·    powered_by.gif     - SpellChecker.net logo

·    spell_only.gif        - Tab Control which contains only one tab element - SpellChecker Tab

 

Locale-specific directories can contain five files:

·    cancel.gif             - “Cancel” button

·    finish_checking.gif          - “Finish checking” button

·    opt_dlg.gif           - Options Dialog Buttons set

·    options.gif            - "Options" button

·    spell_dlg.gif                   - SpellCheck Dialog Buttons set

 

SpellChecker provides additional feature for American English locale, this is why the directory img_en can contain more six files:

·    change_to.gif       - "Change To" button, which is used in the thesaurus dialog

·    gramm_dlg.gif      - Grammar dialog buttons set

·    gramm_tab.gif     - Tabset, which is used on the grammar dialog

·    spell_tab.gif         - Tabset, which is used on the spellcheck dialog

·    thes_dlg.gif                    - thesaurus dialog buttons set

·    thes_tab.gif                    - Tabset, which is used on the thesaurus dialog

Customizable files

The individual customizable files are discussed below. You can customize spch.js file. You can customize three types of files: css, gif and tmpl-files.

 

The spch.js file contains JavaScript code which opens SpellChecker window. Updating this file let you change the size and position of the SpellChecker window. To change window size you should find and update values of wWidth and wHeight variables declared and assigned in this file. SpellChecker window opens by calling window.open method. You can change the size, position and appearance of the SpellChecker window by changing the features parameter of this function call (window.open). Please note that if you change the SpellChecker window size and its appearance then the content of the spellchecker window may be screwed up. Changing of the SpellChecker window size and appearance is not recommended by developers of SpellChecker.net application. When you change SpellChecker window size and appearance you are operating at your own responsibility. Developers of SpellChecker.net application recommends to make a backup copy of this file before making any changes, so you will be able to roll back to the original version.

 

CSS-files are well-formed custom style sheet files which satisfy all requirements of CSS Level 1 specification. In this section below you can find detailed description for each class defined in the file.

 

GIF are images in Compuserve Graphic Interchange format. GIF-files mostly used on the site as buttons. Most of images are used in the Netscape Navigator versions ONLY. The MSIE version uses only the img/powered_by.gif image. To customize particular image, you just replace it by the image with identical size.

 

tmpl-files are templates for spell checking, grammar and thesaurus dialog. You can update these files to update the presentation of SpellChecker window, its color scheme and layout. Please be careful modifying template files. Places, where your code can be inserted are marked with comments. Changing the other code may lead to unpredictable results. In case of changing of SpellChecker window layout browser compatibility testing should be made.

If the template file cannot be found, the default file is used. Template files contain special kind of tags (metatags) which are looks like <#some_identifier#>. These metatags are used by SpellChecker Web Interface.

 

Files in texts folder contain text constants of messages, button captions appearing on the SpellChecker window. Each line of this file may be presented in the SpellChecker window using metatag which looks like <#tx_noNN#>, where NN is the number of line in the appropriate file. Please note that these files are Unicode. Be careful when updating these files. Windows Notepad may be used for editing. After changing the file please remove first two bytes from the file using any other non Unicode editor.

Please note, that in the non-IE templates, in most cases, are used <img> tags for buttons instead of metatags and to modify buttons captions image files from folder <spellchecker root>/WebInterface/spellcheck/lf/<L&F_id>/img_<lang_id> should be updated/replaced.

mid.css

This file describes layout of middle frame. Middle frame contains user’s text in all modes.

 

bodymid.......... style of middle frame

midtext............ style for text in middle frame

A:link.............. style of a misspelled word when the word has not been pressed recently

A:active........... style of a misspelled word when the word is engaged or active

cerr................. style of current misspelling mark

styles.css

This custom style sheet file describes common settings for all “SpellChecker”, “Grammar” and “Thesaurus” sections of the page.

 

bodytop........... style of top frame

bodybottom..... style of bottom frame

dlgframe.......... style of frame dialog border

tabframe.......... this style is not currently in use and included for future features

dlg.................. style of bottom dialog

label................ style of bottom dialog text

gramborder...... style of grammar dialog border

gramsuggest.... style of grammar suggestion dialog

gramsugtext.... style of grammar suggestion description

gramsugitem.... style of each grammar suggestions item

gramsugtbl...... style of grammar suggestion table

bodyopt........... style of SpellChecker options dialog document

optborder......... style of SpellChecker options dialog border

opttable........... style of SpellChecker options dialog table

optheader........ style of SpellChecker options dialog caption

optheadertext... style of SpellChecker options dialog caption text

optcel.............. style of SpellChecker options dialog info

optlabel........... style of SpellChecker options dialog info text

optdescr.......... style of SpellChecker options dialog info descriptions

cel................... style of button cell

tabborder......... style of tab section border

tabbody........... style of tab section tab space

tabactive.......... style of active tab

tabpassive....... style of passive tab

celbrdr............. style of button border

tabbrdr............ style of tab border

optdlgborder.... this style is not currently in use and included for future features

optdlgframe..... this style is not currently in use and included for future features

A:link.............. style of a button when the button has not been pressed recently

A:active........... style of a button when the button is engaged or active

A:visited.......... style of a button when the button has been pressed recently

A:hover........... style of a button when the user hovers the mouse pointer over the button

top.css

This custom style sheet file describes how top part with buttons “SpellChecker”, “Grammar” and “Thesaurus” looks like. Since the page contains only these buttons, which in reality are just links, you can customize only links appearance.

 

 

A:link.............. style of a button when the button has not been pressed recently

A:active........... style of a button when the button is engaged or active

A:visited.......... style of a button when the button has been pressed recently

A:hover........... style of a button when the user hovers the mouse pointer over the button

finish.tmpl

This template is displayed when spell and grammar checking completed.

gram_dlg.tmpl

This template is displayed at the bottom of the dialog in grammar mode when there are some grammar issues in checking text. Normally, it displays the suggestions and buttons to apply or ignore the rule.

reject.tmpl

This template is displayed when license for using spells checking service expired.

sp_opt.tmpl

This template is responsible for options dialog. In standard shipment it allows to control following spell checking options: “all-caps words”, “words with numbers”, “words with mixed case”, “domain names”. Also, it includes functionality to manage user’s dictionaries.

spell_dlg.tmpl

The template is displayed when posted text has spelling errors. It suggests options for unrecognized words.

spellsuggestall.tmpl

This is the template for invisible frame used internally to speed up suggestion processing. It can’t be customized to prevent unexpected behavior of the system.

text.tmpl

This template is the placeholder for all the other templates and is primary used in spell checking dialog.

thes_dlg.tmpl

The template displays control panel for thesaurus section of dialog. Originally, it includes categories and synonyms lists, and control buttons “Change to”, “Finish checking” and “Cancel”.

top.tmpl

This template is responsible for displaying top part of the dialog. Usually, this section contains buttons “SpellCheck”, “Grammar” and “Thesaurus” as well as language chooser.

 

Installation procedure

When you prepared whole package of all files you can integrate them on your web set.

 

Place all custom files in appropriate places described in section “Directory structure”. Update all pages that includes spell checking with following code (the code must be included after link to spch.js):

<script>

schema = <Your schema name>;

</script>

 

The changes will take effect immediately after the page refreshed.