[FIXED] How to remove the unwanted jagged aliasing in Arial/Times Font for "writing-mode: vertical-rl & transform: rotate(180deg)"?

Issue

Given some vertical text as part of a sideways navigation using simply and only:

writing-mode: vertical-rl;
transform: rotate(180deg);

However, on both Chrome & Firefox, on both of my standard fontfaces used Arial & Times News Roman text becomes jagged aliased and has a wrong letterspacing.

I have discovered that by adding 0.1 to the degrees this "solves" the aliasing and renders the font beautifully and faithfully without any jagged aliasing:

transform: rotate(180.1deg);

However, this adds a slanted tilt and an extra pixel to the right of the menu items, long story short: it is not a(n elegant) solution to my problem and creates new problems.

Is there another (more elegant) way to get rid of the jagged aliasing introduced by the combination of vertical-rl and rotate(180deg)?

---

Arial/Times, 180degrees, straight but jagged and aliased.
Notice also how the letter spacing looks incorrect!

---

Arial/Times, 180.1degrees, no jagged aliasing and a correct spacing between letters.
But everything is slanted and tilted which is unwanted:

---

Demo

https://jsfiddle.net/8Lrv5epw/

Solution

I think i found a solution to solve this problem. You need a box-sizing property with a value of border-box.

*,
::after,
::before {
  box-sizing: border-box; 
}

nav {
  height: auto;
  font-family: 'Arial';
  letter-spacing: 0.5px;
  font-size: 1.2em; /* was 1em */
  display: block;
  width: 100%;
}
nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5rem 1rem;
  text-align: center;
  transform: scale(0.8); /* scale down */
  transform: rotate(180deg);
}

*,
::after,
::before {
  box-sizing: border-box;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav {
  height: auto;
  font-family: "Arial";
  letter-spacing: 0.5px;
  font-size: 1.2em;
  display: block;
  width: 100%;
}

nav li {
  writing-mode: vertical-rl;
  background: blue;
  padding: 0em;
  border-top: 1px solid white;
}

nav li:first-of-type {
  border-top: none
}

nav li a {
  display: flex;
  background-color: blue;
  text-decoration: none;
  color: #fff;
  padding: 1.5em 1em;
  text-align: center;
  transform: scale(0.8);
  transform: rotate(180deg);
  /* transform: rotate(180.1deg); */
}

nav li.selected,
nav li.selected a {
  background-color: purple;
}

<nav>
  <ul>
    <li><a href="#">Bureau</a></li>
    <li class="selected"><a href="#">Initiatief</a></li>
    <li><a href="#">Dienst</a></li>
    <li><a href="#">Ontwerp</a></li>
    <li><a href="#">Concept</a></li>
    <li><a href="#">Oeuvre</a></li>
  </ul>
</nav>

Answered By - Anton

Answer Checked By - Timothy Miller (PHPFixing Admin)