Home/ Questions/Q 7741137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T08:56:55+00:00

I am creating HTML pages with a base string and annotations on top of

  • 0

I am creating HTML pages with a base string and annotations on top of the base string’s words and letters. Right now I’m using the ruby, rb and rt tags and I tried tables and divs too. It looks like this:

text ruby markup

Source:

<body>
<ruby>
<rb>新</rb><rt>しん</rt>
<rb>Brasil</rb><rt>ブラジル</rt>
<rb>1</rb><rt>いち</rt>
etc.

My question is: Is there a way to rewrite the HTML, so the output looks roughly the same, but at the same time allow highlighting only the small characters shown in yellow, without having to select the big letters with them (so that the selection can be copied to the clipboard)?

Right now, and with the simple table cell methods I tried, you are forced to highlight big letters with the small.

The picture makes the association look totally random, but the tricky part is that the markup has to line up centered with the corresponding “big” letters.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <style>
.r { display: inline-block;  text-align: center;}
.ra { display: block;  font-size: 60%; }
</style>
<a class=r><span class=ra>しん</span>新</a>
<a class=r><span class=ra>ブラジル</span>Brasil</a>
<a class=r><span class=ra>いち</span>1</a>

    On browsers that support ruby markup, the ruby annotations looks selectable and copyable to me. But on IE, when an annotation is selected, the distinctive background color used the browser extends down over the base texts as well, so it looks like you had selected both. If you do Ctrl+C and Ctrl+V then, you’ll see that only the annotation is copied. On Chrome, this problem does not exist: only the selected annotation is highlighted.

    This could still be seen a problem. There is the perhaps more serious problem that Firefox does not support ruby markup.

    The code I suggest above uses text-level markup with classes instead of ruby markup and styling that displays it in a ruby-like manner. I put the annotation before the annotated word, since then it is easy to place the annotation above the base text—without positioning, just by making the container element an inline block and the annotation a block inside it.

    The markup is a bit messy, but this approach works widely across browsers. I suppose main problem is with display: inline-block, but it seems that in simple use like this, support exists even in old versions of IE (from IE 5.5).

    • 0