ruby-annotated SMILES

example of using HTML ruby to annotate atom indices in a SMILES string for theobromine.

HTML

<h2>
theobromine
</h2>
<h3>
direct annotation
</h3>
<P>
<ruby>C<rt>1</rt></ruby><ruby>n<rt>2</rt></ruby>1<ruby>c<rt>3</rt></ruby><ruby>n<rt>4</rt></ruby><ruby>c<rt>5</rt></ruby>2<ruby>c<rt>6</rt></ruby>1<ruby>c<rt>7</rt></ruby>(=<ruby>O<rt>8</rt></ruby>)<ruby>[nH]<rt>9</rt></ruby><ruby>c<rt>10</rt></ruby>(=<ruby>O<rt>11</rt></ruby>)<ruby>n<rt>12</rt></ruby>2<ruby>C<rt>13</rt></ruby>
</P>
<h2>
via CSS ::after
</h2>
<P>

<ruby class="smiles">C<rt data-atom="1"></rt></ruby><ruby class="smiles">n<rt data-atom="2"></rt></ruby>1<ruby class="smiles">c<rt data-atom="3"></rt></ruby><ruby class="smiles">n<rt data-atom="4"></rt></ruby><ruby class="smiles">c<rt data-atom="5"></rt></ruby>2<ruby class="smiles">c<rt data-atom="6"></rt></ruby>1<ruby class="smiles">c<rt data-atom="7"></rt></ruby>(=<ruby class="smiles">O<rt data-atom="8"></rt></ruby>)<ruby class="smiles">[nH]<rt data-atom="9"></rt></ruby><ruby class="smiles">c<rt data-atom="10"></rt></ruby>(=<ruby class="smiles">O<rt data-atom="11"></rt></ruby><ruby class="smiles">n<rt data-atom="12"></rt></ruby>2<ruby class="smiles">C<rt data-atom="13"></rt></ruby>

</P><P>

Using ::after prevents the odd-highlighting and browser-dependent copy&amp;paste issues of the explicit approach. Thanks to <a href="https://news.ycombinator.com/item?id=29446293">twik and lelandfe on HN</a> for pointing out this approach.

</P>

CSS

.smiles rt::after {
    content: attr(data-atom);
  }