toggle kana/kanji

Discussion in 'Javascript' started by Fabian, Jan 7, 2004.

  1. Fabian

    Fabian Guest

    I have a page (ok, will have a page) written in Japanese. As we all
    know, Japanese is written with some pretty funky characters, and it is
    conventional to write the so-called furigana above these kanji, as a
    pronunciation guide. Imagine it as lots of little inline tables as
    follows:

    za kat sed hau du yu du
    The cat said how do you do

    This can be rendered properly using the html <RUBY> tag. Unfortunately,
    that tag is not properly supported across browsers, and msie, the only
    one I know that does support it, wont allow it to be manipulated
    properly by javascript. So I think it is best avoided.

    Anyhow, what I want is the following:

    The ability to toggle individual kanji/furigana pairings by clicking on
    that bit of text. Ideally, this will involve an absolute minimum of
    coding within the body of the document, as I expect there will be many
    such pairs.

    How can I do this?


    --
    --
    Fabian
    Visit my website often and for long periods!
    http://www.lajzar.co.uk
     
    Fabian, Jan 7, 2004
    #1
    1. Advertising

  2. Fabian

    Bill Guest

    In article <btgd3q$6ksvg$-berlin.de>,
    "Fabian" <> wrote:

    > I have a page (ok, will have a page) written in Japanese. As we all
    > know, Japanese is written with some pretty funky characters, and it is
    > conventional to write the so-called furigana above these kanji, as a
    > pronunciation guide. Imagine it as lots of little inline tables as
    > follows:
    >
    > za kat sed hau du yu du
    > The cat said how do you do
    >
    > This can be rendered properly using the html <RUBY> tag. Unfortunately,
    > that tag is not properly supported across browsers, and msie, the only
    > one I know that does support it, wont allow it to be manipulated
    > properly by javascript. So I think it is best avoided.
    >
    > Anyhow, what I want is the following:
    >
    > The ability to toggle individual kanji/furigana pairings by clicking on
    > that bit of text. Ideally, this will involve an absolute minimum of
    > coding within the body of the document, as I expect there will be many
    > such pairs.
    >
    > How can I do this?


    I think you'll have to use fairly large kanji that match up with the
    smallest font size you can get for the kana (but make them large enough
    to read on a crappy display). then play around with tables. Once you
    have them positioned, you can put <div> tags inside the table cells and
    make things appear and disappear.

    Neat idea of you can do it. I've just been working on having the reading
    appear in a line after the kanji.
     
    Bill, Jan 8, 2004
    #2
    1. Advertising

  3. Fabian wrote:

    > I have a page (ok, will have a page) written in Japanese. As we all
    > know, Japanese is written with some pretty funky characters,


    AFAIK Japanese has glyphs, not characters. But understood.

    > This can be rendered properly using the html <RUBY> tag.


    (X)HTML does not have a <RUBY> tag. In fact, _W3C's_ Ruby (apparently
    there is an object-oriented scripting language of the same name[1]) is
    another markup language which can be embedded in XHTML 1.1 documents
    through a module for XHTML 1.1.[2] The "ruby" element is, of course,
    the root element of the embedded markup.

    [1] http://www.ruby-lang.org/en/
    [2] http://www.w3.org/TR/ruby/

    > Unfortunately, that tag is not properly supported across browsers,


    As XHTML is not, alas.

    > and msie, the only one I know that does support it, wont allow it
    > to be manipulated properly by javascript. So I think it is best
    > avoided.


    Why not admit that IE is not capable and serve it (and
    other not-supporting UAs) a page without Ruby markup?

    > The ability to toggle individual kanji/furigana pairings by clicking on
    > that bit of text. Ideally, this will involve an absolute minimum of
    > coding within the body of the document, as I expect there will be many
    > such pairs.
    >
    > How can I do this?


    There is a good[tm] and a bad[tm] solution.

    The good[tm] one is CSS.

    CSS2, using floats and toggling child elements of each float:
    <http://www.w3.org/TR/CSS2/visuren.html#floats>

    CSS3, using its Ruby Module (not yet a recommendation) and
    toggling properties of child elements:
    <http://www.w3.org/TR/css3-ruby/>

    The bad[tm] one is tables, toggling the visibility of table
    cells ([X]HTML "td" elements).

    Note that "click" events bubble by default.


    HTH

    PointedEars
     
    Thomas 'PointedEars' Lahn, Jan 22, 2004
    #3
  4. Fabian

    Fabian Guest

    Thomas 'PointedEars' Lahn hu kiteb:

    > Fabian wrote:
    >
    >> I have a page (ok, will have a page) written in Japanese. As we all
    >> know, Japanese is written with some pretty funky characters,

    >
    > AFAIK Japanese has glyphs, not characters. But understood.


    For all practial purposes, the two words have the same meaning. The only
    reason Japanese people don't call them characters is because
    'kyarakutaa' means things like Mickey Mouse, Fred Flintstone, or the
    Stay-Puffed Marshmallow Man.


    >> This can be rendered properly using the html <RUBY> tag.

    >
    > (X)HTML does not have a <RUBY> tag. In fact, _W3C's_ Ruby (apparently
    > there is an object-oriented scripting language of the same name[1]) is
    > another markup language which can be embedded in XHTML 1.1 documents
    > through a module for XHTML 1.1.[2] The "ruby" element is, of course,
    > the root element of the embedded markup.
    >
    > [1] http://www.ruby-lang.org/en/
    > [2] http://www.w3.org/TR/ruby/
    >
    >> Unfortunately, that tag is not properly supported across browsers,

    >
    > As XHTML is not, alas.
    >
    >> and msie, the only one I know that does support it, wont allow it
    >> to be manipulated properly by javascript. So I think it is best
    >> avoided.

    >
    > Why not admit that IE is not capable and serve it (and
    > other not-supporting UAs) a page without Ruby markup?


    What I want is a solution whereby by default the user agent will see one
    of:

    ruby
    text

    or

    text(ruby)

    Depending on the capabilities of the agent. Further, I want the user to
    have teh option to toggle the display of the text and ruby. There will
    be 3 options:

    Show all
    Show base text only
    Show ruby only

    Ideally it will be functional it at least both msie and netscape (latest
    versions).

    The main problem I have is that msie won't allow the <ruby> tags to be
    manipulated via javascript.

    > There is a good[tm] and a bad[tm] solution.
    >
    > The good[tm] one is CSS.
    >
    > CSS2, using floats and toggling child elements of each float:
    > <http://www.w3.org/TR/CSS2/visuren.html#floats>


    From the example they give, this would be a great way to do drop-caps,
    but since the main text will flow around both sides, I'm not sure it
    would work. On really long examples, the ideal display would be
    interleaved lines.


    > CSS3, using its Ruby Module (not yet a recommendation) and
    > toggling properties of child elements:
    > <http://www.w3.org/TR/css3-ruby/>



    Since there is no browser (no common one anyway) that both understands
    the ruby tagset and allows it to be manipulated, I'll pass on this
    solution.

    I think I'll have to give this one up as a not yet possible across
    browsers task.


    --
    --
    Fabian
    Visit my website often and for long periods!
    http://www.lajzar.co.uk
     
    Fabian, Feb 1, 2004
    #4
    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. =?Utf-8?B?a2Q=?=

    How to toggle between window splits?

    =?Utf-8?B?a2Q=?=, May 2, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    470
    =?Utf-8?B?a2Q=?=
    May 2, 2005
  2. =?Utf-8?B?S2VpdGggSGFycmlz?=

    How to toggle visibilty of button inside repeater control

    =?Utf-8?B?S2VpdGggSGFycmlz?=, Nov 5, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    3,983
    Karl Seguin
    Nov 5, 2004
  3. Dica
    Replies:
    3
    Views:
    863
  4. =?Utf-8?B?c2lhag==?=

    Image Toggle

    =?Utf-8?B?c2lhag==?=, May 4, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    499
    Steve C. Orr [MVP, MCSD]
    May 4, 2005
  5. Read Roberts
    Replies:
    0
    Views:
    370
    Read Roberts
    Nov 17, 2004
Loading...

Share This Page