UserJS for HTML Ruby

UserJS for HTML Ruby

I actually didn't know this forum existed, and after being sure that there weren't any UserJS for ruby (searching for ruby in userjs.org...), I went on to create a UserJS to render ruby annotation... somewhat. Only to find that White Lynx had created a XHTML one. This one isn't really XML/XHTML compliant and such, but it does work for the basic simple/complex ruby annotations in HTML/XHTML and, to some extent, malformed ruby tags.

html ruby userjs

Examples by White Lynx:
http://xml-maiden.com/userjs/ruby/ruby.xml
http://xml-maiden.com/userjs/ruby/ruby.xhtml

Other Examples:
http://trans.hiragana.jp/ruby/http://www.nintendo-inside.jp/news/186/18628.html
http://en.wikipedia.org/wiki/Chinese_grammar (from iopg)

Malformed Examples:
http://www.htmq.com/html/ruby.shtml (it actually breaks it, but not really noticeable)
http://html.eweb-design.com/0406_rub.html (noticeably broken)
http://files.myopera.com/Kai_Lapis/files/ruby.html (malformed, but within extent)

ver 2.2:
Added a disable button (10sec) when the rendering is likely broken.

It is great that yours is not restricted to xhtml pages only !
I never quite understand why White Lynx does this exactly...

But could you add some style cancellation in your td and th borders, margins, paddings etc. ?
See this page and here is why I tell you that. The ふりがな here takes the surrounding table's border. It shouldn't do that sould it ?

Please put something like that on your cells :

style="padding: 0; margin: 0; border: 0;"

as it should solve the situation.
And font is maybe a bit too small.

Thanks for the feedback.

ver 2.3:
style selector .tRuby -> table.tRuby to override the page's class style
ruby text size .5em -> .7em

ver 2.31:
changed fault check ruby.innerHTML.length to rt.textContent.length

ver 2.4:
made easier for user to change ruby text's size and line-height and disable notice duration

Version 3 - ruby3.js

Another example page: W3C I18N Test Suite: Ruby markup

ver 3.0:
Added ruby tag cleaning for unclosed rb, rt, and rp tags.

ver 3.01:
Fixed where cleaning resulted in double body tags.

ver 3.02:
Changed document.getElementsByTagName('body') to document.body
Disabled ruby support for huge pages.

ver 3.1:
Changed handling order (clean, remove tag -> remove tag, clean) when there is a unclosed ruby tag so as not to generate an error.

For some reason, the script will mangle the display encoding (?) for some pages... and I can't figure out why. The info panel shows that Opera is using the right encoding, but it still appears as if it's using some other encoding.

Nice to see another approach

ver 3.2:
Added "request.overrideMimeType('text/html; charset=' + document.characterSet);" to try to override defaults, but Opera still seems to treat it as text/xml utf-8(?)

Sorry Kai,
If there is a problem with ruby size then I should print bigger characters on my page.
The official implementation guideline for ruby is that it's 50% size of text (so you should maybe revert to .5em or 50%).

Useful links (that you may have already read) :

• http://www.w3.org/TR/ruby-implementation/
• http://www.w3.org/International/questions/qa-ruby

Originally posted by Ti:

It is great that yours is not restricted to xhtml pages only !I never quite understand why White Lynx does this exactly...

Ruby is only part of XHTML 1.1 - it's a logical line of reasoning.

ver 3.21:
Fixed disable ruby that I broke with ver 3.2
Reduced regular expression number by one

Ruby is part of XHTML 1.1, and White Lynx's XHTML Ruby does work for it and, as White Lynx posted, for properly formed ruby tags in HTML.

I'm trying to get my HTML Ruby to work with all the malformed ruby tags that were made since IE5 came out with ruby support in 1999 and for the more than a few places that still use the malformed ruby tags. These ruby tags probably adhere to the early working drafts, which were made for SGML HTML. The closing tags were optional, which creates a problem for a pure DOM solution in Opera.

Originally posted by xErath:

Ruby is only part of XHTML 1.1 - it's a logical line of reasoning.

By ignorance, I have always written XHTML pages into .html files. I just discoverd recently that Opera would really consider it XHTML if the files ends with .xhtml BUT IE doesn't know .xhtml extension so it is quite a problem to name files this way...
White Lynx userjs doesn't trigger with XHTML.html files because Opera doesn't consider it REAL XHTML.

Whoahw my sentences are so confusing ... :-?

