request: Better compatibility with renshuu.org

[MarcusAseth]

renshuu.org is a SRS quizzing site by many thought as superior to Anki.

On Chrome browser using rikaikun or yomichan they are capable of properly highlight words on renshuu, as shown in the image below:

On Firefox using rikaichamp however, words aren't properly highlighted, image below:

All the kanji are analized separately. Would be possible to make rikaichamp work as well as rikaikun and yomichan when used on renshuu.org?

[birtles]

It looks like this site uses content like the following:

<div class="fleft" style="padding-left: ">
  <ruby class="k10">
    <rb>
      <span class="klook">引</span>
    </rb>
    <rt>ひ</rt>
  </ruby>
  <ruby class="k10">
    <rb>く</rb>
    <rt>&nbsp;</rt>
  </ruby>
  <div class="ib little" style="vertical-align: bottom"><svg>...</svg></div>
</div>

But it seems like the site is doing its own faux-ruby layout with rules like:

/* ルビベース */
ruby > rb, ruby > rbc
{
    display: table-row-group;
    line-height: 120%; /* 120% */
}

Which means that rikaichamp fails to detect the <rb> element as a inline element when it does this check:

const isInline = (element: Element | null) =>
  element &&
  ['inline', 'ruby', 'ruby-base', 'ruby-text'].includes(
    getComputedStyle(element).display!
);

We might need to add specific faux-ruby handling that treats <rb> / <ruby> etc. as inline elements regardless of their computed style.

[birtles]

Thanks for the report by the way. Very helpful.

[birtles]

I've tested this and the next version of Rikaichamp, when released, should work correctly with renshuu.org. Thanks for the report!

[MarcusAseth]

Awesome, thanks! :D