Правый выровнять и повернуть текст в правый край

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; 
    }