Need suggestion in editing a story book in HTML

[gmclee]

Hi there,
I am editing a story book for kids in HTML. I am going to teach some
vocabularys with a story. A demo is show blow

A story about
"apple"

xxxxxxxxxxxx"XXX", xxxxxxxxxxxxxx"YYY". xxxxxx"ZZ"xxxxxxx "PP".
....
....

In the book, the explanation of the quoted word will be shown (and
replace the original word) when it is clicked and back to the word when
the mouse leave the area of the word. The source of HTML is something
like

<SCRIPT language="JavaScript">
<!--
function Explain(Obj, word)
{
Obj.style.color = 'red';
Obj.innerHTML = word;
}

function ShowWord(Obj, word)
{
Obj.style.color = 'blue';
Obj.innerHTML = word;
}

//-->
</SCRIPT>

A story about <span style="CURSOR: hand" onclick="Explain(this, 'An
apple is ...')"; onmouseout="ShowWord(this, 'apple')";>apple</span>

Each quoted word in the story will be replaced with a <span ...> shown
above. However, because the length of the explaination and the word are
different, when Explain() or ShowWord() is called, the whole paragraph
will be repainted. For example, sometimes, the first word of the second
line will be shown at the end of the first line. It annoies reader a
lot! Howcan I make it fixed when word/explanation shown in turn?

BTW, the layout of the text within a paragraph is not that orderly, I
don't know if it is something relate to <span>. I try to wrap the
whole paragraph with a <div align="justify">, but not all word will be
rearrange to have a good view. The worst case is shown below
------------------------------------------
| This is an apple. The is an apple.|
|xxxxx"XX"xx yyyyyy"YY" |
|yyy zzz"ZZZZ" zzzz zzzzzz zz |
--------------------------------------------

At the end of the second line , there is enough space of yyy on the
beginning of the thrid line, but it won't reorganize the word to fill
the space that make the layout of paragraph very BAD. Any idea?

Thanks

 

[Neredbojias]

To further the education of mankind, (e-mail address removed) vouchsafed:

Each quoted word in the story will be replaced with a <span ...> shown
above. However, because the length of the explaination and the word are
different, when Explain() or ShowWord() is called, the whole paragraph
will be repainted. For example, sometimes, the first word of the second
line will be shown at the end of the first line. It annoies reader a
lot! Howcan I make it fixed when word/explanation shown in turn?

One hokie way to do it is to use a monospace space and "fill in the
blanks" from the longest word with &nbsp;s. This probably wouldn't look
that great, though.

BTW, the layout of the text within a paragraph is not that orderly, I
don't know if it is something relate to <span>. I try to wrap the
whole paragraph with a <div align="justify">, but not all word will be
rearrange to have a good view. The worst case is shown below
------------------------------------------
| This is an apple. The is an apple.|
|xxxxx"XX"xx yyyyyy"YY" |
|yyy zzz"ZZZZ" zzzz zzzzzz zz |
--------------------------------------------

At the end of the second line , there is enough space of yyy on the
beginning of the thrid line, but it won't reorganize the word to fill
the space that make the layout of paragraph very BAD. Any idea?

Don't follow... "At the end of 2nd line, there is enough space on 3rd
line"...? Are you using nowrap or any positioning?