Where to find help?

Discussion in 'HTML' started by fulio pen, Mar 9, 2011.

  1. fulio pen

    fulio pen Guest

    fulio pen, Mar 9, 2011
    #1
    1. Advertising

  2. Creating simple animated arrows related to text

    Under Subject: Re: Where to find help?
    fulio pen wrote:

    > 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Mar 9, 2011
    #2
    1. Advertising

  3. fulio pen

    fulio pen Guest

    Re: Creating simple animated arrows related to text

    On Mar 9, 5:15 pm, "Jukka K. Korpela" <> wrote:
    > Under Subject: Re: Where to find help?
    >
    >
    >
    > fulio pen wrote:
    > > 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



    > 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
    fulio pen, Mar 10, 2011
    #3
  4. Re: Creating simple animated arrows related to text

    Jukka K. Korpela wrote:

    >> 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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Mar 11, 2011
    #4
  5. fulio pen

    fulio pen Guest

    Re: Creating simple animated arrows related to text

    On Mar 11, 5:05 pm, "Jukka K. Korpela" <> wrote:
    > Jukka K. Korpela wrote:
    > >>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.
    >
    > --
    > Yucca,http://www.cs.tut.fi/~jkorpela/


    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
    fulio pen, Mar 12, 2011
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan Jones

    Find::Find

    Dan Jones, Oct 7, 2004, in forum: Perl
    Replies:
    1
    Views:
    788
    Joe Smith
    Oct 8, 2004
  2. ad
    Replies:
    2
    Views:
    855
  3. Wybo Dekker
    Replies:
    1
    Views:
    352
    Yukihiro Matsumoto
    Nov 15, 2005
  4. vdvorkin
    Replies:
    0
    Views:
    400
    vdvorkin
    Feb 10, 2011
  5. vdvorkin
    Replies:
    3
    Views:
    809
    vdvorkin
    Feb 14, 2011
Loading...

Share This Page