As a follow-up to Do we really need ruby characters all the time?, I think there could be some discussion in regards to the rendering of the Furigana engine:
- How the clutter of the Furigana could be reduced, while still allowing its useful functionality.
- How to balance Furigana-related hacks, and weighing up whether to always use browser-native ruby rendering, even if the #1 goal of reducing clutter would be adversely impacted.
I believe the goal of reducing clutter could be substantially achieved by adding an option to display Furigana under rather than over the text. In fact, I think it may be a good idea to make such an option the default Furigana mode for this site.
As has been mentioned in the linked post above, eyes tend to be attracted by the ruby more than by the character when the Furigana is above the text, but if it's under it, I believe it's less intrusive and allows one to focus on the main Kanji before focusing on the Ruby (screenshot examples below).
The state of Webkit/Blink Ruby:
Webkit/Blink (as used in Opera, Chrome+Safari) all support Furigana natively, both under and over the text, and seem to render it quite well.
Chromium Version 47.0.2526.73:
The state of Firefox Ruby:
Firefox now has native support for ruby, both under and over the text, but I personally don't like its rendering. It renders the Furigana quite far apart from from the text with a lot of padding. It doesn't seem there's currently anything that can be done about this, in CSS or otherwise.
I believe this would considerably increase the clutter on the site to the point where it would be worse to use native Firefox ruby than the present hacks.
Firefox native ruby rendering:
Firefox "hack" ruby rendering using CSS tables:
One thing that's interesting is that if the Furigana is under the text rather than over it in the "hack" mode, it seems to cease having as many vertical alignment issues, and removes the need for calculation hacks that are required when Furigana is over the text in hack mode.
The state of Internet Explorer Ruby:
IE has reasonable support for Furigana over text, but does not, AFAIK, support Furigana under text natively. It would therefore likely be necessary to use the "hack" CSS table rendering if rendering Furigana under the text.
IE 11 ("hack" CSS tables bottom-aligned Furigana above, native top-aligned Furigana below):
In my opinion, it might be better even in this browser to use the Furigana rendering below the text with the "hacks", as it seems to render OK (for me at least).
How does everyone about feel about this. Should we use native Furigana rendering in Firefox even with the spacing?
Should we keep the current behaviour of displaying the Furigana above the text, or should we make the default rendering mode Furigana below text (even in IE)?