Need suggestion in editing a story book in HTML

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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

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

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

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


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?


Re: Need suggestion in editing a story book in HTML

To further the education of mankind, vouchsafed:

Quoted text here. Click to load it

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.

Quoted text here. Click to load it

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

Infinity has its limits.

Site Timeline