User:Shoichi/Zhuyin St layout.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
Opera：按 Ctrl-F5。
<!--這個是用於給漢字拼音用的css，配合ruby模版而用的-->
  body {
    background: yellow;
    font-size: 20pt;
    color: red;
  }

  .hruby {
  display: inline;
  line-height: 2; }
  .hruby .rp {
    display: none; }
  .hruby .ru[annotation] > .rt {
    display: inline-block;
    height: 0;
    width: 0;
    font: 0/0 hidden-text; }
  .hruby .ru {
    position: relative;
    display: inline-block;
    text-indent: 0; }
  .hruby .ru:before, .hruby .zhuyin {
    -moz-transform: scale(0.55);
    -ms-transform: scale(0.55);
    -webkit-transform: scale(0.55);
    transform: scale(0.55);
    -moz-text-emphasis: none;
    -webkit-text-emphasis: none;
    text-emphasis: none;
    font-style: normal;
    font-weight: normal;
    line-height: normal;
    text-decoration: none;
    text-indent: 0;
    position: absolute;
    display: inline-block;
    margin-top: -0.5em; }
  .hruby .ru[annotation] {
    text-align: center; }
    .hruby .ru[annotation]:before {
      left: -265%;
      top: -.5em;
      vertical-align: top;
      height: 1em;
      width: 600%;
      content: attr(annotation);
      line-height: 1;
      text-align: center;
      text-indent: 0; }
  .hruby[rightangle] .ru[annotation]:before {
    left: -250%; }
  .hruby .ru[zhuyin] {
    display: inline-block;
    position: relative;
    width: 1.8em;
    text-align: left; }
    .hruby .ru[zhuyin] .zhuyin {
      right: .2em;
      top: 0;
      height: 2.7em;
      width: .8em;
      line-height: .9;
      white-space: pre-wrap;
      word-break: break-all; }
    .hruby .ru[zhuyin] .diao {
      position: absolute;
      right: -.9em;
      top: 0;
      display: inline-block;
      width: 1em; }
    .hruby .ru[zhuyin][length='0'], .hruby .ru[zhuyin]:empty {
      width: auto; }
    .hruby .ru[zhuyin][length='0'] .zhuyin, .hruby .ru[zhuyin]:empty .zhuyin {
      display: none; }
    .hruby .ru[zhuyin][length='1'] .zhuyin {
      margin-top: .125em; }
    .hruby .ru[zhuyin][length='1'] .diao {
      margin-top: -.35em; }
    .hruby .ru[zhuyin][length='2'] .zhuyin {
      margin-top: -.175em; }
    .hruby .ru[zhuyin][length='2'] .diao {
      margin-top: .5em; }
    .hruby .ru[zhuyin][length='3'] .zhuyin {
      margin-top: -.45em; }
    .hruby .ru[zhuyin][length='3'] .diao {
      margin-top: 1.3em; }
    .hruby .ru[zhuyin][diao='˙'] .diao {
      right: -.35em; }
    .hruby .ru[zhuyin][diao='˙'][length='1'] .diao {
      margin-top: -.5em; }
    .hruby .ru[zhuyin][diao='˙'][length='2'] .diao {
      margin-top: -.3em; }
    .hruby .ru[zhuyin][diao='˙'][length='3'] .diao {
      margin-top: -.25em; }
    .hruby .ru[zhuyin][diao='˪'] .diao, .hruby .ru[zhuyin][diao='˫'] .diao {
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      margin-right: -.25em; }
    .hruby ru[zhuyin][diao^='ㆴ'] .diao, .hruby .ru[zhuyin][diao^='ㆵ'] .diao, .hruby .ru[zhuyin][diao^='ㆶ'] .diao, .hruby .ru[zhuyin][diao^='ㆷ'] .diao, .hruby .ru[zhuyin][diao='󳆴'] .diao, .hruby .ru[zhuyin][diao='󳆵'] .diao, .hruby .ru[zhuyin][diao='󳆶'] .diao, .hruby .ru[zhuyin][diao='󳆷'] .diao {
      top: 20%;
      margin-right: -.3em; }
  .hruby .ru[annotation]:before, .hruby[rightangle] .ru[annotation][order='1']:before {
    top: -.5em; }
  .hruby .ru[order='1']:before, .hruby[rightangle] .ru[annotation][order='0']:before {
    bottom: -.4em;
    top: auto; }
  .hruby[rightangle] .ru[annotation]:before {
    margin-left: -.4em; }
  @media screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 192dpi) {
    .hruby .yin {
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      display: inline-block; }
    .hruby .ru[zhuyin][diao='˪'] .diao, .hruby .ru[zhuyin][diao='˫'] .diao {
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1); }
    .hruby .ru[zhuyin][diao='˙'] .diao {
      -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
      -webkit-transform: scale(0.8);
      transform: scale(0.8);
      top: .125em; } }