Bug 260120 - No spacing within vertical upright text
Summary: No spacing within vertical upright text
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Text (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-08-12 13:11 PDT by glmvc
Modified: 2023-08-21 16:09 PDT (History)
7 users (show)

See Also:


Attachments
rendering in Safari, firefox, chrome (659.51 KB, image/png)
2023-08-20 17:32 PDT, Karl Dubost
no flags Details
space size when selected in safari, firefox, chrome. (24.04 KB, image/png)
2023-08-20 17:38 PDT, Karl Dubost
no flags Details
rendering in Epiphany on Linux (18.05 KB, image/png)
2023-08-21 16:09 PDT, fantasai
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description glmvc 2023-08-12 13:11:39 PDT
Safari displays spacing between words differently when writing-mode is set to a vertical value, for example vertical-lr, and text-orientation is set to upright.
Depending on the font and the ones I tested, it looks like there is no space at all.

I couldn't find anything helpful about this on the web and I am not familiar with font rendering. All I can say is that the spacing looks "correct" in the other major browsers.

Here is a CodePen with a minimal setup where the issue can be seen and tested:
https://codepen.io/glmvc/pen/YzRPoaX

Checked in Safari Version 16.5.2 and Safari Technology Preview Release 176 on macOS Ventura 13.4; and in Safari on iOS Version 16.6.
Comment 1 Ahmad Saleem 2023-08-13 04:36:09 PDT
I am able to reproduce this bug in Safari Technology Preview 176 and WebKit ToT (266845@main) where the 'red' one is not matching Chrome Canary 117 and Firefox Nighty 118.

Adding 'BrowserCompat' tag.
Comment 2 Ahmad Saleem 2023-08-13 04:37:34 PDT
Adding @Tim - he is doing writing mode these days and @Alan - since he fixed negative letter spacing issue recently. It might not be directly related to them but good to add them or get their inputs (if any).
Comment 3 zalan 2023-08-13 06:32:01 PDT
Safari produces the same result when font is set to Ahem (or Monospace) which makes me think this is more about fonts than layout. Myles?

<style>
div {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-family: Ahem;
}
</style>
<div>yes spacing</div>
Comment 4 Radar WebKit Bug Importer 2023-08-19 13:12:13 PDT
<rdar://problem/114140150>
Comment 5 Karl Dubost 2023-08-20 17:32:15 PDT
Created attachment 467349 [details]
rendering in Safari, firefox, chrome

The three browsers renders slightly differently indeed.

from shortest length to longest
safari, firefox and chrome.
Comment 6 Karl Dubost 2023-08-20 17:37:46 PDT
Previously 
Bug 86071
Bug 93304
Comment 7 Karl Dubost 2023-08-20 17:38:49 PDT
Created attachment 467350 [details]
space size when selected in safari, firefox, chrome.

We better the difference in the space sizes across the browsers.
Comment 8 fantasai 2023-08-21 16:09:25 PDT
Created attachment 467374 [details]
rendering in Epiphany on Linux