NEW260120
No spacing within vertical upright text 
https://bugs.webkit.org/show_bug.cgi?id=260120
Summary No spacing within vertical upright text
glmvc
Reported 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.
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
View All Add attachment proposed patch, testcase, etc.
Ahmad Saleem
Comment 1 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.
Ahmad Saleem
Comment 2 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).
alan
Comment 3 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>
Radar WebKit Bug Importer
Comment 4 2023-08-19 13:12:13 PDT
<rdar://problem/114140150>
Karl Dubost
Comment 5 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.
Karl Dubost
Comment 6 2023-08-20 17:37:46 PDT
Previously Bug 86071 Bug 93304
Karl Dubost
Comment 7 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.
fantasai
Comment 8 2023-08-21 16:09:25 PDT
Created attachment 467374 [details] rendering in Epiphany on Linux
Note You need to log in before you can comment on or make changes to this bug.