Vertical aligned Zhuyin/bopomofo ruby text with HTML & CSS (1st attempt)

Raw vertical-bopomofo-ruby-text.css

p {
  font-size: 1.9em;
  color: #333;
}

ruby {
  position: relative;
  margin-right: 0.3em;
}

rt {
  position: absolute;
  color: #555;
  display: block;
  right: -0.4em;
  width: 0.5em;
  top: 0.5em;
  line-height: .9em;
  text-align: center;
  font-size: 0.4em;
  transition: all .2s ease;
  font-weight: 900;
}

ruby:hover rt {
  color: #333;
}

rt span {
  display: block;
  position: absolute;
  font-size: 1.2em;
  top: 40%;
  right: -0.6em;
}

Raw vertical-bopomofo-ruby-text.html

<!--
  First reasonably successful attempt at getting this to work (and using IE to develop with of all things! Who knew)
  There should be a working copy of this code at: https://jsfiddle.net/texh/0pxyo7c4/
  Doesn't appear to work in Chrome (Android at least)
-->
<p>
  <ruby>我<rt>ㄨㄛ<span>ˇ</span></rt></ruby>
  <ruby>很<rt>ㄏㄣ<span>ˇ</span></rt></ruby>
  <ruby>無<rt>ㄨ<span>ˊ</span></rt></ruby>
  <ruby>聊<rt>ㄌㄧㄠ<span>ˊ</span></rt></ruby>
</p>