Тег <rp> в HTML — запасні дужки для браузерів без ruby

<ruby>
 НАШ САЙТ  
 <rp>НАШ САЙТ</rp><rt>CSS IN UA</rt><rp>НАШ САЙТ</rp>
</ruby>

HTML

<h4 class="cap">1. Як це виглядає тут і зараз</h4>
<p class="demo">
    <ruby>漢<rp>(</rp><rt>кан</rt><rp>)</rp>字<rp>(</rp><rt>дзі</rt><rp>)</rp></ruby>
    — дужок не видно: у них <code>display: none</code>.
</p>

<h4 class="cap">2. Той самий код у браузері без підтримки</h4>
<p class="demo fallback">
    <ruby>漢<rp>(</rp><rt>кан</rt><rp>)</rp>字<rp>(</rp><rt>дзі</rt><rp>)</rp></ruby>
    — тут усім рубіновим теґам задано <code>display: inline</code>.
</p>
<p class="demo fallback">
    <ruby>漢<rt>кан</rt>字<rt>дзі</rt></ruby>
    — а це те саме БЕЗ <code>&lt;rp&gt;</code>: підписи злиплися з основою.
</p>

<h4 class="cap">3. Розмір анотації типово вдвічі менший за основу</h4>
<p class="demo">
    Типово: <ruby>Шевченко<rp>(</rp><rt>Шевче́нко</rt><rp>)</rp></ruby>.
    Із власним розміром: <ruby class="big">Шевченко<rp>(</rp><rt>Шевче́нко</rt><rp>)</rp></ruby>.
</p>

<h4 class="cap">4. <code>&lt;rp&gt;</code> сам закриває попередній <code>&lt;rt&gt;</code></h4>
<p class="demo">
    <ruby>осн<rt>анотація<rp>)</rp></ruby>
    — закривального теґа в розмітці немає, але браузер закрив анотацію
    на дужці; у дереві документа лежить <code>rt</code>, а за ним окремий
    <code>rp</code>.
</p>

CSS

.demo {
    max-width: 560px;
    margin: 0 0 8px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    font-size: 1.25rem;
    line-height: 2.4;
}

.demo.fallback {
    border-color: #d1a04a;
    background: #fffaf0;
}

/* так виглядає рубінова розмітка там, де її не підтримують */
.fallback ruby,
.fallback rt,
.fallback rp {
    display: inline;
    font-size: inherit;
}

rt {
    color: #2f6fd0;
}

/* типовий розмір анотації — половина основи; беремо своє значення */
.big rt {
    font-size: .65em;
    color: #29713a;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
    font-size: .8em;
}