Unable to rotate copyright (©) character

Question

I can't rotate © character. Is there something I'm doing wrong?

.copy {
  font-size: 12px;
  font-family: Arial;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

<span class="copy">&copy; This is not working.</span>
<span class="copy">&amp; This is working.</span>

Answer 1

You should use this :

sideways

Causes characters to be laid out as they would be horizontally, but with the whole line rotated 90° clockwise.

.copy {
  font-size: 12px;
  font-family: Arial;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  transform: rotate(180deg);
}

<span class="copy">&copy; This is not working.</span>
<span class="copy">&amp; This is working.</span>

EDIT - You could use sideways-right since there aren't many browsers supporting sideways - they both work for me

EDIT 2 -

sideways-right

An alias to sideways that is kept for compatibility purposes.

But both actually seems supported by most major browsers

Answer 2

You can rotate the text with only transform, it's supported in all major browsers even old IEs.

.copy {
  font-family: sans-serif;
  display: inline-block;
  transform: rotate(-90deg) translate(-100%, 100%);
  transform-origin: left bottom;
}

<span class="copy">&copy; Hello World</span>