Bug 260120

Summary:

No spacing within vertical upright text

Product:

WebKit

Reporter:

glmvc <ivanglmvc>

Component:

Text

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

ahmad.saleem792, fantasai.bugs, karlcow, mmaxfield, ntim, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
rendering in Safari, firefox, chrome	none
space size when selected in safari, firefox, chrome.	none
rendering in Epiphany on Linux	none

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