7

I've uploaded a modified version of the Furigana engine to https://gist.github.com/cyphr/6536814. The changes include various bugs fixed and added features.

Fixed bugs:

  • I've added the problem characters at 々 and 〆 break furigana to the regular expression.

  • In reference to Proposal about furigana:

    • I've made the font size of Furigana when using Internet Explorer/Google Chrome similar to other browsers in order to increase readability (it was very small).
    • When the "hide ruby texts, only show when hover on kanji" option (still off by default) is checked in the Furigana options, I've added underlining of words with Furigana text to allow easier identifying of which characters have Furigana.

  • I've fixed the bug where going e.g. 漢字ひらがな漢字​{ふりがな} makes the "ふりがな" over the top of the "ひらがな" rather than "漢字".

  • The "options" at the bottom of the screen was above the navbar at the bottom of the screen due to a change on Stack Exchange's end, I made it prepend to the start of the inside of the navbar (minor).

  • Fixed the y-position of the "options" screen being incorrect when content height changes in between the time of the creation of the element and when it's shown.

  • Added support for fullwidth bracket characters (｛｝) as at Furigana in Japanese input mode using { }

  • Fixed some Furigana vertical alignment issues: Made Safari and Opera 15+ and other WebKit-based browsers use their own ruby rendering (they support it natively, and is better aligned with other text when done this way), and for Firefox and Opera 12 and below it now uses pixel values to vertical-align which should be more accurate than it was previously. Unfortunately Firefox/Opera 12 and below will still sometimes be out by a pixel or so due to rounding as I haven't been able to find a perfect solution for those browsers

Added Features:

  • Added faster display of Furigana in "show on hover" mode by using a popup DIV rather than using "title" attributes.

  • At the bottom of the page, rather than saying "options" for the Furigana options, I've made it say "furigana options" as it's pretty easy to miss.

  • Added support for LH pitch accents as at What notation should we use for showing the pitch accent of words?.

  • Added an option to turn off the Furigana engine entirely.

  • Added additional options for left-aligned Furigana and not showing any Furigana (the center-aligned Furigana still remains the default), and added a "help" link to How should I format my questions on Japanese Language SE?, screenshot:

    enter image description here

  • Added support for the mobile site

  • Added support for various additional characters to the regular expression when using 漢字​【かんじ】 and 漢字​{かんじ} syntax: ＜＞（）()≪≫；;：:！!＝=≡≠≒＄￥？?＆＃#＠@“‘”’

  • Added support for including Okurigana in Furigana (for aesthetic reasons when JavaScript not enabled, and also for SEO)

  • Added some formatting help to the "formatting help" at https://japanese.stackexchange.com/questions/ask (disabled for anime.se as I think it's probably less important there), along with a link to How should I format my questions on Japanese Language SE?, screenshot:

    enter image description here

Removed Features:

  • Removed the "strict" ([漢字]​{かんじ} only), "recommended" ([漢字]​{かんじ}, 漢字​{かんじ}, 漢字​【かんじ】) and "extended" ([漢字]​{かんじ}, 漢字​{かんじ}, 漢字​【かんじ】, 漢字​(かんじ), 漢字​[かんじ] and others) Furigana syntax choice and left only the "recommended" syntaxes as I think those syntaxes are pretty much the only syntaxes which have been used on this website.

  • Removed the "hide romaji ruby texts" option, as I don't think romaji ruby texts are used often enough for it to warrant a specific option.

I've tested on IE8, Firefox 23.0, and Chromium 28.0.1500.71 Ubuntu and on those browsers it seems to work OK.

Please give any thoughts/report and report any bugs you've found etc here.

6
  • Let me know when you feel this is ready for incorporating and I will update the SE copy (and thanks for picking up the localStorage updates).
    – Oded
    Commented Sep 16, 2013 at 13:42
  • @Oded I've tested it and tried to iron out any remaining bugs this afternoon, and I think it's about as ready as it's going to be now - if you could do that that'd be really helpful
    – cypher
    Commented Sep 17, 2013 at 11:47
  • 2
    I have now updated the script on JLU and Anime (and respective metas).
    – Oded
    Commented Sep 17, 2013 at 12:23
  • 1
    @Oded I've made a number of bugfixes etc after the feedback on this page, would it be ok if the script could be updated to the new version at gist.github.com/cyphr/6536814? Also, would it be possible to add this script to the mobile site?
    – cypher
    Commented Sep 27, 2013 at 3:06
  • 1
    Done - the updated script is up. Thanks :)
    – Oded
    Commented Sep 27, 2013 at 10:16
  • Testing: 漢字ひらがな漢字{ふりがな}
    – user1478
    Commented Oct 17, 2013 at 4:39

