user1361529 user1361529 - 29 days ago 8
CSS Question

Right align and rotate text to the right edge

Good day, I am trying to make sure I show a rounded rectangle to the right of my screen with some text. For the most part, it works well, but when I switch language to Russian, the alignment goes awry. English and other international languages (including Arabic!) work fine - the text is always aligned to the right. The text in question is the yellow box to the right. I'm pretty sure its my hard coded right - but how do I make sure it sticks to the right? float:right, text-align:right don't work

thanks
(please click on the image to see animation between english and russian)

image

The alignment code:

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

I think this is the simplest way to do it. Fiddle

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