I get a good result with this:
<ruby>c<rt>1</rt></ruby>1<ruby>c<rt>2</rt>c<rt>3</rt>c<rt>4</rt>c<rt>5</rt>c<rt>6</rt></ruby>1UPDATE: Here's an example for theobromine - https://jsfiddle.net/j84z1kyb/ .
It looks great!
But it's not as useful as I hoped it would be. Copy&paste captures the numeric annotations. I probably should have expected that, but didn't.
And highlighting is wonky. In Safari and Firefox, I seem to get a character and the ruby annotation for the character next to it, more often than I do the one overhead.
<ruby>C<rt class="ruby-1"></rt></ruby>
.ruby-1::after {
content: "1";
}
Then you should get an annotation that resists copying. This renders correctly for me in Firefox; no idea about other browsers.
<ruby class="smiles">C<rt data-atom="1"></rt></ruby>
.smiles rt::after {
content: attr(data-atom);
}New jsfiddle at https://jsfiddle.net/hnw1zbed/2/ .
Yes, selection does also highlight the annotations but the good part is that copying ignores them.
I just selected the whole formula, pressed Cmd-C, Cmd-V and got this:
Cn1cnc2c1c(=O)[nH]c(=O)n2C C1n21c3n4c52c61c7(=O8)[nH]9c10(=O11)n122C13
Cn1cnc2c1c(=O)[nH]c(=O)n2CThat's very likely a browser bug. Think about the accessibility implications (for e.g. screen readers) if ruby text was supposed to be modelled in the DOM as being interpolated into the text it's annotating.
I'm not sure what the standard says about how it should be treated, but my guess is that each annotation should be thought of as alternative for the text it annotates — ala the image "alt" and "srcset" attributes, or ala videos with multiple audio tracks in the same language, where one of those is Described Video or director's commentary or whatever.
In other words, the "correct" behavior would likely be that your browser knows the user's language prefs, and then chooses to select (or copy, or speak, etc.) either the text or its annotation, depending on which one the user is more likely to be able to read/understand.
The <rp> tag exists explicitly for the purpose of interpolating the annotations into the text. So e.g. <ruby>漢字<rp>（</rp><rt>かんじ</rt><rp>）</rp></ruby> will look like 漢字（かんじ） to a client that doesn't support ruby text and a screenreader could read it the same way it would read any other text with parenthetical annotations in it.
The standard doesn't actually say what screenreaders are supposed to do, so I guess they could also try something fancy. But they don't have to.
If the box you were pasting into supported annotations then it would paste perfectly. Pasting into a plain text text-area field leaves the browser with a hard choice to make on how to interpret the data in the clipboard when transliterating it into plain text.
I just now tried pasting into a Jupyter notebook, and into the HTML entry box of the JSFiddle I linked to.
Again, Safari copy&paste to those elements in Safari includes the annotations.
Firefox does not.
Pasting to the terminal and pasting to a Jupyter notebook are my two primary expected paste destinations.
ruby rt { user-select: none; }