5 Answers 5

Reset to default
2

The syntax with [] followed by {} seems to be superior to ​ followed by 【】:

[飛び越える]​{とびこえる} gives [飛び越える]{とびこえる}
飛び越える​【とびこえる】 gives 飛び越える【とびこえる】

[] followed by 【】 doesn't work:

[飛び越える]​【とびこえる】 [飛び越える]【とびこえる】

But even the smart syntax fails for a word needing furigana, but not starting with kanji

[お父さん]​{おとうさん} gives [お父さん]{おとうさん}
お父さん​【おとうさん】 gives お父さん【おとうさん】

Especially for searchability it would be nice to be able to write

[お父さん]​{おとうさん} to give お父【とう】さん

1
1

Now that this engine has been modified, I'd like to point back to my proposal here. I still think it would be better -- especially for beginners -- to be able to more easily see the visual breakdown of readings.

But it seems most of us usually just enter the notation as word【entire-reading】 without breaking down which mora(e) go with which character. It's possible to put the brackets/braces for each character, but it's much more cumbersome to do that. I don't think anyone wants to input 文【 もん 】部【 ぶ 】科【 か 】学【 がく 】省【 しょう 】 when they could more easily input 文部科学省【 もんぶかがくしょう 】 (spaces in brackets added to stop the engine and show the syntax here). I personally will change the way I input the syntax to include my own delimiters, such as 文部科学省【 もん・ぶ・か・がく・しょう 】.

Can/should we set some kind of convention like this? Like I said, I will personally start putting in ・ characters to denote the breakdown, but I don't want them to get edited out.

Update to @cypher: ・ is not currently one of the allowed characters using 【】 or {} syntax.

It does work in the "hover" style, but not in the "inline" style.

Hover Style Inline Style

6
  • I've broken them up by character before, but the problem is, the furigana may push the characters of a word apart (depending on browser / fonts / etc.), which I feel is worse than having the furigana slightly out of place.
    – user1478
    Commented Sep 19, 2013 at 15:51
  • I might post an answer myself later, but I think this idea has real potential. I think the Furigana created using this syntax could be made left rather than center-aligned. For a comparison between center and left-aligned Furigana: postimg.org/image/rq226a0rv - IMHO the left-aligned segmented Furigana at the top is more readable than the Furigana which is currently used on this site.
    – cypher
    Commented Sep 20, 2013 at 12:46
  • I stand corrected :) Anyway, I think something like this could be a good idea, but there's a risk that breaking up words could affect SEO, effectively making it so that Google indexes each Furigana segment like a separate word, which should maybe be avoided if possible. Maybe other syntax(es) could be added so that this isn't necessary (in most cases at least)? For example, 火傷​{やけど・} could work like 火傷​{や・けど}, 漢字​{・かんじ} like 漢字​{かん・じ}, and 日本語​{・にほんご・} like 日本語​{に・ほん・ご}, and the same syntax when the lengths of each Furigana segment is the same, e.g. 案内​{・あんない・} like 案内​{あん・ない}?
    – cypher
    Commented Sep 20, 2013 at 21:22
  • Except 火傷 isn't や・けど. It's just the "blanket" reading for the whole kanji -- やけど. It's a 熟字訓. I would personally write it like 火傷​{≪やけど≫} or something.
    – istrasci
    Commented Sep 20, 2013 at 21:59
  • oh ok - if I'm understanding rightly and you want it to display ≪やけど≫ as Furigana on top of 火傷 and it's not a special syntax I'll add ≪/≫ to the allowed Furigana characters, as they don't seem to be included in the regex currently.
    – cypher
    Commented Sep 20, 2013 at 22:58
  • Correct, I mean to say I'd write it that way, with no special syntax for ≪/≫. Although those are characters that I have to dig into the "Character Viewer" in OSX to insert. So I don't think they're especially easy to enter. Entering << doesn't convert them in the IME to ≪. Maybe in Windows, but not in OSX.
    – istrasci
    Commented Sep 20, 2013 at 23:27
