右对齐并将文本旋转到右边缘

Question

美好的一天，我正在努力确保在屏幕右侧显示一个带有文字的圆角矩形。在大多数情况下，它运作良好，但是当我将语言切换为俄语时，对齐就会出错。英语和其他国际语言（包括阿拉伯语！）工作正常 - 文本始终与右侧对齐。有问题的文字是右边的黄色框。我很确定它是我的硬编码 - 但我如何确保它坚持正确？ float：right，text-align：right don not work

感谢 （请点击图片查看英语和俄语之间的动画）

对齐代码：

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