4 ms·
As far as I can tell, the only content inside of a ruby tag should be annotated text or its annotation, the 1 that should not be annotated should not be inside
by gvx 5y ago
As far as I can tell, the only content inside of a ruby tag should be annotated text or its annotation, the 1 that should not be annotated should not be inside the <ruby> tag.
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>1
- alin23 5y agoIndeed, this looks quite good: https://cln.sh/5MWsIR https://cln.sh/5MWsIR
- dalke 5y agoThanks to you for the working demo, and to gvx for figuring it out! UPDATE: Here's an example for theobromine - https://jsfiddle.net/j84z1kyb/ 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.
- alin23 5y agoWhoa that's incredible! 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
- dalke 5y agoInteresting. My Cmd-C, Cmd-V in Safari gives: C1n21c3n4c52c61c7(=O8)[nH]9c10(=O11)n122C13 but in Firefox gives: Cn1cnc2c1c(=O)[nH]c(=O)n2C
- ahmedfromtunis 5y agoNot with chrome for Android though. Here's what the clipboard captured instead: C1n21c3n4c52c61c7(=O8)[nH]9c10(=O11)n122C13
- derefr 5y ago> Copy&paste captures the numeric annotations. I probably should have expected that, but didn't. That'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.
- yorwba 5y ago> 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. 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.
- kingcharles 5y agoMy guess is that only the paste is broken, not the copy. 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.
- dalke 5y agoI pasted into a iTerm2 terminal window, cat > /dev/null. 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.
- twic 5y agoIf you write the annotation like this: <ruby>C<rt class="ruby-1"></rt></ruby> With this CSS: .ruby-1::after { content: "1"; } (with corresponding treatment for other numbers) Then you should get an annotation that resists copying. This renders correctly for me in Firefox; no idea about other browsers.
- lelandfe 5y agoNice one. A slight change that will result in less CSS: <ruby class="smiles">C<rt data-atom="1"></rt></ruby> With this CSS: .smiles rt::after { content: attr(data-atom); }
- dalke 5y agoThanks twik and leflandfe! Using CSS ::after resolves those highlighting and copy&paste issues I noticed. New jsfiddle at https://jsfiddle.net/hnw1zbed/2/ https://jsfiddle.net/hnw1zbed/2/ .
- lygaret 5y agoyou can target the `rt` with css for no copy: ruby rt { user-select: none; }