1

While the following two changes are relatively minor, I think they could make a major impact on the findability of the articles of this website.

First of all, there are quite a few articles on this website which put the Furigana in between of the Kanji and the Okurigana. Like in the following case:

憧​{あこが}れる

I think it's likely Google wouldn't be able to find using that if someone searched for "憧​れる", and in fact I think Google would most likely treat this as three individual words, "憧", "あこが" and "れる". For this reason, I think it could be better if verbs were written like

憧れる​{あこがれる}

and some simple logic added to make it so that would display like enter image description here.

Secondly, There are quite a few articles on this site which use syntax like the following to show the individual parts of Kanji:

免​{めん}許​{きょ}状​{じょう}

I think Google likely would index those parts as if they were individual words if the above syntax was used, and wouldn't be able to find the article if that was typed into Google. There's also the following syntax which has been introduced in this thread:

免許状​{めん・きょ・じょう}

This gives the same appearance as the previous syntax (in the default Furigana mode), and I think is probably better than the previous way, but still has a problem that Google would likely index each part of めん・きょ・じょう as separate words.

I think this could be solved by using the following syntax:

免許状​{めんきょじょう|223}

Where there's a pipe (|) character, followed by the lengths of the individual parts to give enter image description here in this case. Fullwidth characters could also be supported so that typing 免許状​【めんきょじょう｜２２３】 would be possible without changing out of Japanese IME mode.

These changes are very simple to implement and as far I know, would be fully backwards-compatible with all existing Furigana on this website (all the previous syntaxes like 憧​{あこが}れる and 日本語​{に・ほん・ご} would still be supported).

Suggestions/feedback?

