toggle kana/kanji

[Fabian]

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?

 

[Bill]

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.

 

[Thomas 'PointedEars' Lahn]

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

 

[Fabian]

Thomas 'PointedEars' Lahn hu kiteb:

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

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.