You can serve it as a .html or any other extension, or even without an extension at all. The server is the one that applies the mime type when sending it to the browser, and Opera gives priority to what the server says over what is said in the file. Your server is probably configured to send .xhtml files as application/xhtml+xml, which puts Opera in XHTML mode.

Hi Kai,

I tested two identical XHTML compliant files on the same server (one having ".htm" and the other having ".xhtml" extension). See this post for details.

I did read it In that case, the server doesn't send any mime headers and lets Opera guess, or it's configured to automatically send .xhtml as application/xhtml+xml.

Can anyone confirm that Opera hasn't really implemented XMLHttpRequest.overrideMimeType() ? I've read a few posts on some blogs that say that, at least in up to 9.02, the function doesn't do anything.

ver 3.22:
Changed so that it won't run on other load events, should fix this page
Moved variable declarations so it won't declare when no ruby tags are found

ver 3.23:
Reduced tag cleaning to single regex replacement

ver: 3.24:
Removed switch global from body tag removal regex
Changed default ruby text size to .5em
Added overflow:display to ruby style

I hope Opera will implement XMLHttpRequest.overrideMimeType() for Opera 9.1. Or even better, add ruby annotation support, but that probably won't happen anytime soon.

I wonder if there's a better way to close the unclosed ruby tags... Any ideas?

I think it's not really that important to bother about unclosed tags since it's not well written. The most important thing is that well written HTML renders OK, don't you think ?
As of Opera implementing ruby, it would sound logical to me that they do it sooner or later, as they were chosen for some Japanese machines.

The problem is that "HTML" ruby annotation from the working draft makes the closing tag optional. So unclosed tags will be considered "well formed" too according to the draft. IE continues to support the draft ruby annotation, and because of that, some places are going to continue with draft ruby annotations. I too would like everything to adhere to the latest standard, but that's impossible to enforce.

Version 4

ver 4.00:
Simplified, remade to be a mostly CSS solution

The tag closing still uses XMLHttpRequest, and it still has the problem of assuming "text/html; charset=utf-8" as the content type when the server does not send the header.

ver 4.01:
Differentiate between complex/simple css by class so rubies can be displayed properly under user mode

In the quest of supporting even more malformed pages...

ver 4.02:
If <head> does not exist, create and append

Originally posted by Kai_Lapis:

ver 4.02:If <head> does not exist, create and append

You might want to insert if before the body

if (!document.getElementsByTagName('head')[0]) {
        //document.appendChild(document.createElement('head'));
        document.insertBefore(document.createElement('head'),document.body);
    }

Thanks, xErath.

ver 4.03:
Changed to insert <head> before <body>

ver 4.04:
Added option to enable tag closing at all page sizes
Modified style and class setting so it won't be applied for rubies that fail tag closing

Thanx for the update, good job!

4.05:
Changed so it works with pages that don't have a closing body tag

Good!

UserJS for HTML Ruby

ver 4.06:
Removed one regexp string replace
Better unclosed tag detection

So the same site that gave me the idea for the new unclosed tag detection (by having awful ruby usage) got worse as I delved in deeper. Missing closing ruby tag. IE seems like it's okay with this, although it's not even supported by the HTML Ruby drafts. And so I "had" to... no, I didn't have to, but...

ver 4.07:
Better unclosed tag closing (to accomodate missing closing ruby tag)
Better performance (just a tiny little bit)

Good job, thanx for the update.

I couldn't get the "closing of the ruby tag" to work in a general context, so I'm taking it out.

ver 4.08:
Removed closing unclosed ruby tag
Detect and ignore unclosed ruby tag

Edit >>

Not Found

The requested URL /Kai_Lapis/userjs/ruby2.js was not found on this server.