9
  • Feedback: I don't like the "first of all" suggestion to add simple logic because I don't think the render looks good (the れる because a slightly lower superscript). I think the pipes might be a good idea, but we'd need to make sure there's a consistent counting method. But my bigger question is how much traffic is coming in via Google really? Have we done any analysis for this? In my mind, if there's not a significant amount coming from Google, then I don't really care if it can correctly index my words and furigana.
    – istrasci
    Commented Sep 24, 2013 at 17:25
  • @istrasci Yeah, moderators have a tool that shows where the traffic is coming from. Referrals from Google account for about 75% of traffic at the moment.
    – user1478
    Commented Sep 25, 2013 at 7:05
  • I disagree with the pipe syntax. Remember that the text should be readable even if the furigana engine isn't running, because it doesn't work on the mobile site. That's also an argument against the dot thing, but something like 憧れる【あこがれる】 looks great, so I'm all in favor of it :-)
    – user1478
    Commented Sep 25, 2013 at 7:08
  • @istrasci thank you for the feedback - re the "first of all" suggestion, I haven't actually implemented that syntax yet, that was just a screenshot of the current 憧​{あこが}れる syntax on Firefox (Ubuntu). That alignment issue actually turned out to be a bug. I've added some (fairly hackish) workarounds for this issue for Firefox, Opera and Safari to the code and updated the screenshots. There's a chance the workarounds have side effects though as the behaviour of vertical-align differs between browsers and I had to do browser-specific detection - I'll need to test it more before release.
    – cypher
    Commented Sep 25, 2013 at 8:02
  • In the default Furigana mode, 憧れる​{あこがれる} would render exactly the same as the current 憧​{あこが}れる, but in popup mode it'd underline entire verbs/i adjectives (so in popup on mouseover mode 憧れる would be highlighted with a popup of あこがれる instead of just 憧 with a popup of あこが) as I think it'd make it easier for people to determine the boundaries.
    – cypher
    Commented Sep 25, 2013 at 8:13
  • @snailboat the mobile site actually works with the latest version, I don't know whether it's possible to add this script to it (I've noticed the mobile math.stackexchange.com seems to have MathJAX, so it might be). But I don't know, maybe I'll add the just the first syntax for now if enough people agree with it. One thing I'm wondering about is whether to also allow compound words with the first syntax, e.g. making [受け取る]​{うけとる} display like 受{う}け取{と}る.
    – cypher
    Commented Sep 25, 2013 at 11:28
  • 1
    Oh, supporting that would be great if possible, because many compounds are lexicalized, like 落ち着く. (That is to say, 落ち着く is a single word, so it's better for the reader and for Google's indexing not to split it up.)
    – user1478
    Commented Sep 25, 2013 at 11:32
  • 1
    @snailboat OK, I've implemented the first syntax. That's about all the changes I can think of done now, so I might ask @Oded if it can be updated in a while if that's OK. I was thinking about adding a Furigana icon to the edit toolbar and an insertion dialog (screenshot: i.sstatic.net/Fq00T.png) but I think it's probably simpler to just add editor help to japanese.stackexchange.com/questions/ask (screenshot: i.sstatic.net/jMReS.png), with a very brief intro to 書く​【かく】 format etc for new users (and also showing []{} format for when that doesn't work).
    – cypher
    Commented Sep 26, 2013 at 23:08
  • The "first of all" change would be pretty helpful for a number of verbs on some of our older posts.
    – Troyen
    Commented Oct 17, 2013 at 4:42
0

Hmm, after typing my other answer, I seem to have found a serious bug with this new engine. Here's how to reproduce it. Make sure your furigana options is set to hide ruby texts, only show when hover on kanji, create a dummy topic, and enter the following text (remove the leading and trailing spaces inside the brackets).

日本語【 にほんご 】
漢字【　かんじ　】

Now in the preview area underneath the topic text input (has a dashed border), you will see how these render in the new engine. Now mouse over them to see the furigana popup. If you quickly mouse over between the two of them, you will see that they "change spots" and sometimes show the incorrect furigana. If you do it long enough, they will "correct" themselves. Seems if your mouse leaves the preview (dashed border) area, and comes back in, that seems to hose things too.

Here is a Youtube video I made showing this.

This seems like a serious flaw in the rendering.

5
  • Hmm, after making this video (Firefox 24), I tried in my other browsers, and all of them -- Safari, Chrome 29, and IE10 -- don't show that style of rendering (dashed underline, pale green background on mouse-over, furigana in little popup div). Why is it only showing in Firefox like that?
    – istrasci
    Commented Sep 19, 2013 at 15:53
  • hmmm...weird, I can't reproduce this in Firefox 24.0 - I actually recorded the value of the Furigana in a closure when registering events to try to prevent this kind of sharing violation. The popup element is visibly getting removed on mouseout before being recreated as a new element in that video on mouseover on the new element, so I don't understand why events from one element are firing on the other. However I think I'll store the "#upop" (Furigana popup) element in the closure as well rather than getting it by ID each time and see if that solves the problem.
    – cypher
    Commented Sep 19, 2013 at 21:53
  • I've tried on a few computers, but I can't reproduce the CSS not rendering properly (Windows 7 IE10, WinXP Safari 5.1.7, Google Chrome 29.0.1547.66) so I really have no idea I'm sorry
    – cypher
    Commented Sep 19, 2013 at 22:47
  • Would it be OK if in Chrome 29 you could copy the text at gist.github.com/cyphr/6536814/…, enable "disable ruby entirely" in the "furigana options"+click "save and reload", then try pressing ctrl+shift+j at once and paste the text into the console? Does the Furigana work OK now or does it output any errors etc?
    – cypher
    Commented Sep 20, 2013 at 0:17
  • I'm sorry. When I tried it in the other browsers, I forgot to check the hide ruby texts, only show when hover on kanji in the furigana options. I guess I thought that setting was at the account level, but apparently not. Anyway, when that option is checked, I get the correct styling. Works in Chrome and IE. I'll check on OSX later.
    – istrasci
    Commented Sep 20, 2013 at 2:21
0

I am not certain if this is intended, but the furigana handling on the mobile site makes it hard to read (Android 4.1.2, Chrome).

For an extreme case, take a look at this topic: Using 全然 with a positive pejorative?

For me, the mobile version it looks like this:

[自己]{じこ}の[主觀的空想]{しゅかんてきくうそう}を[消磨]{しょうま}し[盡]{つく}して[全然]{ぜんぜん}[物]{もの}と[一致]{いっち}したる[處]{ところ}に、[反つ]{かえっ}て[自己]{じこ}の[眞要求]{しんようきゅう}を[滿足]{まんぞく}し[眞]{しん}の[自己]{じこ}を[見]{み}る[事]{こと}ができるのである。

[快樂論者]{かいらくろんしゃ}の[いふ]{いう}[樣]{よう}に[人間]{にんげん}が[全然]{ぜんぜん}[自己]{じこ}の[快樂]{かいらく}を[求]{もと}めて[居]{い}ると[いふ]{いう}のは[頗]{すこぶ}る[穿]{うが}ち[得]{え}たる[眞理]{しんり}の[樣]{よう}であるが、[反つ]{かえっ}て[事實]{じじつ}に[遠ざかつ]{とおざかっ}たものである。

[氏]{し}に[從へ]{したがえ}ば[人性]{じんせい}は[全然]{ぜんぜん}[惡]{あく}[であつて]{であって}[弱肉強食]{じゃくにくきょうしょく}が[自然]{しぜん}の[状態]{じょうたい}である。

[唯]{ただ}[觀念成立]{かんねんせいりつ}の[先在的法則]{せんざいてきほうそく}の[範圍内]{はんいない}に[於]{おい}て、[而]{しか}も[觀念結合]{かんねんけつごう}に[二つ]{ふたつ}[以上]{いじょう}の[途]{みち}があり、[此等]{これら}の[結合]{けつごう}の[強度]{きょうど}が[強迫的]{きょうはくてき}ならざる[場合]{ばあい}に[於]{おい}てのみ、[全然]{ぜんぜん}[選擇]{せんたく}の[自由]{じゆう}を[有]{ゆう}するのである。 [心理學者]{しんりがくしゃ}は[内外]{ないがい}と[いふ]{いう}[樣]{よう}に[區別]{くべつ}をするが[意識現象]{いしきげんしょう}としては[全然]{ぜんぜん}[同一]{どういつ}の[性質]{せいしつ}を[具へ]{そなえ}て[居]{い}るのである。 [獨]{ひと}り[人間]{にんげん}に[於]{おい}て[純粹持續]{じゅんすいじぞく}は[全然]{ぜんぜん}[物質]{ぶっしつ}に[打]{う}ち[勝つ]{かっ}て[自由]{じゆう}の[域]{いき}に入ることができたのである。

One solution for the user would be to check "show kana only on mouse over". However, there is no way to do this on the mobile (or I did not find it), and going to the desktop site, disabling it there and then switching back to the mobile site still results in the above.

I the same result with the mobile version and the stock browser, Maxthon browser, Opera and Dolphin.

Further, switching to the desktop site and checking "disable furigana entirely" gives me the above results even with the desktop site.

4
  • Currently the Furigana engine isn't enabled on the mobile site, but I might be able to add support for it and ask the Stack Exchange people whether it can be added to it. If you check "disable ruby entirely" it disables the actual JavaScript engine behind it and just displays the markup as-is without converting - I think that's a bit unclear so I'll rename that option "disable Furigana engine entirely"
    – cypher
    Commented Sep 20, 2013 at 20:29
  • Furigana on JLU works best when used sparingly. I use it only when I think the reading is rare, ambiguous, or surprising, and when possible I try to limit it to the first line in a paragraph--otherwise the line spacing becomes inconsistent, which makes paragraphs harder to read. That answer is also hard to read on the non-mobile site...
    – user1478
    Commented Sep 22, 2013 at 14:55
  • 1
    I also try not too over-use furigana, but there are case such as above where it may become necessary (異体字, non-standard readings etc.). So in the meantime, until the mobile version is improved, I think we should keep it in mind that answers should be legible with no furigana parsing as well.
    – blutorange
    Commented Sep 22, 2013 at 17:22
  • One thing you can do is cut down on the square brackets. A lot of the time, the furigana engine works fine with just curly braces. You only need to use the square ones when it guesses incorrectly about which kanji the furigana apply to. Another thing you can do to make it look more presentable is to use 【】 instead of {}. And if we update the furigana engine so you can write 憧れる【あこがれる】 and have it turn into 憧{あこが}れる, I think that would be nicer yet :-)
    – user1478
    Commented Sep 25, 2013 at 7:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .