It is possible to customise the layout of the spell checker using a HTML template mechanism. This is
done by specifying the layout property with a string of Html using special tags to indicate the position of the
essential spell checker elements. The tags are <PreviewPane/>*, <AddButton/>, <IgnoreButton/>,
<IgnoreAllButton/>, <ChangeButton/>, <ChangeAllButton/>, <FinishButton/>, <UndoButton/>,
<ChangeToLabel/>, <ChangeToBox/>*, <SuggestionsLabel/>, <SuggestionsBox/>* - tags marked with *
are required for correct functionality.
Page containing the RapidSpellWeb Tag
<%@ taglib uri="http://www.keyoti.com/" prefix="RapidSpellWeb" %>
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<title>Spell Check</title>
<body>
<Center>
<RapidSpellWeb:rapidSpellWeb
changeToBoxStyle="font-size:10pt; width:200px; font-family:'arial,
helvetica, sans-serif';"
changeToLabelStyle="font-size:9pt; font-family:'arial, helvetica, sansserif';
"
suggestionsBoxStyle="font-size:10pt; width:200px; font-family:'arial,
helvetica, sans-serif';"
suggestionsLabelStyle="font-size:9pt; font-family:'arial, helvetica, sansserif';"
previewPaneStyle="font-family: 'arial, sans-serif, helvetica'; font-size:
8pt; font-weight:bold;"
previewPaneWidth="200"
previewPaneHeight="190"
ignoreButtonStyle="font-family:'Tahoma,Arial,Helvetica';font-size:10pt;
border:1px solid #b5bed6; background-color:#dddddd; width: 90px;"
ignoreButtonOnMouseOver="this.style.backgroundColor='#b5bed6';this.style.borderColor='#08246b';"
ignoreButtonOnMouseOut="this.style.backgroundColor='#dddddd';this.style.borderColor='#b5bed6';"
.....button styles.....
finishButtonOnMouseOut="this.style.backgroundColor='#dddddd';this.style.borderColor='#b5bed6';"
layout="
<table border=0>
<tr><td colspan=3 bgcolor='#eeeeee'><b>MyCo Spell Checking</b></td></
tr>
<tr><td>
<PreviewPane/>
</td>
<td>
<table border=0 height=190>
<tr><td>
<ChangeToLabel/>
</td></tr><tr><td>
<ChangeToBox/>
</td></tr><tr><td>
<SuggestionsLabel/>
</td></tr><tr><td valign=bottom>
<SuggestionsBox/>
</td></tr>
</table>
</td>
<td>
<table border=0 height=160>
<tr><td>
<IgnoreButton/>
</td></tr><tr><td>
<IgnoreAllButton/>
</td></tr><tr><td>
<AddButton/>
</td></tr><tr><td>
<ChangeButton/>
</td></tr><tr><td>
<ChangeAllButton/>
</td></tr><tr><td>
<FinishButton/>
</td></tr>
</table>
</td>
</tr>
</table>
"
/>
</center>
</body>
</html>
The only restriction is that the special tags must be on a line by themselves.