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/>*,<OptionsButton/>*, <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>
<head><title>Spell
Check</title>
<style type="text/css">
body{overflow:hidden;
font-family: sans-serif, arial, helvetica;
}
div{height:100%;}
#rsw_documentTextPanel
{
border: 1px solid #aaa;
border-radius: 3px;
}
#rsw_word, #suggestions
{
border: 1px solid #aaa;
border-top-color: #a0a0a0;
}
#rsw_optionsDialog
{
font-size:.80em;
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 295px;
height: 230px;
z-index: 101;
background-color: white;
border: 1px solid #444;
border-radius: 5px;
padding: 8px;
}
#rsw_optionsDialog_Backing
{
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(100,100,100,.60);
z-index: 100;
}
#rsw_optionsDialog > label
{
display: block;
padding-bottom: 12px;
}
#rsw_optionsDialog > input
{
margin-right: 9px;
margin-top:12px;
}
#rsw_optionsHeader
{
font-size: 1.2em;
border-bottom: 1px solid #aaa;
}
</style>
</head>
<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> <OptionsButton/> </td></tr> <tr><td> <tr><td>
<UndoButton/>
</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.