Question 277732 in Html Question posted in
Some basic documentation can be found here.

Html – Why does rotating text in a table cell invert the lines?

.rotate_text {
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.rotated_cell {
    width: 5%;
    text-align: center;
    vertical-align: center;
    padding: 1px;
    padding-bottom: 10px;
    padding-top: 20px;
}
<table><tr>
<td class="rotate_text rotated_cell" colspan="1" rowspan ="2">Reference#<br> 6118</td>
</tr></table>

And what I get is this:
enter image description here

But I was expecting the number to be to the right of the word.
Why does it invert?

Tags:

2

Answers


  1. 0

    That’s an issue with the writing mode direction

    Switch it to writing-mode: vertical-rl

    .rotate_text {
  writing-mode: vertical-rl;
  transform: rotate(-180deg);
  border: 1px solid grey;
}

.rotated_cell {
  width: 5%;
  text-align: center;
  vertical-align: center;
  padding: 1px;
  padding-bottom: 10px;
  padding-top: 20px;
}
    <table>
  <tr>
    <td class="rotate_text rotated_cell" colspan="1" rowspan="2">Reference#<br> """ + str(row['ReferenceID']) + """</td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    I can see that simply setting writing-mode to vertical-lr (even before adding the rotation) reverses the order of the lines of text, so it was probably caused by that.

    Try removing writing-mode and instead using a rotation of -90deg:

    td { border: 1px solid black; } /* Added for demonstration purposes */

.rotate_text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.rotated_cell {
    width: 5%;
    text-align: center;
    vertical-align: center;
    padding: 1px;
    padding-bottom: 10px;
    padding-top: 20px;
}
    <table><tr>
<td class="rotate_text rotated_cell" colspan="1" rowspan="2">Reference#<br> 6118</td>
</tr></table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search