Vertical upright text in safari has tiny spaces - html

Question

When using writing-mode: vertical-lr with text-orientation: upright, all characters are about the same height. However, on Safari, the space character between words becomes very small. Here is a code snippet for demonstration:
#import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
span {
font-family: Asap, sans-serif;
text-orientation: upright;
writing-mode: vertical-lr;
-webkit-text-orientation: upright;
}
<span>Hello, World!</span>
On Chrome and Firefox it looks like this:
On Safari, however, it looks like this:
What would be the best way to make the space character the same size on all browsers that works with multiple fonts and font sizes?

Answer 1

You can try this, instead of using text-orientation: upright; try just rotating the text using transform: rotate(90deg);
span {
font-family: Asap, sans-serif;
transform: rotate(90deg);
}
Then target specific browsers:
span {
font-family: Asap, sans-serif;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
Here is an example in a snippet -
span {
transform: rotate(90deg);
display: block;
position: fixed;
text-transform: uppercase;
}
<span>Hello, World!</span>