[back]

Installing SpellingCow on Your Site

The following is all you need to know to make SpellingCow as you type available to your users. If you personally wish to use SpellingCow on any websites you visit (regardless if that site has SpellingCow installed), checkout the favelet.

Typical Case

In the simplest case, you need only add this one line to the top of the page to have spell checking:

<script type="text/javascript" src="http://buttercup.spellingcow.com/spell/scayt"></script>

We've taken measures to ensure users know the advertisement is coming from SpellingCow by display the text "Ad by SpellingCow". However, we also understand some sites might perfer to delay showing the advertisement until users explicitly opt to activate the checker, thereby clarifying the origin of the ad. To have the checker (and the advertisement) disabled by default, you'd want this instead...

<script type="text/javascript" src="http://buttercup.spellingcow.com/spell/scayt"></script>
<script type="text/javascript">
<!--

var sc_ayt_params = {ayt_default : 'off'} ;

//-->
</script>

...skip down to the Application Specific Examples section to see if there are any tips for the application you are running.

Application Specific Instructions

SpellingCow should work with most applications even if you don't see them on this list. The idea here is just to connect the dots a little better for you ;-)

SpellingCow Parameters

The one-liner is fine for many cases, but there are time when you need to tweak the display therefore several options are available. By setting any of the following parameters, then you can make adjustments:

In order to use these parameters, you simply need to include them in a sc_ayt_params declaration after loading the SpellingCow javascript. The parameters are expressed in a JSON object but don't worry if you don't know what that is. Just remember to not forget any commas and to not have one after the last parameter (else IE will barf). A typical example might look like this:

<script type="text/javascript" src="http://buttercup.spellingcow.com/spell/scayt"></script>
<script type="text/javascript">
<!--

var sc_ayt_params = {
  highlight_err_type : 'highlight',		// note that there are commas after the fist 2 entries
  highlight_err_color : 'gray',
  ayt_default : 'on'				// notice there's no comma after the last entry
} ;

//-->
</script>

Styling SpellingCow

The following represents the styles that SpellingCow produces by default. If you choose to use the external_style command then you will need to supply values for all of these styles. The style info can be placed anywhere, either in a STYLE tag external CSS, before or after the SpellingCow javascript line. I've tried to add comments where applicable. Unless stated as critical, you should feel free to change/add/remove styles attributes as you wish.

<style>
<!--

#spellingcow_div {
	position: absolute;				/* critical */
	z-index: 2;					/* critical */
	overflow: hidden;				/* critical */
	white-space: normal;				/* critical */

	padding: 3px 0px 0px 0px;			/* display specifics; these should match the settings in your textarea */
	border: 0px transparent solid;
	margin: 1px 0px 1px 0px;
	background: white;				/* background color for the textarea */
	color: white;					/* the color of the text being typed */

	line-height: normal;				/* font specifics; these should match the settings in your textarea */
	font-size: 11px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	font-stretch: ;
	text-align: start;
}

#spellingcow_div .white_span {
	white-space: pre;				/* critical */

	line-height: normal;				/* font just need to match what you have in #spellingcow_div */
	font-size: 11px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	font-stretch: ;
}

#spellingcow_div .double_space_span {
	white-space: pre;				/* critical */

	line-height: normal;				/* font just need to match what you have in #spellingcow_div */
	font-size: 11px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	font-stretch: ;
}

#spellingcow_div .red_span {
	background:yellow;				/* critical - set to the color to highlight error */
	color:yellow;					/* critical - set to the color to highlight error */

	line-height: normal;				/* font just need to match what you have in #spellingcow_div */
	font-size: 11px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	font-stretch: ;
}

-->
</style>