safari 中的垂直直立文本有微小的空间

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>