Please use [http://files.myopera.com/Kai_Lapis/userjs/ruby.js]. Thanks

Oki, thanx

Because Opera defaults to UTF-8(?) for XMLHttpRequest with no way of overriding it, the tag closing caused encoding problems on pages where the server does not send the encoding in the headers. I added a "revert" button that should appear in the top right corner when tag closing is used. When clicked, it should discard the XMLHttpRequest'ed tag-closed contents and replace it with the original contents, making the page at least readable.

ver 4.09:
Added "revert" button when tag closing

ver 4.10:
Made the revert feature use classes instead of styles so it works under user mode CSS.

Also, the CSS to add in user stylesheet:

ruby.rSimple,ruby.rComplex{text-align:center;vertical-align:baseline;font-size:1em;}
ruby.rSimple *,ruby.rComplex *{margin:0px;padding:0px;line-height:1.3em;}
ruby.rSimple rt,ruby.rComplex rt{font-size:.5em;}
ruby.rSimple rt{display:block;}
ruby.rSimple rp,ruby.rComplex rp{display:none;}
ruby.rComplex rtc,ruby.rComplex rbc{display:table-row;}
ruby.rComplex rt,ruby.rComplex rb{display:table-cell;}
ruby.rComplex td{line-height:0em;}
ruby.rComplex td rt{display:inline;}
ruby.rComplex{display:inline-table;position:relative;margin-top:1.15em;margin-bottom:-.75em;top:-1.15em;}
ruby.rSimple{display:inline-block;}
#rSafe.rHide{display:none;}
#rRevert{position:absolute;top:0px;right:0px;}

ver 4.11:
Fixed regression since 4.08(?) where the ruby won't be rendered correctly if it was the last child of its parent.

ver 4.12:
Removed detection for unclosed ruby tag because of too many false positives.

Thanx for all updates, good job.

ver 4.13: fixed text not centering for the 2nd test in W3C I18N Test Suite: Ruby markup 1.

I only noticed this on b8769, but I don't know when it started. I'm pretty sure 4.12 had no problem before.

CSS to add in user stylesheet for user mode changed with 4.13:

ruby.rSimple,ruby.rComplex{text-align:center;vertical-align:baseline;font-size:1em;}
ruby.rSimple *,ruby.rComplex *{margin:0px;padding:0px;line-height:1.3em;text-align:center;}
ruby.rSimple rt,ruby.rComplex rt{font-size:.5em;}
ruby.rSimple rt{display:block;}
ruby.rSimple rp,ruby.rComplex rp{display:none;}
ruby.rComplex rtc,ruby.rComplex rbc{display:table-row;}
ruby.rComplex rt,ruby.rComplex rb{display:table-cell;}
ruby.rComplex td{line-height:0em;}
ruby.rComplex td rt{display:inline;}
ruby.rComplex{display:inline-table;position:relative;margin-top:1.15em;margin-bottom:-.75em;top:-1.15em;}
ruby.rSimple{display:inline-block;}
#rSafe.rHide{display:none;}
#rRevert{position:absolute;top:0px;right:0px;}

Also, some samples images of rendering:
Asahi.com with furigana from Kids Goo service (url)
W3C I18N Test Suite: Ruby markup 2, test 7 and 8 (url)
Unclosed rb/rt/rp tags on html.eWeb-Design.com (url)

Kai, Opera 9.5 implements table-baseline property (it is supposed to be added to CSS3 tables module) that makes it easier to format Ruby and similar stuff. It is -o-table-baseline in current (experimental) implementation. You can reuse style sheet from my UserJS if you find it useful.

P.S. property is defined as follows

Name: -o-table-baseline
Value: <integer> | inherit
Initial: 1
Applies to: inline-tables
Inherited: no
Percentages: N/A
Media: visual
Computed value: specified value (except for initial and inherit)

The '-o-table-baseline' property determines which row of a inline-table should be used
as baseline of inline-table.

<integer>
	Baseline of nth row (as determined by the integer value) is baseline of inline-table.
	Value 1 corresponds to first row and is initial value. Negative values are allowed,
	-1 corresponds to last row of inline-table, -n stands for nth line from the bottom.
	If absolute value of property is larger then number of rows in inline-table then initial value
	should be used instead. If value is 0 then bottom margin edge of inline-table should be treated as baseline.	

Thanks, Lynx.

Updated script to use -o-table-baseline.

ver 5.00:
for Opera 9.5+ only
smaller, faster, less DOM manipulation

user stylesheet:

ruby,ruby *{text-align:center}
ruby rt{font-size:.5em}
ruby{display:inline-table;-o-table-baseline:2;line-height:1em}
ruby rt,ruby rbc,ruby rtc{display:table-row}
ruby rtc rt,ruby rbc rb{display:table-cell}
ruby rp{display:none}
rbc+rtc,ruby>rt{display:table-header-group;}

ver 4.13, since ver 5.00 won't work with below 9.5

Too bad they did not include RUBY in 9.5 yet !

Originally posted by Kai_Lapis:

Updated script to use -o-table-baseline.

Good works, thanks.

ver 5.01:
fix for unclosed ruby detection
ruby css will not apply when unclosed ruby tags are detected but not closed

Where's the link ?

http://files.myopera.com/Kai_Lapis/userjs/ruby.js will be the latest one.

Cheers. Maybe you should update the link in the first post.

I would if I could...they only let you edit posts less than a day old.
I really shouldn't have put the version number in the file name in the first place, but...

Could somebody tell me what this script is used for?