<div>
  <p> The HTML "ruby" element represents a ruby annotation. Ruby annotations are for showing pronunciation of East Asian characters.</p>
</div>

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<ruby>
  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

<ruby>
  <rb>東</rb><rb>京</rb>
  <rt>とう</rt><rt>きょう</rt>
  <rt>Tō</rt><rt>kyō</rt>
</ruby>

<ruby>
  <rb>W</rb><rb>W</rb><rb>W</rb>
  <rt>World</rt> <rt>Wide</rt> <rt>Web</rt>
</ruby>

<ruby>
  <rb>Aerith</rb><rb> </rb><rb>Gainsboro</rb>
  <rt>エアリス</rt><rt>・</rt><rt>ゲインズブール</rt>
</ruby>

<ruby>
  屋<rt>おく</rt>内<rt>ない</rt>
  禁<rt>きん</rt>煙<rt>えん</rt>
</ruby>

<ruby>
  屋<rt>おく</rt>  内<rt>ない</rt>
  禁<rt>きん</rt>  煙<rt>えん</rt>
</ruby>

<ruby>蝴<rt>hú</rt>蝶<rt>dié</rt></ruby>
  
<ruby><rb>one</rb> <rb>two</rb> <rt>1</rt> <rt>2</rt></ruby>
<ruby style="ruby-merge:collapse"><rb>無<rb>常<rt>む<rt>じょう</ruby>

$pri: #666;
$pri-lt: lighten($pri, 20%);
body {
  background-color: #444;
  font-family: Arial;
}
div {
  background-color: $pri;
  margin: 1em 0 1.5em;
  width: 30em;
  font-size: 1.2rem;
  padding: 1.3rem;
  border: 5px solid $pri-lt;
  line-height: 1.3em;
  color: $pri-lt;
}
.ruby { display: ruby; }
ruby {
  display: ruby;
  background-color: $pri;
  width: 20em;
  font-size: 1.5rem;
  padding: 1.3rem;
  border: 5px solid $pri-lt;
  line-height: 1.3em;
  color: $pri-lt;
}
/* 
Default states of ruby elements:
ruby { display: ruby; }
rb   { display: ruby-base; white-space: nowrap; }
rp   { display: none; }
rt   { display: ruby-text; white-space: nowrap; font-size: 50%; }
rbc  { display: ruby-base-container; }
rtc  { display: ruby-text-container; }
ruby, rb, rt, rbc, rtc { unicode-bidi: isolate; } 

Authors should not use the above rules; a UA that supports ruby layout should provide these by default.


Unfortunately, because Selectors cannot match against text nodes, it’s not possible with CSS to express rules that will automatically and correctly add parentheses to unparenthesized ruby annotations in HTML. (This is because HTML ruby allows implying the ruby base from raw text, without a corresponding element.) However, these rules will handle cases where either <rb> or <rtc> is used rigorously.

/* Parens around <rtc> */
rtc::before { content: "("; }
rtc::after  { content: ")"; }

/* Parens before first <rt> not inside <rtc> */
rb  + rt::before,
rtc + rt::before { content: "("; }

/* Parens after <rt> not inside <rtc> */
rb ~ rt:last-child::after,
rt + rb::before  { content: ")"; }
rt + rtc::before { content: ")("; }