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

Issue

.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:

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

Solution

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>

Answered By - Paulie_D