Where to find help?

[fulio pen]

Hello,

What I like to do is described in the following web page, and hope to
get some help in this group. Thanks for information.

best regards,
fulio pen


http://www.pinyinology.com/tones/toneMarks2c.html

 

[Jukka K. Korpela]

Under Subject: Re: Where to find help?

What I like to do is described in the following web page, and hope to
get some help in this group. Thanks for information. - -
http://www.pinyinology.com/tones/toneMarks2c.html

Well, it's best to start with a textual description of the problem and to
summarize it in the Subject line. I hope have written a useful Subject line,
and I think your first project goal can be described as follows (the other
one is of similar category but somewhat more complicated):

You have some text - Chinese in pinyin transcription with diacritics as tone
marks, specifically, though I don't think the specific nature is essential
to the task - and you would like to have some downwards-pointing arrows
between some letters, though positioned much above the baseline. And you
would like to have buttons on the page so that a "start" button makes the
arrows move up and down in a cycle, with a frequency of two times a second.
The "stop" button is to end the movement. (The arrows seem to indicate
morpheme boundaries, but this too looks technically irrelevant - though it
helps to motivate.)

This sounded like an interesting challenge, so I souped up a prototype:
http://www.cs.tut.fi/~jkorpela/test/tones.html8

The idea there is, first, to insert the arrows as characters (࢑ - well
supported in fonts, but beware that e.g. the Calibri font has odd-looking
arrows, quite unsuitable for use like this). With simple CSS, they can be
colored and placed vertically. I have also played with letter-spacing to
make the arrows consume little if any horizontal space, as this seems to be
part of the goal, judging from your page.

This means that the text can be just text, with the arrows inserted as, say,
<span> elements with a class.

Then I have some simple Javascript that implements the button actions. The
"start" button triggers an action where the <span> elements are traversed
and their vertical position changed. (This is probably safer than trying to
modify the style sheet.) The function ends with an invocation of
window.setTimeout where the function schedules itself for next execution
after 500 milliseconds. However, the function starts with testing a Boolean
variable that indicates that a stop request has been made. The "stop" button
simply sets that variable.

The visual appearance is probably not what you were after, but I guess this
approach could be tuned suitably to meet your needs.

The second project is about making an arrow run through some piece of text
in some given amount of time. This looks trickier, because the timing is
more difficult and the movement should probably be fairly smooth. I guess
you might first extract the width of the text from the DOM, then start a
function that moves the arrow a small fraction of the total width and
re-schedules itself after an amount of time calculated from the width, the
total time desired, and the length of the step. The arrow would presumably
be an "absolutely" positioned element that runs across the text by virtue of
having a larger z-index, and the movement would consist just of an increase
of the x coordinate of the position. Well, I guess you might make the step
one pixel - that's about as smooth as you can get.

 

[fulio pen]

Under Subject: Re: Where to find help?





Well, it's best to start with a textual description of the problem and to
summarize it in the Subject line. I hope have written a useful Subject line,
and I think your first project goal can be described as follows (the other
one is of similar category but somewhat more complicated):

You have some text - Chinese in pinyin transcription with diacritics as tone
marks, specifically, though I don't think the specific nature is essential
to the task - and you would like to have some downwards-pointing arrows
between some letters, though positioned much above the baseline. And you
would like to have buttons on the page so that a "start" button makes the
arrows move up and down in a cycle, with a frequency of two times a second.
The "stop" button is to end the movement. (The arrows seem to indicate
morpheme boundaries, but this too looks technically irrelevant - though it
helps to motivate.)

This sounded like an interesting challenge, so I souped up a prototype:http://www.cs.tut.fi/~jkorpela/test/tones.html8

Yucca,http://www.cs.tut.fi/~jkorpela/

Hi, Yucca:

This is great. Thanks a million. This is exactly what I wanted for
the Project I. I will read this email and your code many times, to
learn the skills. Thanks again.

fulio pen

 

[Jukka K. Korpela]

http://www.pinyinology.com/tones/toneMarks2c.html

[...]
The second project is about making an arrow run through some piece of
text in some given amount of time. This looks trickier, because the
timing is more difficult and the movement should probably be fairly
smooth.

Timing seems to be difficult, since setTimeout timing isn't exact and seems
to have a considerable overhead.

I guess you might first extract the width of the text from
the DOM, then start a function that moves the arrow a small fraction
of the total width and re-schedules itself after an amount of time
calculated from the width, the total time desired, and the length of
the step.

I tried moving one pixel at a time, with a timeout setting the next move
after 3000/w milliseconds where w is the width in pixels. This naive
approach resulted in a time over 6 seconds instead of the expected (or
hoped-for) 3 seconds. After some experiment I decided that moving 2 pixels
at a time. with a timeout set just 1 millisecond ahead seems good enough
(about 3.6 seconds). This is of course inflexible but might do for now. Demo
pages:
http://www.cs.tut.fi/~jkorpela/test/move.html

The arrow would presumably be an "absolutely" positioned
element that runs across the text by virtue of having a larger
z-index, and the movement would consist just of an increase of the x
coordinate of the position.

It seems that it's simpler to use relative positioning here.

 

[fulio pen]

http://www.pinyinology.com/tones/toneMarks2c.html

[...]
The second project is about making an arrow run through some piece of
text in some given amount of time. This looks trickier, because the
timing is more difficult and the movement should probably be fairly
smooth.

Timing seems to be difficult, since setTimeout timing isn't exact and seems
to have a considerable overhead.

I guess you might first extract the width of the text from
the DOM, then start a function that moves the arrow a small fraction
of the total width and re-schedules itself after an amount of time
calculated from the width, the total time desired, and the length of
the step.

I tried moving one pixel at a time, with a timeout setting the next move
after 3000/w milliseconds where w is the width in pixels. This naive
approach resulted in a time over 6 seconds instead of the expected (or
hoped-for) 3 seconds. After some experiment I decided that moving 2 pixels
at a time. with a timeout set just 1 millisecond ahead seems good enough
(about 3.6 seconds). This is of course inflexible but might do for now. Demo
pages:http://www.cs.tut.fi/~jkorpela/test/move.html

The arrow would presumably be an "absolutely" positioned
element that runs across the text by virtue of having a larger
z-index, and the movement would consist just of an increase of the x
coordinate of the position.

It seems that it's simpler to use relative positioning here.

Dear Yucca:

Thanks a million. I am very excited. You are a great programmer and
nice person. Your help is greatly appreciated. God bless you.

Best regards,
fulio pen