右端にテキストを右揃えして回転させよう

Question

こんにちは、私は、テキストのある画面の右側に丸い四角形を表示するようにしています。ほとんどの場合、うまくいきますが、言語をロシア語に切り替えると、アライメントがうまくいかなくなります。英語とその他の言語（アラビア語を含む）は正常に動作します - テキストは常に右に揃えられます。問題のテキストは、右側の黄色のボックスです。私はそれが私のハードコードされた権利をかなり確信しています - しかし、私はそれが右に固執することを確認するには？フロート：右、テキスト整列：右

感謝 を動作しない（英語とロシア語の間でアニメーションを見るには画像をクリックしてください）

アライメントコード：

CSS：

.bwmode { 
    position: absolute; 
    top: 30%; 
    right: -28px; 
    opacity: 0.7; 
    background-color: #f1c40f; 
    color: #000; 
    font-size: 11px; 
    border-radius: 0px 0px 5px 5px; 
    z-index: 99999; 
    padding-left: 3px; 
    padding-right: 3px; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

HTML

<div class="bwmode" ng-if="$root.runMode=='lowbw'"> 
      <span translate="kLowBWDisplay"></span> 
</div> 

Answer 1

これは最も簡単な方法です。 Fiddle

p{ 
     writing-mode: vertical-lr; 
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%:); 
     right: 0; 
    }