CODEWITHSUNDEEP
cssrotationright-align
Neo
Neo

Reputation: 1377

CSS align rotated text

I have a rotated text within a div. I want to align the span to the "right" (see red arrow) of the div

<div class="rotateText">
  <span>This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way</span>
</div>

    .rotateText{
      width: 200px;
      height: 300px;
      writing-mode: tb-rl;
      transform: rotate(-180deg);
      background-color: yellow;
    }

https://jsfiddle.net/konqmr8c/1/

enter image description here

Upvotes: 2

Views: 1340

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105893

You might not need an extra container , flex, writing-mode and align-items should do. writing-mode:sideways-lr missing for some browsers will require transform to reset it on the opposite side.

.rotateText {
  width: 200px;
  height: 300px;
  display: flex;
  background-color: yellow;
  align-items: flex-end;
  /* 
  writing-mode:sideways-lr; 
 ... would be great if that worked everywhere ,
 let's use what's avalaible and transform :*/
  writing-mode: tb-rl;
  transform: scale(-1)
}

.rotateText.column {
  /* if a few child, you need to reset direction and alignement */
  flex-direction: column;
  justify-content: flex-end;
  align-items: start
}


/* demo purpose */

.rotateText {
  float: left;
  margin: 0.5em;
}

h1,
p {
  margin: 0.15em;
}
<div class="rotateText">
  This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way
</div>

<div class="rotateText column">
  <h1>Title prior text</h1>
  <p>This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way </p>
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115047

Flexbox can do that:

Note that the writing-mode and transform should be on the child and not the parent.

.rotateText {
  width: 200px;
  height: 300px;
  display: flex;
  background-color: yellow;
  justify-content: flex-end;
}

span {
  writing-mode: tb-rl;
  transform: rotate(180deg);
}
<div class="rotateText">
  <span>This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way</span>
</div>

Upvotes: -1

dzekon
dzekon

Reputation: 21

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position:relative;
}

span {
  border:1px solid red;
  position:absolute;
  left: 0px;
}

Upvotes: 0

James Ives
James Ives

Reputation: 3365

Pretty simple way to do this would be with position: absolute. Apply relative to the parent container so you can anchor the span to it, and then set left: 0. This will make the text hug the bottom of the container.

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

This will result in this:

Rotated

If you want to just rotate the entire box just remove the transform property. Resulting in:

enter image description here

Upvotes: 2

Related Questions